@skyux/popovers 5.9.2 → 5.9.5

package/bundles/skyux-popovers.umd.js

@@ -218,896 +218,325 @@
                     type: i0.Input
                 }] } });
 
-    function parseAffixHorizontalAlignment$1(alignment) {
-        switch (alignment) {
-            case 'center':
-                return 'center';
-            case 'left':
-                return 'left';
-            case 'right':
-                return 'right';
-            /* istanbul ignore next */
-            default:
-                throw "SkyAffixHorizontalAlignment does not have a matching value for '" + alignment + "'!";
-        }
-    }
-
-    /**
-     * Creates a dropdown menu that displays menu items that users may select.
-     */
-    var SkyDropdownComponent = /** @class */ (function () {
-        function SkyDropdownComponent(changeDetector, affixService, overlayService, themeSvc) {
-            this.changeDetector = changeDetector;
-            this.affixService = affixService;
-            this.overlayService = overlayService;
-            this.themeSvc = themeSvc;
-            /**
-             * Provides an observable to send commands to the dropdown. The commands should respect
-             * the [[SkyDropdownMessage]] type.
-             */
-            this.messageStream = new rxjs.Subject();
-            this.isMouseEnter = false;
-            this.isVisible = false;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._isOpen = false;
-        }
-        Object.defineProperty(SkyDropdownComponent.prototype, "buttonStyle", {
-            get: function () {
-                return this._buttonStyle || 'default';
-            },
-            /**
-             * Specifies a background color for the dropdown button. Available values are `default` and
-             * `primary`. These values set the background color from the
-             * [secondary and primary button classes](https://developer.blackbaud.com/skyux/components/button) respectively.
-             * @default "default"
-             */
-            set: function (value) {
-                this._buttonStyle = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "buttonType", {
-            get: function () {
-                return this._buttonType || 'select';
-            },
-            /**
-             * Specifies the type of button to render as the dropdown's trigger element. To display a button
-             * with text and a caret, specify `select` and then enter the button text in a
-             * `sky-dropdown-button` element. To display a round button with an ellipsis, specify
-             * `context-menu`. And to display a button with a [Font Awesome icon](http://fontawesome.io/icons/), specify the icon's class name.
-             * For example, to display the `fa-filter` icon, specify `filter`.
-             * @default "select"
-             */
-            set: function (value) {
-                this._buttonType = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled || false;
-            },
-            /**
-             * Indicates whether to disable the dropdown button.
-             * @default false
-             */
-            set: function (value) {
-                this._disabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "dismissOnBlur", {
-            get: function () {
-                if (this._dismissOnBlur === undefined) {
-                    return true;
-                }
-                return this._dismissOnBlur;
-            },
-            /**
-             * Indicates whether to close the dropdown when users click away from the menu.
-             * @default true
-             */
-            set: function (value) {
-                this._dismissOnBlur = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "horizontalAlignment", {
-            get: function () {
-                return this._horizontalAlignment || 'left';
-            },
-            /**
-             * Specifies the horizontal alignment of the dropdown menu in relation to the dropdown button.
-             * @default "left"
-             */
-            set: function (value) {
-                this._horizontalAlignment = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "trigger", {
-            get: function () {
-                return this._trigger || 'click';
-            },
-            /**
-             * Specifies how users interact with the dropdown button to expose the dropdown menu.
-             * We recommend the default `click` value because the `hover` value can pose
-             * [accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) issues
-             * for users on touch devices such as phones and tablets.
-             * @deprecated We recommend against using this property. If you choose to use the deprecated
-             * `hover` value anyway, we recommend that you not use it in combination with the `title`
-             * property. (This property will be removed in the next major version release.)
-             * @default "click"
-             */
-            set: function (value) {
-                this._trigger = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "isOpen", {
-            get: function () {
-                return this._isOpen || false;
-            },
-            set: function (value) {
-                this._isOpen = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownComponent.prototype, "menuContainerElementRef", {
-            get: function () {
-                return this._menuContainerElementRef;
-            },
-            set: function (value) {
-                if (value) {
-                    this._menuContainerElementRef = value;
-                    this.destroyAffixer();
-                    this.createAffixer();
-                    this.changeDetector.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyDropdownComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a;
-            this.addEventListeners();
-            this.messageStream
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (message) {
-                _this.handleIncomingMessages(message);
-            });
-            // Load proper icons on theme change.
-            (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                _this.changeDetector.markForCheck();
-            });
-        };
-        SkyDropdownComponent.prototype.ngOnDestroy = function () {
-            this.destroyAffixer();
-            this.destroyOverlay();
-            clearTimeout(this._positionTimeout);
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-            this.ngUnsubscribe = undefined;
-        };
-        SkyDropdownComponent.prototype.addEventListeners = function () {
-            var _this = this;
-            var buttonElement = this.triggerButton.nativeElement;
-            rxjs.fromEvent(buttonElement, 'click')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                if (_this.isOpen) {
-                    _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                }
-                else {
-                    _this.sendMessage(exports.SkyDropdownMessageType.Open);
-                    // Wait for dropdown to open, then set focus on first item.
-                    setTimeout(function () {
-                        _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
-                    });
-                }
-            });
-            rxjs.fromEvent(buttonElement, 'keydown')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (event) {
-                var key = event.key.toLowerCase();
-                /* tslint:disable-next-line:switch-default */
-                switch (key) {
-                    case 'escape':
-                        /*istanbul ignore else*/
-                        if (_this.isOpen) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                            _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
-                            event.stopPropagation();
-                        }
-                        break;
-                    case 'tab':
-                        if (_this.isOpen && _this.dismissOnBlur) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                        }
-                        break;
-                    case 'arrowup':
-                    case 'up':
-                        if (!_this.isOpen) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Open);
-                            _this.sendMessage(exports.SkyDropdownMessageType.FocusLastItem);
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }
-                        break;
-                    case 'enter':
-                    case 'arrowdown':
-                    case 'down':
-                    case ' ': // Spacebar.
-                        /*istanbul ignore else*/
-                        if (!_this.isOpen) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Open);
-                            _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }
-                        break;
-                }
-            });
-            rxjs.fromEvent(buttonElement, 'mouseenter')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.isMouseEnter = true;
-                if (_this.trigger === 'hover') {
-                    _this.sendMessage(exports.SkyDropdownMessageType.Open);
-                }
-            });
-            rxjs.fromEvent(buttonElement, 'mouseleave')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.isMouseEnter = false;
-                if (_this.trigger === 'hover') {
-                    // Allow the dropdown menu to set isMouseEnter before checking if the close action
-                    // should be taken.
-                    setTimeout(function () {
-                        if (!_this.isMouseEnter) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                        }
-                    });
-                }
-            });
-        };
-        SkyDropdownComponent.prototype.createOverlay = function () {
-            var _this = this;
-            if (this.overlay) {
-                return;
-            }
-            var overlay = this.overlayService.create({
-                enableScroll: true,
-                enablePointerEvents: true,
-            });
-            overlay.attachTemplate(this.menuContainerTemplateRef);
-            overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                if (_this.dismissOnBlur) {
-                    _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                }
-            });
-            this.overlay = overlay;
-        };
-        SkyDropdownComponent.prototype.destroyAffixer = function () {
-            /*istanbul ignore else*/
-            if (this.affixer) {
-                this.affixer.destroy();
-                this.affixer = undefined;
-            }
-        };
-        SkyDropdownComponent.prototype.destroyOverlay = function () {
-            /*istanbul ignore else*/
-            if (this.overlay) {
-                this.overlayService.close(this.overlay);
-                this.overlay = undefined;
-            }
-        };
-        SkyDropdownComponent.prototype.createAffixer = function () {
-            var _this = this;
-            var affixer = this.affixService.createAffixer(this.menuContainerElementRef);
-            affixer.placementChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (change) {
-                _this.isVisible = change.placement !== null;
-                _this.changeDetector.markForCheck();
-            });
-            this.affixer = affixer;
-        };
-        SkyDropdownComponent.prototype.handleIncomingMessages = function (message) {
-            if (!this.disabled) {
-                /* tslint:disable-next-line:switch-default */
-                switch (message.type) {
-                    case exports.SkyDropdownMessageType.Open:
-                        this.isOpen = true;
-                        this.positionDropdownMenu();
-                        break;
-                    case exports.SkyDropdownMessageType.Close:
-                        this.isOpen = false;
-                        this.destroyOverlay();
-                        break;
-                    case exports.SkyDropdownMessageType.Reposition:
-                        // Only reposition the dropdown if it is already open.
-                        /* istanbul ignore else */
-                        if (this.isOpen && this.affixer) {
-                            this.affixer.reaffix();
-                        }
-                        break;
-                    case exports.SkyDropdownMessageType.FocusTriggerButton:
-                        this.triggerButton.nativeElement.focus();
-                        break;
-                }
-            }
-        };
-        SkyDropdownComponent.prototype.sendMessage = function (type) {
-            this.messageStream.next({ type: type });
-        };
-        SkyDropdownComponent.prototype.positionDropdownMenu = function () {
-            var _this = this;
-            this.isVisible = false;
-            this.createOverlay();
-            this.changeDetector.markForCheck();
-            // Explicitly declare the `setTimeout` from the `window` object in order to use the DOM typings
-            // during a unit test (instead of confusing this with Node's `setTimeout`).
-            this._positionTimeout = window.setTimeout(function () {
-                _this.affixer.affixTo(_this.triggerButton.nativeElement, {
-                    autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
-                    enableAutoFit: true,
-                    horizontalAlignment: parseAffixHorizontalAlignment$1(_this.horizontalAlignment),
-                    isSticky: true,
-                    placement: 'below',
-                });
-                _this.isVisible = true;
-                _this.changeDetector.markForCheck();
-            });
-        };
-        return SkyDropdownComponent;
-    }());
-    SkyDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownComponent, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", dismissOnBlur: "dismissOnBlur", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: i0.ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-dropdown\">\n  <button\n    class=\"sky-btn sky-dropdown-button\"\n    type=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? menuId : null\"\n    [attr.aria-haspopup]=\"menuAriaRole\"\n    [attr.aria-label]=\"\n      label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n    \"\n    [attr.title]=\"title\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    #triggerButton\n  >\n    <ng-container [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"> </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n        >\n          <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"], components: [{ type: i3__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-dropdown',
-                        template: "<div class=\"sky-dropdown\">\n  <button\n    class=\"sky-btn sky-dropdown-button\"\n    type=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? menuId : null\"\n    [attr.aria-haspopup]=\"menuAriaRole\"\n    [attr.aria-label]=\"\n      label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n    \"\n    [attr.title]=\"title\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    #triggerButton\n  >\n    <ng-container [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"> </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n        >\n          <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</ng-template>\n",
-                        styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace.SkyThemeService, decorators: [{
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { buttonStyle: [{
-                    type: i0.Input
-                }], buttonType: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], dismissOnBlur: [{
-                    type: i0.Input
-                }], label: [{
-                    type: i0.Input
-                }], horizontalAlignment: [{
-                    type: i0.Input
-                }], messageStream: [{
-                    type: i0.Input
-                }], title: [{
-                    type: i0.Input
-                }], trigger: [{
-                    type: i0.Input
-                }], menuContainerElementRef: [{
-                    type: i0.ViewChild,
-                    args: ['menuContainerElementRef', {
-                            read: i0.ElementRef,
-                        }]
-                }], menuContainerTemplateRef: [{
-                    type: i0.ViewChild,
-                    args: ['menuContainerTemplateRef', {
-                            read: i0.TemplateRef,
-                            static: true,
-                        }]
-                }], triggerButton: [{
-                    type: i0.ViewChild,
-                    args: ['triggerButton', {
-                            read: i0.ElementRef,
-                            static: true,
-                        }]
-                }] } });
-
-    var nextId = 0;
-    /**
-     * Creates a menu that contains dropdown menu items.
-     *
-     */
-    var SkyDropdownMenuComponent = /** @class */ (function () {
-        function SkyDropdownMenuComponent(changeDetector, elementRef, dropdownComponent) {
-            this.changeDetector = changeDetector;
-            this.elementRef = elementRef;
-            this.dropdownComponent = dropdownComponent;
-            /**
-             * Fires when the dropdown menu's active index or selected item changes. This event provides an
-             * observable to emit changes, and the response is of
-             * the SkyDropdownMenuChange type.
-             */
-            this.menuChanges = new i0.EventEmitter();
-            this.dropdownMenuId = "sky-dropdown-menu-" + ++nextId;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._menuIndex = 0;
-        }
-        Object.defineProperty(SkyDropdownMenuComponent.prototype, "ariaRole", {
-            get: function () {
-                return this._ariaRole || 'menu';
-            },
-            /**
-             * Specifies an ARIA role for the dropdown menu
-             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-             * by indicating how the dropdown menu functions and what it controls. The dropdown button
-             * inherits this value to set its `aria-haspopup` property. For information
-             * about how an ARIA role indicates what an item represents on a web page, see the
-             * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
-             * @default "menu"
-             */
-            set: function (value) {
-                this._ariaRole = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownMenuComponent.prototype, "useNativeFocus", {
-            get: function () {
-                if (this._useNativeFocus === undefined) {
-                    return true;
-                }
-                return this._useNativeFocus;
-            },
-            /**
-             * Indicates whether to use the browser's native focus function when users navigate through menu
-             * items with the keyboard. To disable the native focus function, set this property to `false`.
-             * For example, to let users interact with the dropdown menu but keep the keyboard focus on a
-             * different element, set this property to `false`.
-             * @default true
-             */
-            set: function (value) {
-                this._useNativeFocus = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownMenuComponent.prototype, "hasFocusableItems", {
-            get: function () {
-                var found = this.menuItems.find(function (item) { return item.isFocusable(); });
-                return found !== undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyDropdownMenuComponent.prototype, "menuIndex", {
-            get: function () {
-                return this._menuIndex;
-            },
-            set: function (value) {
-                if (value < 0) {
-                    value = this.menuItems.length - 1;
-                }
-                if (value >= this.menuItems.length) {
-                    value = 0;
-                }
-                this._menuIndex = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyDropdownMenuComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            /* istanbul ignore else */
-            if (this.dropdownComponent) {
-                this.dropdownComponent.menuId = this.dropdownMenuId;
-                this.dropdownComponent.menuAriaRole = this.ariaRole;
-                this.dropdownComponent.messageStream
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function (message) {
-                    /* tslint:disable-next-line:switch-default */
-                    switch (message.type) {
-                        case exports.SkyDropdownMessageType.Open:
-                        case exports.SkyDropdownMessageType.Close:
-                            _this.reset();
-                            break;
-                        case exports.SkyDropdownMessageType.FocusFirstItem:
-                            _this.focusFirstItem();
-                            break;
-                        case exports.SkyDropdownMessageType.FocusNextItem:
-                            _this.focusNextItem();
-                            break;
-                        case exports.SkyDropdownMessageType.FocusPreviousItem:
-                            _this.focusPreviousItem();
-                            break;
-                        case exports.SkyDropdownMessageType.FocusLastItem:
-                            _this.focusLastItem();
-                            break;
-                    }
-                });
-                this.menuChanges
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function (change) {
-                    // Close the dropdown when a menu item is selected.
-                    if (change.selectedItem) {
-                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
-                    }
-                    if (change.items) {
-                        // Update the popover style and position whenever the number of items changes.
-                        _this.sendMessage(exports.SkyDropdownMessageType.Reposition);
-                    }
-                });
-            }
-            // Reset dropdown whenever the menu items change.
-            this.menuItems.changes
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (items) {
-                _this.reset();
-                _this.menuChanges.emit({
-                    items: items.toArray(),
-                });
-            });
-            this.addEventListeners();
-        };
-        SkyDropdownMenuComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-            this.ngUnsubscribe = undefined;
-        };
-        SkyDropdownMenuComponent.prototype.focusFirstItem = function () {
-            if (!this.hasFocusableItems) {
-                return;
-            }
-            this.menuIndex = 0;
-            var firstItem = this.getItemByIndex(this.menuIndex);
-            if (firstItem && firstItem.isFocusable()) {
-                this.focusItem(firstItem);
-            }
-            else {
-                this.focusNextItem();
-            }
-        };
-        SkyDropdownMenuComponent.prototype.focusLastItem = function () {
-            if (!this.hasFocusableItems) {
-                return;
-            }
-            this.menuIndex = this.menuItems.length - 1;
-            var lastItem = this.getItemByIndex(this.menuIndex);
-            if (lastItem && lastItem.isFocusable()) {
-                this.focusItem(lastItem);
-            }
-            else {
-                this.focusPreviousItem();
-            }
-        };
-        SkyDropdownMenuComponent.prototype.focusPreviousItem = function () {
-            if (!this.hasFocusableItems) {
-                return;
-            }
-            this.menuIndex--;
-            var previousItem = this.getItemByIndex(this.menuIndex);
-            if (previousItem && previousItem.isFocusable()) {
-                this.focusItem(previousItem);
-            }
-            else {
-                this.focusPreviousItem();
-            }
-        };
-        SkyDropdownMenuComponent.prototype.focusNextItem = function () {
-            if (!this.hasFocusableItems) {
-                return;
-            }
-            this.menuIndex++;
-            var nextItem = this.getItemByIndex(this.menuIndex);
-            if (nextItem && nextItem.isFocusable()) {
-                this.focusItem(nextItem);
-            }
-            else {
-                this.focusNextItem();
-            }
-        };
-        SkyDropdownMenuComponent.prototype.reset = function () {
-            this._menuIndex = -1;
-            this.resetItemsActiveState();
-            this.changeDetector.markForCheck();
-        };
-        SkyDropdownMenuComponent.prototype.resetItemsActiveState = function () {
-            this.menuItems.forEach(function (item) {
-                item.resetState();
-            });
-        };
-        SkyDropdownMenuComponent.prototype.focusItem = function (item) {
-            this.resetItemsActiveState();
-            item.focusElement(this.useNativeFocus);
-            this.menuChanges.emit({
-                activeIndex: this.menuIndex,
-            });
-        };
-        SkyDropdownMenuComponent.prototype.getItemByIndex = function (index) {
-            return this.menuItems.find(function (item, i) {
-                return i === index;
-            });
-        };
-        SkyDropdownMenuComponent.prototype.selectItemByEventTarget = function (target) {
-            var _this = this;
-            var selectedItem = this.menuItems.find(function (item, i) {
-                var found = item.elementRef.nativeElement.contains(target);
-                if (found) {
-                    _this.menuIndex = i;
-                    _this.menuChanges.next({
-                        activeIndex: _this.menuIndex,
-                    });
-                }
-                return found;
-            });
-            /* istanbul ignore else */
-            if (selectedItem) {
-                this.menuChanges.next({
-                    selectedItem: selectedItem,
-                });
-            }
-        };
-        SkyDropdownMenuComponent.prototype.sendMessage = function (type) {
-            this.dropdownComponent.messageStream.next({ type: type });
-        };
-        SkyDropdownMenuComponent.prototype.addEventListeners = function () {
-            var _this = this;
-            var dropdownMenuElement = this.elementRef.nativeElement;
-            rxjs.fromEvent(dropdownMenuElement, 'click')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (event) {
-                _this.selectItemByEventTarget(event.target);
-            });
-            rxjs.fromEvent(dropdownMenuElement, 'keydown')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (event) {
-                var key = event.key.toLowerCase();
-                /*tslint:disable-next-line:switch-default*/
-                switch (key) {
-                    case 'escape':
-                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
-                        event.stopPropagation();
-                        event.preventDefault();
-                        break;
-                    case 'arrowdown':
-                    case 'down':
-                        _this.focusNextItem();
-                        event.preventDefault();
-                        break;
-                    case 'arrowup':
-                    case 'up':
-                        _this.focusPreviousItem();
-                        event.preventDefault();
-                        break;
-                    case 'tab':
-                        if (_this.dropdownComponent.dismissOnBlur) {
-                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                        }
-                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
-                        break;
-                }
-            });
-            rxjs.fromEvent(dropdownMenuElement, 'mouseenter')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.dropdownComponent.isMouseEnter = true;
-            });
-            rxjs.fromEvent(dropdownMenuElement, 'mouseleave')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.dropdownComponent.isMouseEnter = false;
-                // Allow the dropdown component to set isMouseEnter before checking if the close action
-                // should be taken.
-                setTimeout(function () {
-                    if (_this.dropdownComponent.trigger === 'hover' &&
-                        _this.dropdownComponent.isMouseEnter === false) {
-                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
-                    }
-                });
-            });
-        };
-        return SkyDropdownMenuComponent;
-    }());
-    SkyDropdownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDropdownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownMenuComponent, selector: "sky-dropdown-menu", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", useNativeFocus: "useNativeFocus" }, outputs: { menuChanges: "menuChanges" }, queries: [{ propertyName: "menuItems", predicate: SkyDropdownItemComponent, descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-dropdown-menu',
-                        template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content> </ng-content>\n</div>\n",
-                        styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyDropdownComponent, decorators: [{
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { ariaLabelledBy: [{
-                    type: i0.Input
-                }], ariaRole: [{
-                    type: i0.Input
-                }], useNativeFocus: [{
-                    type: i0.Input
-                }], menuChanges: [{
-                    type: i0.Output
-                }], menuItems: [{
-                    type: i0.ContentChildren,
-                    args: [SkyDropdownItemComponent, { descendants: true }]
-                }] } });
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
 
-    var SkyDropdownModule = /** @class */ (function () {
-        function SkyDropdownModule() {
-        }
-        return SkyDropdownModule;
-    }());
-    SkyDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
-            SkyDropdownComponent,
-            SkyDropdownItemComponent,
-            SkyDropdownMenuComponent], imports: [i4.CommonModule,
-            i1.SkyAffixModule,
-            i3.SkyIconModule,
-            i1.SkyOverlayModule,
-            SkyPopoversResourcesModule,
-            i2.SkyThemeModule], exports: [SkyDropdownButtonComponent,
-            SkyDropdownComponent,
-            SkyDropdownItemComponent,
-            SkyDropdownMenuComponent] });
-    SkyDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, imports: [[
-                i4.CommonModule,
-                i1.SkyAffixModule,
-                i3.SkyIconModule,
-                i1.SkyOverlayModule,
-                SkyPopoversResourcesModule,
-                i2.SkyThemeModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyDropdownButtonComponent,
-                            SkyDropdownComponent,
-                            SkyDropdownItemComponent,
-                            SkyDropdownMenuComponent,
-                        ],
-                        imports: [
-                            i4.CommonModule,
-                            i1.SkyAffixModule,
-                            i3.SkyIconModule,
-                            i1.SkyOverlayModule,
-                            SkyPopoversResourcesModule,
-                            i2.SkyThemeModule,
-                        ],
-                        exports: [
-                            SkyDropdownButtonComponent,
-                            SkyDropdownComponent,
-                            SkyDropdownItemComponent,
-                            SkyDropdownMenuComponent,
-                        ],
-                    }]
-            }] });
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-    /**
-     * @internal
-     */
-    var SkyPopoverAdapterService = /** @class */ (function () {
-        function SkyPopoverAdapterService() {
-        }
-        SkyPopoverAdapterService.prototype.getArrowCoordinates = function (elements, placement, themeName) {
-            var callerRect = elements.caller.nativeElement.getBoundingClientRect();
-            var popoverRect = elements.popover.nativeElement.getBoundingClientRect();
-            var arrowRect = elements.popoverArrow.nativeElement.getBoundingClientRect();
-            var pixelTolerance = 20;
-            var top;
-            var left;
-            if (placement === 'above' || placement === 'below') {
-                left = callerRect.left + callerRect.width * 0.5;
-                // Make sure the arrow never detaches from the popover.
-                if (left - pixelTolerance < popoverRect.left) {
-                    left = popoverRect.left + pixelTolerance;
-                }
-                else if (left + pixelTolerance > popoverRect.right) {
-                    left = popoverRect.right - pixelTolerance;
-                }
-                if (placement === 'above') {
-                    if (themeName !== 'modern') {
-                        top = callerRect.top - arrowRect.height;
-                    }
-                    else {
-                        top = callerRect.top - arrowRect.height + 5;
-                    }
-                }
-                else {
-                    if (themeName !== 'modern') {
-                        top = callerRect.bottom;
-                    }
-                    else {
-                        top = callerRect.bottom + 4;
+    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, _);
                 }
-            }
-            else {
-                top = callerRect.top + callerRect.height * 0.5;
-                // Make sure the arrow never detaches from the popover.
-                if (top - pixelTolerance < popoverRect.top) {
-                    top = popoverRect.top + pixelTolerance;
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
                 }
-                else if (top + pixelTolerance > popoverRect.bottom) {
-                    top = popoverRect.bottom - pixelTolerance;
+                finally {
+                    f = t = 0;
                 }
-                if (placement === 'left') {
-                    if (themeName !== 'modern') {
-                        left = callerRect.left - arrowRect.width;
-                    }
-                    else {
-                        left = callerRect.left - arrowRect.width + 5;
-                    }
+            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 };
                 }
-                else {
-                    if (themeName !== 'modern') {
-                        left = callerRect.right;
-                    }
-                    else {
-                        left = callerRect.right + 4;
-                    }
+            };
+        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];
                 }
             }
-            return { top: top, left: left };
-        };
-        return SkyPopoverAdapterService;
-    }());
-    SkyPopoverAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyPopoverAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    /**
-     * @internal
-     */
-    var skyPopoverAnimation = animations.trigger('skyPopoverAnimation', [
-        animations.state('void', animations.style({
-            opacity: 0,
-        })),
-        animations.state('open', animations.style({
-            opacity: 1,
-        })),
-        animations.state('closed', animations.style({
-            opacity: 0,
-        })),
-        animations.transition('void => *', [animations.animate('250ms')]),
-        animations.transition('open => closed', [animations.animate('150ms')]),
-        animations.transition('closed => open', [animations.animate('150ms')]),
-    ]);
-
-    function parseAffixPlacement(placement) {
-        switch (placement) {
-            case 'above':
-                return 'above';
-            case 'below':
-                return 'below';
-            case 'right':
-                return 'right';
-            case 'left':
-                return 'left';
-            /* istanbul ignore next */
-            default:
-                throw "SkyAffixPlacement does not have a matching value for '" + placement + "'!";
+        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 parseAffixHorizontalAlignment(alignment) {
+    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;
+    }
+
+    function parseAffixHorizontalAlignment$1(alignment) {
         switch (alignment) {
             case 'center':
                 return 'center';
@@ -1121,813 +550,1380 @@
         }
     }
 
+    var _SkyDropdownComponent_positionTimeout;
     /**
-     * @dynamic
-     * @internal
-     */
-    var SkyPopoverContext = /** @class */ (function () {
-        function SkyPopoverContext(args) {
-            this.contentTemplateRef = args.contentTemplateRef;
-        }
-        return SkyPopoverContext;
-    }());
-
-    /**
-     * @internal
+     * Creates a dropdown menu that displays menu items that users may select.
      */
-    var SkyPopoverContentComponent = /** @class */ (function () {
-        function SkyPopoverContentComponent(changeDetector, elementRef, affixService, coreAdapterService, adapterService, context, themeSvc) {
+    var SkyDropdownComponent = /** @class */ (function () {
+        function SkyDropdownComponent(changeDetector, affixService, overlayService, themeSvc) {
             this.changeDetector = changeDetector;
-            this.elementRef = elementRef;
             this.affixService = affixService;
-            this.coreAdapterService = coreAdapterService;
-            this.adapterService = adapterService;
-            this.context = context;
-            this.themeSvc = themeSvc;
-            this.dismissOnBlur = true;
-            this.enableAnimations = true;
-            this.isOpen = false;
-            this.popoverType = 'info';
+            this.overlayService = overlayService;
+            this.themeSvc = themeSvc;
+            /**
+             * Provides an observable to send commands to the dropdown. The commands should respect
+             * the [[SkyDropdownMessage]] type.
+             */
+            this.messageStream = new rxjs.Subject();
+            this.isMouseEnter = false;
+            this.isVisible = false;
             this.ngUnsubscribe = new rxjs.Subject();
-            this._closed = new rxjs.Subject();
-            this._isMouseEnter = new rxjs.Subject();
-            this._opened = new rxjs.Subject();
+            this._isOpen = false;
+            _SkyDropdownComponent_positionTimeout.set(this, void 0);
         }
-        Object.defineProperty(SkyPopoverContentComponent.prototype, "animationState", {
+        Object.defineProperty(SkyDropdownComponent.prototype, "buttonStyle", {
             get: function () {
-                return this.isOpen ? 'open' : 'closed';
+                return this._buttonStyle || 'default';
+            },
+            /**
+             * Specifies a background color for the dropdown button. Available values are `default` and
+             * `primary`. These values set the background color from the
+             * [secondary and primary button classes](https://developer.blackbaud.com/skyux/components/button) respectively.
+             * @default "default"
+             */
+            set: function (value) {
+                this._buttonStyle = value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SkyPopoverContentComponent.prototype, "closed", {
+        Object.defineProperty(SkyDropdownComponent.prototype, "buttonType", {
             get: function () {
-                return this._closed.asObservable();
+                return this._buttonType || 'select';
+            },
+            /**
+             * Specifies the type of button to render as the dropdown's trigger element. To display a button
+             * with text and a caret, specify `select` and then enter the button text in a
+             * `sky-dropdown-button` element. To display a round button with an ellipsis, specify
+             * `context-menu`. And to display a button with a [Font Awesome icon](http://fontawesome.io/icons/), specify the icon's class name.
+             * For example, to display the `fa-filter` icon, specify `filter`.
+             * @default "select"
+             */
+            set: function (value) {
+                this._buttonType = value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SkyPopoverContentComponent.prototype, "opened", {
+        Object.defineProperty(SkyDropdownComponent.prototype, "disabled", {
             get: function () {
-                return this._opened.asObservable();
+                return this._disabled || false;
+            },
+            /**
+             * Indicates whether to disable the dropdown button.
+             * @default false
+             */
+            set: function (value) {
+                this._disabled = value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SkyPopoverContentComponent.prototype, "isMouseEnter", {
+        Object.defineProperty(SkyDropdownComponent.prototype, "dismissOnBlur", {
             get: function () {
-                return this._isMouseEnter.asObservable();
+                if (this._dismissOnBlur === undefined) {
+                    return true;
+                }
+                return this._dismissOnBlur;
+            },
+            /**
+             * Indicates whether to close the dropdown when users click away from the menu.
+             * @default true
+             */
+            set: function (value) {
+                this._dismissOnBlur = value;
             },
             enumerable: false,
             configurable: true
         });
-        SkyPopoverContentComponent.prototype.ngOnInit = function () {
+        Object.defineProperty(SkyDropdownComponent.prototype, "horizontalAlignment", {
+            get: function () {
+                return this._horizontalAlignment || 'left';
+            },
+            /**
+             * Specifies the horizontal alignment of the dropdown menu in relation to the dropdown button.
+             * @default "left"
+             */
+            set: function (value) {
+                this._horizontalAlignment = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyDropdownComponent.prototype, "trigger", {
+            get: function () {
+                return this._trigger || 'click';
+            },
+            /**
+             * Specifies how users interact with the dropdown button to expose the dropdown menu.
+             * We recommend the default `click` value because the `hover` value can pose
+             * [accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) issues
+             * for users on touch devices such as phones and tablets.
+             * @deprecated We recommend against using this property. If you choose to use the deprecated
+             * `hover` value anyway, we recommend that you not use it in combination with the `title`
+             * property. (This property will be removed in the next major version release.)
+             * @default "click"
+             */
+            set: function (value) {
+                this._trigger = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyDropdownComponent.prototype, "isOpen", {
+            get: function () {
+                return this._isOpen || false;
+            },
+            set: function (value) {
+                this._isOpen = value;
+                this.changeDetector.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyDropdownComponent.prototype, "menuContainerElementRef", {
+            get: function () {
+                return this._menuContainerElementRef;
+            },
+            set: function (value) {
+                if (value) {
+                    this._menuContainerElementRef = value;
+                    this.destroyAffixer();
+                    this.createAffixer(value);
+                    this.changeDetector.markForCheck();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyDropdownComponent.prototype.ngOnInit = function () {
             var _this = this;
             var _a;
-            /*istanbul ignore next*/
-            this.contentTarget.createEmbeddedView((_a = this.context) === null || _a === void 0 ? void 0 : _a.contentTemplateRef);
             this.addEventListeners();
-            /*istanbul ignore else*/
-            if (this.themeSvc) {
-                this.themeSvc.settingsChange
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function (themeSettings) {
-                    var _a, _b;
-                    /*istanbul ignore next*/
-                    _this.themeName = (_b = (_a = themeSettings.currentSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name;
-                });
-            }
+            this.messageStream
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (message) {
+                _this.handleIncomingMessages(message);
+            });
+            // Load proper icons on theme change.
+            (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                _this.changeDetector.markForCheck();
+            });
         };
-        SkyPopoverContentComponent.prototype.ngOnDestroy = function () {
+        SkyDropdownComponent.prototype.ngOnDestroy = function () {
+            this.destroyAffixer();
+            this.destroyOverlay();
+            clearTimeout(__classPrivateFieldGet(this, _SkyDropdownComponent_positionTimeout, "f"));
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
-            this._closed.complete();
-            this._isMouseEnter.complete();
-            this._opened.complete();
-            /* istanbul ignore else */
-            if (this.affixer) {
-                this.affixer.destroy();
-            }
-            this._closed =
-                this._isMouseEnter =
-                    this._opened =
-                        this.affixer =
-                            this.ngUnsubscribe =
-                                undefined;
         };
-        SkyPopoverContentComponent.prototype.onAnimationEvent = function (event) {
-            var _a, _b;
-            if (event.fromState === 'void') {
-                return;
-            }
-            if (event.phaseName === 'done') {
-                if (event.toState === 'open') {
-                    /*istanbul ignore next*/
-                    (_a = this._opened) === null || _a === void 0 ? void 0 : _a.next();
+        SkyDropdownComponent.prototype.addEventListeners = function () {
+            var _this = this;
+            var buttonElement = this.triggerButton.nativeElement;
+            rxjs.fromEvent(buttonElement, 'click')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                if (_this.isOpen) {
+                    _this.sendMessage(exports.SkyDropdownMessageType.Close);
                 }
                 else {
-                    /*istanbul ignore next*/
-                    (_b = this._closed) === null || _b === void 0 ? void 0 : _b.next();
+                    _this.sendMessage(exports.SkyDropdownMessageType.Open);
+                    // Wait for dropdown to open, then set focus on first item.
+                    setTimeout(function () {
+                        _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
+                    });
                 }
-            }
-        };
-        SkyPopoverContentComponent.prototype.open = function (caller, config) {
-            var _this = this;
-            this.caller = caller;
-            this.dismissOnBlur = config.dismissOnBlur;
-            this.enableAnimations = config.enableAnimations;
-            this.horizontalAlignment = config.horizontalAlignment;
-            this.placement = config.placement;
-            this.popoverTitle = config.popoverTitle;
-            if (config.popoverType) {
-                this.popoverType = config.popoverType;
-            }
-            this.changeDetector.markForCheck();
-            // Indicates if the popover should be displayed statically.
-            // Please note: This feature is internal-only and used by the visual tests to capture multiple
-            // states simultaneously without the overhead of event listeners.
-            /* istanbul ignore if */
-            if (config.isStatic) {
-                this.isOpen = true;
-                this.changeDetector.markForCheck();
+            });
+            rxjs.fromEvent(buttonElement, 'keydown')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                var key = event.key.toLowerCase();
+                /* tslint:disable-next-line:switch-default */
+                switch (key) {
+                    case 'escape':
+                        /*istanbul ignore else*/
+                        if (_this.isOpen) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                            _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
+                            event.stopPropagation();
+                        }
+                        break;
+                    case 'tab':
+                        if (_this.isOpen && _this.dismissOnBlur) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                        }
+                        break;
+                    case 'arrowup':
+                    case 'up':
+                        if (!_this.isOpen) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Open);
+                            _this.sendMessage(exports.SkyDropdownMessageType.FocusLastItem);
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                        break;
+                    case 'enter':
+                    case 'arrowdown':
+                    case 'down':
+                    case ' ': // Spacebar.
+                        /*istanbul ignore else*/
+                        if (!_this.isOpen) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Open);
+                            _this.sendMessage(exports.SkyDropdownMessageType.FocusFirstItem);
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                        break;
+                }
+            });
+            rxjs.fromEvent(buttonElement, 'mouseenter')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                _this.isMouseEnter = true;
+                if (_this.trigger === 'hover') {
+                    _this.sendMessage(exports.SkyDropdownMessageType.Open);
+                }
+            });
+            rxjs.fromEvent(buttonElement, 'mouseleave')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                _this.isMouseEnter = false;
+                if (_this.trigger === 'hover') {
+                    // Allow the dropdown menu to set isMouseEnter before checking if the close action
+                    // should be taken.
+                    setTimeout(function () {
+                        if (!_this.isMouseEnter) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                        }
+                    });
+                }
+            });
+        };
+        SkyDropdownComponent.prototype.createOverlay = function () {
+            var _this = this;
+            if (this.overlay) {
                 return;
             }
-            // Let the styles render before gauging the affix dimensions.
-            setTimeout(function () {
-                var _a;
-                /*istanbul ignore next*/
-                if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) ||
-                    !_this.ngUnsubscribe ||
-                    _this.ngUnsubscribe.isStopped) {
-                    return;
-                }
-                if (!_this.affixer) {
-                    _this.setupAffixer();
-                }
-                var affixOptions = {
-                    autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
-                    enableAutoFit: true,
-                    horizontalAlignment: parseAffixHorizontalAlignment(_this.horizontalAlignment),
-                    isSticky: true,
-                    placement: parseAffixPlacement(_this.placement),
-                };
-                // Ensure vertical alignment is set according to the popover's placement value.
-                if (affixOptions.placement === 'left' ||
-                    affixOptions.placement === 'right') {
-                    affixOptions.verticalAlignment = 'middle';
+            var overlay = this.overlayService.create({
+                enableScroll: true,
+                enablePointerEvents: true,
+            });
+            overlay.attachTemplate(this.menuContainerTemplateRef);
+            overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                if (_this.dismissOnBlur) {
+                    _this.sendMessage(exports.SkyDropdownMessageType.Close);
                 }
-                _this.affixer.affixTo(_this.caller.nativeElement, affixOptions);
-                _this.updateArrowOffset();
-                _this.isOpen = true;
-                _this.changeDetector.markForCheck();
             });
+            this.overlay = overlay;
         };
-        SkyPopoverContentComponent.prototype.close = function () {
-            this.isOpen = false;
-            this.changeDetector.markForCheck();
+        SkyDropdownComponent.prototype.destroyAffixer = function () {
+            /*istanbul ignore else*/
+            if (this.affixer) {
+                this.affixer.destroy();
+                this.affixer = undefined;
+            }
         };
-        SkyPopoverContentComponent.prototype.applyFocus = function () {
-            if (this.isOpen) {
-                this.coreAdapterService.getFocusableChildrenAndApplyFocus(this.popoverRef, '.sky-popover', true);
+        SkyDropdownComponent.prototype.destroyOverlay = function () {
+            /*istanbul ignore else*/
+            if (this.overlay) {
+                this.overlayService.close(this.overlay);
+                this.overlay = undefined;
             }
         };
-        SkyPopoverContentComponent.prototype.setupAffixer = function () {
+        SkyDropdownComponent.prototype.createAffixer = function (menuContainerElementRef) {
             var _this = this;
-            var affixer = this.affixService.createAffixer(this.popoverRef);
-            affixer.offsetChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                _this.updateArrowOffset();
-                _this.changeDetector.markForCheck();
-            });
-            affixer.overflowScroll.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                _this.updateArrowOffset();
-                _this.changeDetector.markForCheck();
-            });
+            var affixer = this.affixService.createAffixer(menuContainerElementRef);
             affixer.placementChange
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (change) {
-                _this.placement = change.placement;
+                _this.isVisible = change.placement !== null;
                 _this.changeDetector.markForCheck();
             });
             this.affixer = affixer;
         };
-        SkyPopoverContentComponent.prototype.updateArrowOffset = function () {
-            var _c = this.adapterService.getArrowCoordinates({
-                caller: this.caller,
-                popover: this.popoverRef,
-                popoverArrow: this.arrowRef,
-            }, this.placement, this.themeName), top = _c.top, left = _c.left;
-            this.arrowTop = top;
-            this.arrowLeft = left;
-        };
-        SkyPopoverContentComponent.prototype.isFocusLeavingElement = function (event) {
-            var focusableItems = this.coreAdapterService.getFocusableChildren(this.elementRef.nativeElement);
-            var isFirstItem = focusableItems[0] === event.target && event.shiftKey;
-            var isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
-                !event.shiftKey;
-            return focusableItems.length === 0 || isFirstItem || isLastItem;
-        };
-        SkyPopoverContentComponent.prototype.addEventListeners = function () {
-            var _this = this;
-            var hostElement = this.elementRef.nativeElement;
-            rxjs.fromEvent(hostElement, 'mouseenter')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () { return _this._isMouseEnter.next(true); });
-            rxjs.fromEvent(hostElement, 'mouseleave')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () { return _this._isMouseEnter.next(false); });
-            rxjs.fromEvent(hostElement, 'keydown')
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (event) {
-                var key = event.key.toLowerCase();
+        SkyDropdownComponent.prototype.handleIncomingMessages = function (message) {
+            if (!this.disabled) {
                 /* tslint:disable-next-line:switch-default */
-                switch (key) {
-                    case 'escape':
-                        _this.close();
-                        _this.caller.nativeElement.focus();
-                        event.preventDefault();
-                        event.stopPropagation();
+                switch (message.type) {
+                    case exports.SkyDropdownMessageType.Open:
+                        this.isOpen = true;
+                        this.positionDropdownMenu();
                         break;
-                    // Since the popover now lives in an overlay at the bottom of the document body, we need
-                    // to handle the tab key ourselves. Otherwise, focus would be moved to the browser's
-                    // search bar.
-                    case 'tab':
-                        if (!_this.dismissOnBlur) {
-                            return;
-                        }
-                        /*istanbul ignore else*/
-                        if (_this.isFocusLeavingElement(event)) {
-                            _this.close();
-                            _this.caller.nativeElement.focus();
-                            event.preventDefault();
-                            event.stopPropagation();
+                    case exports.SkyDropdownMessageType.Close:
+                        this.isOpen = false;
+                        this.destroyOverlay();
+                        break;
+                    case exports.SkyDropdownMessageType.Reposition:
+                        // Only reposition the dropdown if it is already open.
+                        /* istanbul ignore else */
+                        if (this.isOpen && this.affixer) {
+                            this.affixer.reaffix();
                         }
                         break;
+                    case exports.SkyDropdownMessageType.FocusTriggerButton:
+                        this.triggerButton.nativeElement.focus();
+                        break;
                 }
-            });
+            }
         };
-        return SkyPopoverContentComponent;
+        SkyDropdownComponent.prototype.sendMessage = function (type) {
+            this.messageStream.next({ type: type });
+        };
+        SkyDropdownComponent.prototype.positionDropdownMenu = function () {
+            var _this = this;
+            this.isVisible = false;
+            this.createOverlay();
+            this.changeDetector.markForCheck();
+            // Explicitly declare the `setTimeout` from the `window` object in order to use the DOM typings
+            // during a unit test (instead of confusing this with Node's `setTimeout`).
+            __classPrivateFieldSet(this, _SkyDropdownComponent_positionTimeout, window.setTimeout(function () {
+                _this.affixer.affixTo(_this.triggerButton.nativeElement, {
+                    autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
+                    enableAutoFit: true,
+                    horizontalAlignment: parseAffixHorizontalAlignment$1(_this.horizontalAlignment),
+                    isSticky: true,
+                    placement: 'below',
+                });
+                _this.isVisible = true;
+                _this.changeDetector.markForCheck();
+            }), "f");
+        };
+        return SkyDropdownComponent;
     }());
-    SkyPopoverContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverContentComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyCoreAdapterService }, { token: SkyPopoverAdapterService }, { token: SkyPopoverContext, optional: true }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyPopoverContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [SkyPopoverAdapterService], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header\n      *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1\n        *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n", styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media (max-width: 276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverContentComponent, decorators: [{
+    _SkyDropdownComponent_positionTimeout = new WeakMap();
+    SkyDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownComponent, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", dismissOnBlur: "dismissOnBlur", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: i0.ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-dropdown\">\n  <button\n    class=\"sky-btn sky-dropdown-button\"\n    type=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? menuId : null\"\n    [attr.aria-haspopup]=\"menuAriaRole\"\n    [attr.aria-label]=\"\n      label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n    \"\n    [attr.title]=\"title\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    #triggerButton\n  >\n    <ng-container [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"> </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n        >\n          <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"], components: [{ type: i3__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'sky-popover-content',
-                        template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header\n      *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1\n        *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n",
-                        styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media (max-width: 276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"],
-                        animations: [skyPopoverAnimation],
-                        providers: [SkyPopoverAdapterService],
+                        selector: 'sky-dropdown',
+                        template: "<div class=\"sky-dropdown\">\n  <button\n    class=\"sky-btn sky-dropdown-button\"\n    type=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? menuId : null\"\n    [attr.aria-haspopup]=\"menuAriaRole\"\n    [attr.aria-label]=\"\n      label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n    \"\n    [attr.title]=\"title\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    #triggerButton\n  >\n    <ng-container [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"> </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n        >\n          <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</ng-template>\n",
+                        styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#0974a1;color:#fff;max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#eeeeef;color:#212327;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:#686c73;cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:#0974a1;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu-container{position:fixed}.hidden{visibility:hidden}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus){background-color:transparent;border-bottom:solid 1px #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:solid 3px #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:solid 3px #1870B8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext, decorators: [{
-                            type: i0.Optional
-                        }] }, { type: i2__namespace.SkyThemeService, decorators: [{
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace.SkyThemeService, decorators: [{
                             type: i0.Optional
                         }] }];
-        }, propDecorators: { arrowRef: [{
+        }, propDecorators: { buttonStyle: [{
+                    type: i0.Input
+                }], buttonType: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], dismissOnBlur: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], horizontalAlignment: [{
+                    type: i0.Input
+                }], messageStream: [{
+                    type: i0.Input
+                }], title: [{
+                    type: i0.Input
+                }], trigger: [{
+                    type: i0.Input
+                }], menuContainerElementRef: [{
                     type: i0.ViewChild,
-                    args: ['arrowRef', {
+                    args: ['menuContainerElementRef', {
                             read: i0.ElementRef,
-                            static: true,
                         }]
-                }], popoverRef: [{
+                }], menuContainerTemplateRef: [{
                     type: i0.ViewChild,
-                    args: ['popoverRef', {
-                            read: i0.ElementRef,
+                    args: ['menuContainerTemplateRef', {
+                            read: i0.TemplateRef,
                             static: true,
                         }]
-                }], contentTarget: [{
+                }], triggerButton: [{
                     type: i0.ViewChild,
-                    args: ['contentTarget', {
-                            read: i0.ViewContainerRef,
+                    args: ['triggerButton', {
+                            read: i0.ElementRef,
                             static: true,
                         }]
                 }] } });
 
-    var SkyPopoverComponent = /** @class */ (function () {
-        function SkyPopoverComponent(overlayService) {
-            this.overlayService = overlayService;
-            /**
-             * Fires when users close the popover.
-             */
-            this.popoverClosed = new i0.EventEmitter();
-            /**
-             * Fires when users open the popover.
-             */
-            this.popoverOpened = new i0.EventEmitter();
-            /**
-             * Indicates that the popover is in the process of being opened or closed.
-             * @internal
-             */
-            this.isActive = false;
+    var nextId = 0;
+    /**
+     * Creates a menu that contains dropdown menu items.
+     *
+     */
+    var SkyDropdownMenuComponent = /** @class */ (function () {
+        function SkyDropdownMenuComponent(changeDetector, elementRef, dropdownComponent) {
+            this.changeDetector = changeDetector;
+            this.elementRef = elementRef;
+            this.dropdownComponent = dropdownComponent;
             /**
-             * Used by unit tests to disable animations since the component is injected at the bottom of the
-             * document body.
-             * @internal
+             * Fires when the dropdown menu's active index or selected item changes. This event provides an
+             * observable to emit changes, and the response is of
+             * the SkyDropdownMenuChange type.
              */
-            this.enableAnimations = true;
-            this.isMouseEnter = false;
-            this.isMarkedForCloseOnMouseLeave = false;
+            this.menuChanges = new i0.EventEmitter();
+            this.dropdownMenuId = "sky-dropdown-menu-" + ++nextId;
             this.ngUnsubscribe = new rxjs.Subject();
+            this._menuIndex = 0;
         }
-        Object.defineProperty(SkyPopoverComponent.prototype, "alignment", {
+        Object.defineProperty(SkyDropdownMenuComponent.prototype, "ariaRole", {
             get: function () {
-                return this._alignment || 'center';
+                return this._ariaRole || 'menu';
             },
             /**
-             * Specifies the horizontal alignment of the popover in relation to the trigger element.
-             * The `skyPopoverAlignment` property on the popover directive takes precedence over this property when specified.
-             * @default "center"
+             * Specifies an ARIA role for the dropdown menu
+             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+             * by indicating how the dropdown menu functions and what it controls. The dropdown button
+             * inherits this value to set its `aria-haspopup` property. For information
+             * about how an ARIA role indicates what an item represents on a web page, see the
+             * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
+             * @default "menu"
              */
             set: function (value) {
-                this._alignment = value;
+                this._ariaRole = value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SkyPopoverComponent.prototype, "dismissOnBlur", {
+        Object.defineProperty(SkyDropdownMenuComponent.prototype, "useNativeFocus", {
             get: function () {
-                if (this._dismissOnBlur === undefined) {
+                if (this._useNativeFocus === undefined) {
                     return true;
                 }
-                return this._dismissOnBlur;
+                return this._useNativeFocus;
             },
             /**
-             * Indicates whether to close the popover when it loses focus.
-             * To require users to click a trigger button to close the popover, set this input to false.
+             * Indicates whether to use the browser's native focus function when users navigate through menu
+             * items with the keyboard. To disable the native focus function, set this property to `false`.
+             * For example, to let users interact with the dropdown menu but keep the keyboard focus on a
+             * different element, set this property to `false`.
              * @default true
              */
             set: function (value) {
-                this._dismissOnBlur = value;
+                this._useNativeFocus = value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SkyPopoverComponent.prototype, "placement", {
+        Object.defineProperty(SkyDropdownMenuComponent.prototype, "hasFocusableItems", {
             get: function () {
-                return this._placement || 'above';
+                var found = this.menuItems.find(function (item) { return item.isFocusable(); });
+                return found !== undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyDropdownMenuComponent.prototype, "menuIndex", {
+            get: function () {
+                return this._menuIndex;
             },
-            /**
-             * Specifies the placement of the popover in relation to the trigger element.
-             * The `skyPopoverPlacement` property on the popover directive takes precedence over this property when specified.
-             * @default "above"
-             */
             set: function (value) {
-                this._placement = value;
+                if (value < 0) {
+                    value = this.menuItems.length - 1;
+                }
+                if (value >= this.menuItems.length) {
+                    value = 0;
+                }
+                this._menuIndex = value;
             },
             enumerable: false,
             configurable: true
         });
-        SkyPopoverComponent.prototype.ngOnDestroy = function () {
+        SkyDropdownMenuComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (this.dropdownComponent) {
+                this.dropdownComponent.menuId = this.dropdownMenuId;
+                this.dropdownComponent.menuAriaRole = this.ariaRole;
+                this.dropdownComponent.messageStream
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (message) {
+                    /* tslint:disable-next-line:switch-default */
+                    switch (message.type) {
+                        case exports.SkyDropdownMessageType.Open:
+                        case exports.SkyDropdownMessageType.Close:
+                            _this.reset();
+                            break;
+                        case exports.SkyDropdownMessageType.FocusFirstItem:
+                            _this.focusFirstItem();
+                            break;
+                        case exports.SkyDropdownMessageType.FocusNextItem:
+                            _this.focusNextItem();
+                            break;
+                        case exports.SkyDropdownMessageType.FocusPreviousItem:
+                            _this.focusPreviousItem();
+                            break;
+                        case exports.SkyDropdownMessageType.FocusLastItem:
+                            _this.focusLastItem();
+                            break;
+                    }
+                });
+                this.menuChanges
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (change) {
+                    // Close the dropdown when a menu item is selected.
+                    if (change.selectedItem) {
+                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
+                    }
+                    if (change.items) {
+                        // Update the popover style and position whenever the number of items changes.
+                        _this.sendMessage(exports.SkyDropdownMessageType.Reposition);
+                    }
+                });
+            }
+            // Reset dropdown whenever the menu items change.
+            this.menuItems.changes
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (items) {
+                _this.reset();
+                _this.menuChanges.emit({
+                    items: items.toArray(),
+                });
+            });
+            this.addEventListeners();
+        };
+        SkyDropdownMenuComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
-            this.ngUnsubscribe = undefined;
-            if (this.overlay) {
-                this.overlayService.close(this.overlay);
-                this.overlay = undefined;
+        };
+        SkyDropdownMenuComponent.prototype.focusFirstItem = function () {
+            if (!this.hasFocusableItems) {
+                return;
+            }
+            this.menuIndex = 0;
+            var firstItem = this.getItemByIndex(this.menuIndex);
+            if (firstItem && firstItem.isFocusable()) {
+                this.focusItem(firstItem);
+            }
+            else {
+                this.focusNextItem();
             }
         };
-        /**
-         * Positions the popover next to a given caller element.
-         * @param caller The element that opened the popover.
-         * @param placement The placement of the popover.
-         * @param alignment The horizontal alignment of the popover.
-         * @internal
-         */
-        SkyPopoverComponent.prototype.positionNextTo = function (caller, placement, alignment) {
-            if (!this.overlay) {
-                this.setupOverlay();
+        SkyDropdownMenuComponent.prototype.focusLastItem = function () {
+            if (!this.hasFocusableItems) {
+                return;
             }
-            this.placement = placement !== null && placement !== void 0 ? placement : this.placement;
-            this.alignment = alignment !== null && alignment !== void 0 ? alignment : this.alignment;
-            this.isActive = true;
-            this.contentRef.open(caller, {
-                dismissOnBlur: this.dismissOnBlur,
-                enableAnimations: this.enableAnimations,
-                horizontalAlignment: this.alignment,
-                isStatic: false,
-                placement: this.placement,
-                popoverTitle: this.popoverTitle,
-                popoverType: this.popoverType,
+            this.menuIndex = this.menuItems.length - 1;
+            var lastItem = this.getItemByIndex(this.menuIndex);
+            if (lastItem && lastItem.isFocusable()) {
+                this.focusItem(lastItem);
+            }
+            else {
+                this.focusPreviousItem();
+            }
+        };
+        SkyDropdownMenuComponent.prototype.focusPreviousItem = function () {
+            if (!this.hasFocusableItems) {
+                return;
+            }
+            this.menuIndex--;
+            var previousItem = this.getItemByIndex(this.menuIndex);
+            if (previousItem && previousItem.isFocusable()) {
+                this.focusItem(previousItem);
+            }
+            else {
+                this.focusPreviousItem();
+            }
+        };
+        SkyDropdownMenuComponent.prototype.focusNextItem = function () {
+            if (!this.hasFocusableItems) {
+                return;
+            }
+            this.menuIndex++;
+            var nextItem = this.getItemByIndex(this.menuIndex);
+            if (nextItem && nextItem.isFocusable()) {
+                this.focusItem(nextItem);
+            }
+            else {
+                this.focusNextItem();
+            }
+        };
+        SkyDropdownMenuComponent.prototype.reset = function () {
+            this._menuIndex = -1;
+            this.resetItemsActiveState();
+            this.changeDetector.markForCheck();
+        };
+        SkyDropdownMenuComponent.prototype.resetItemsActiveState = function () {
+            this.menuItems.forEach(function (item) {
+                item.resetState();
             });
         };
-        /**
-         * Closes the popover.
-         * @internal
-         */
-        SkyPopoverComponent.prototype.close = function () {
-            var _a;
-            /*istanbul ignore next*/
-            (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
+        SkyDropdownMenuComponent.prototype.focusItem = function (item) {
+            this.resetItemsActiveState();
+            item.focusElement(this.useNativeFocus);
+            this.menuChanges.emit({
+                activeIndex: this.menuIndex,
+            });
         };
-        /**
-         * Brings focus to the popover element if its open.
-         * @internal
-         */
-        SkyPopoverComponent.prototype.applyFocus = function () {
-            var _a;
-            /*istanbul ignore next*/
-            (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
+        SkyDropdownMenuComponent.prototype.getItemByIndex = function (index) {
+            return this.menuItems.find(function (_, i) { return i === index; });
         };
-        /**
-         * Adds a flag to the popover to close when the mouse leaves the popover's bounds.
-         * @internal
-         */
-        SkyPopoverComponent.prototype.markForCloseOnMouseLeave = function () {
-            this.isMarkedForCloseOnMouseLeave = true;
+        SkyDropdownMenuComponent.prototype.selectItemByEventTarget = function (target) {
+            var _this = this;
+            var selectedItem = this.menuItems.find(function (item, i) {
+                var found = item.elementRef.nativeElement.contains(target);
+                if (found) {
+                    _this.menuIndex = i;
+                    _this.menuChanges.next({
+                        activeIndex: _this.menuIndex,
+                    });
+                }
+                return found;
+            });
+            /* istanbul ignore else */
+            if (selectedItem) {
+                this.menuChanges.next({
+                    selectedItem: selectedItem,
+                });
+            }
         };
-        SkyPopoverComponent.prototype.setupOverlay = function () {
+        SkyDropdownMenuComponent.prototype.sendMessage = function (type) {
+            this.dropdownComponent.messageStream.next({ type: type });
+        };
+        SkyDropdownMenuComponent.prototype.addEventListeners = function () {
             var _this = this;
-            var overlay = this.overlayService.create({
-                enableScroll: true,
-                enablePointerEvents: true,
+            var dropdownMenuElement = this.elementRef.nativeElement;
+            rxjs.fromEvent(dropdownMenuElement, 'click')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                _this.selectItemByEventTarget(event.target);
             });
-            overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                if (_this.dismissOnBlur) {
-                    _this.close();
+            rxjs.fromEvent(dropdownMenuElement, 'keydown')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                var key = event.key.toLowerCase();
+                /*tslint:disable-next-line:switch-default*/
+                switch (key) {
+                    case 'escape':
+                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
+                        event.stopPropagation();
+                        event.preventDefault();
+                        break;
+                    case 'arrowdown':
+                    case 'down':
+                        _this.focusNextItem();
+                        event.preventDefault();
+                        break;
+                    case 'arrowup':
+                    case 'up':
+                        _this.focusPreviousItem();
+                        event.preventDefault();
+                        break;
+                    case 'tab':
+                        if (_this.dropdownComponent.dismissOnBlur) {
+                            _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                        }
+                        _this.sendMessage(exports.SkyDropdownMessageType.FocusTriggerButton);
+                        break;
                 }
             });
-            var contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
-                {
-                    provide: SkyPopoverContext,
-                    useValue: new SkyPopoverContext({
-                        contentTemplateRef: this.templateRef,
-                    }),
-                },
-            ]);
-            contentRef.opened.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                _this.popoverOpened.emit(_this);
-            });
-            contentRef.closed.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                /*istanbul ignore else*/
-                if (_this.isActive) {
-                    _this.overlayService.close(_this.overlay);
-                    _this.overlay = undefined;
-                    _this.isActive = false;
-                    _this.popoverClosed.emit(_this);
-                }
+            rxjs.fromEvent(dropdownMenuElement, 'mouseenter')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () {
+                _this.dropdownComponent.isMouseEnter = true;
             });
-            contentRef.isMouseEnter
+            rxjs.fromEvent(dropdownMenuElement, 'mouseleave')
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (isMouseEnter) {
-                _this.isMouseEnter = isMouseEnter;
-                if (_this.isMarkedForCloseOnMouseLeave) {
-                    _this.isMarkedForCloseOnMouseLeave = false;
-                    _this.close();
-                }
+                .subscribe(function () {
+                _this.dropdownComponent.isMouseEnter = false;
+                // Allow the dropdown component to set isMouseEnter before checking if the close action
+                // should be taken.
+                setTimeout(function () {
+                    if (_this.dropdownComponent.trigger === 'hover' &&
+                        _this.dropdownComponent.isMouseEnter === false) {
+                        _this.sendMessage(exports.SkyDropdownMessageType.Close);
+                    }
+                });
             });
-            this.overlay = overlay;
-            this.contentRef = contentRef;
         };
-        return SkyPopoverComponent;
+        return SkyDropdownMenuComponent;
     }());
-    SkyPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, deps: [{ token: i1__namespace.SkyOverlayService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverComponent, selector: "sky-popover", inputs: { alignment: "alignment", dismissOnBlur: "dismissOnBlur", placement: "placement", popoverTitle: "popoverTitle", popoverType: "popoverType" }, outputs: { popoverClosed: "popoverClosed", popoverOpened: "popoverOpened" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, decorators: [{
+    SkyDropdownMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDropdownMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownMenuComponent, selector: "sky-dropdown-menu", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", useNativeFocus: "useNativeFocus" }, outputs: { menuChanges: "menuChanges" }, queries: [{ propertyName: "menuItems", predicate: SkyDropdownItemComponent, descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'sky-popover',
-                        template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n",
+                        selector: 'sky-dropdown-menu',
+                        template: "<div\n  class=\"sky-dropdown-menu sky-shadow sky-elevation-4\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [id]=\"dropdownMenuId\"\n>\n  <ng-content> </ng-content>\n</div>\n",
+                        styles: [".sky-dropdown-menu{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px);display:flex;flex-direction:column;background-color:#fff}.sky-dropdown-menu button{overflow:hidden;text-overflow:ellipsis}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-menu{background-color:#252a2e;color:#fff}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.SkyOverlayService }]; }, propDecorators: { alignment: [{
-                    type: i0.Input
-                }], dismissOnBlur: [{
-                    type: i0.Input
-                }], placement: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyDropdownComponent, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { ariaLabelledBy: [{
                     type: i0.Input
-                }], popoverTitle: [{
+                }], ariaRole: [{
                     type: i0.Input
-                }], popoverType: [{
+                }], useNativeFocus: [{
                     type: i0.Input
-                }], popoverClosed: [{
-                    type: i0.Output
-                }], popoverOpened: [{
+                }], menuChanges: [{
                     type: i0.Output
-                }], templateRef: [{
-                    type: i0.ViewChild,
-                    args: ['templateRef', {
-                            read: i0.TemplateRef,
-                            static: true,
-                        }]
+                }], menuItems: [{
+                    type: i0.ContentChildren,
+                    args: [SkyDropdownItemComponent, { descendants: true }]
                 }] } });
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
+    var SkyDropdownModule = /** @class */ (function () {
+        function SkyDropdownModule() {
+        }
+        return SkyDropdownModule;
+    }());
+    SkyDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
+            SkyDropdownComponent,
+            SkyDropdownItemComponent,
+            SkyDropdownMenuComponent], imports: [i4.CommonModule,
+            i1.SkyAffixModule,
+            i3.SkyIconModule,
+            i1.SkyOverlayModule,
+            SkyPopoversResourcesModule,
+            i2.SkyThemeModule], exports: [SkyDropdownButtonComponent,
+            SkyDropdownComponent,
+            SkyDropdownItemComponent,
+            SkyDropdownMenuComponent] });
+    SkyDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, imports: [[
+                i4.CommonModule,
+                i1.SkyAffixModule,
+                i3.SkyIconModule,
+                i1.SkyOverlayModule,
+                SkyPopoversResourcesModule,
+                i2.SkyThemeModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyDropdownModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            SkyDropdownButtonComponent,
+                            SkyDropdownComponent,
+                            SkyDropdownItemComponent,
+                            SkyDropdownMenuComponent,
+                        ],
+                        imports: [
+                            i4.CommonModule,
+                            i1.SkyAffixModule,
+                            i3.SkyIconModule,
+                            i1.SkyOverlayModule,
+                            SkyPopoversResourcesModule,
+                            i2.SkyThemeModule,
+                        ],
+                        exports: [
+                            SkyDropdownButtonComponent,
+                            SkyDropdownComponent,
+                            SkyDropdownItemComponent,
+                            SkyDropdownMenuComponent,
+                        ],
+                    }]
+            }] });
+
+    /**
+     * @internal
+     */
+    var SkyPopoverAdapterService = /** @class */ (function () {
+        function SkyPopoverAdapterService() {
+        }
+        SkyPopoverAdapterService.prototype.getArrowCoordinates = function (elements, placement, themeName) {
+            var callerRect = elements.caller.nativeElement.getBoundingClientRect();
+            var popoverRect = elements.popover.nativeElement.getBoundingClientRect();
+            var arrowRect = elements.popoverArrow.nativeElement.getBoundingClientRect();
+            var pixelTolerance = 20;
+            var top;
+            var left;
+            if (placement === 'above' || placement === 'below') {
+                left = callerRect.left + callerRect.width * 0.5;
+                // Make sure the arrow never detaches from the popover.
+                if (left - pixelTolerance < popoverRect.left) {
+                    left = popoverRect.left + pixelTolerance;
+                }
+                else if (left + pixelTolerance > popoverRect.right) {
+                    left = popoverRect.right - pixelTolerance;
+                }
+                if (placement === 'above') {
+                    if (themeName !== 'modern') {
+                        top = callerRect.top - arrowRect.height;
+                    }
+                    else {
+                        top = callerRect.top - arrowRect.height + 5;
+                    }
+                }
+                else {
+                    if (themeName !== 'modern') {
+                        top = callerRect.bottom;
+                    }
+                    else {
+                        top = callerRect.bottom + 4;
+                    }
+                }
+            }
+            else {
+                top = callerRect.top + callerRect.height * 0.5;
+                // Make sure the arrow never detaches from the popover.
+                if (top - pixelTolerance < popoverRect.top) {
+                    top = popoverRect.top + pixelTolerance;
+                }
+                else if (top + pixelTolerance > popoverRect.bottom) {
+                    top = popoverRect.bottom - pixelTolerance;
+                }
+                if (placement === 'left') {
+                    if (themeName !== 'modern') {
+                        left = callerRect.left - arrowRect.width;
+                    }
+                    else {
+                        left = callerRect.left - arrowRect.width + 5;
+                    }
+                }
+                else {
+                    if (themeName !== 'modern') {
+                        left = callerRect.right;
+                    }
+                    else {
+                        left = callerRect.right + 4;
+                    }
+                }
+            }
+            return { top: top, left: left };
+        };
+        return SkyPopoverAdapterService;
+    }());
+    SkyPopoverAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyPopoverAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverAdapterService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    /**
+     * @internal
+     */
+    var skyPopoverAnimation = animations.trigger('skyPopoverAnimation', [
+        animations.state('void', animations.style({
+            opacity: 0,
+        })),
+        animations.state('open', animations.style({
+            opacity: 1,
+        })),
+        animations.state('closed', animations.style({
+            opacity: 0,
+        })),
+        animations.transition('void => *', [animations.animate('250ms')]),
+        animations.transition('open => closed', [animations.animate('150ms')]),
+        animations.transition('closed => open', [animations.animate('150ms')]),
+    ]);
+
+    function parseAffixPlacement(placement) {
+        switch (placement) {
+            case 'above':
+                return 'above';
+            case 'below':
+                return 'below';
+            case 'right':
+                return 'right';
+            case 'left':
+                return 'left';
+            /* istanbul ignore next */
+            default:
+                throw "SkyAffixPlacement does not have a matching value for '" + placement + "'!";
+        }
+    }
+    function parseAffixHorizontalAlignment(alignment) {
+        switch (alignment) {
+            case 'center':
+                return 'center';
+            case 'left':
+                return 'left';
+            case 'right':
+                return 'right';
+            /* istanbul ignore next */
+            default:
+                throw "SkyAffixHorizontalAlignment does not have a matching value for '" + alignment + "'!";
+        }
+    }
 
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
+    /**
+     * @dynamic
+     * @internal
+     */
+    var SkyPopoverContext = /** @class */ (function () {
+        function SkyPopoverContext(args) {
+            this.contentTemplateRef = args.contentTemplateRef;
+        }
+        return SkyPopoverContext;
+    }());
 
-    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];
+    /**
+     * @internal
+     */
+    var SkyPopoverContentComponent = /** @class */ (function () {
+        function SkyPopoverContentComponent(changeDetector, elementRef, affixService, coreAdapterService, adapterService, context, themeSvc) {
+            this.changeDetector = changeDetector;
+            this.elementRef = elementRef;
+            this.affixService = affixService;
+            this.coreAdapterService = coreAdapterService;
+            this.adapterService = adapterService;
+            this.context = context;
+            this.themeSvc = themeSvc;
+            this.dismissOnBlur = true;
+            this.enableAnimations = true;
+            this.isOpen = false;
+            this.placement = null;
+            this.ngUnsubscribe = new rxjs.Subject();
+            this._closed = new rxjs.Subject();
+            this._isMouseEnter = new rxjs.Subject();
+            this._opened = new rxjs.Subject();
+        }
+        Object.defineProperty(SkyPopoverContentComponent.prototype, "animationState", {
+            get: function () {
+                return this.isOpen ? 'open' : 'closed';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverContentComponent.prototype, "closed", {
+            get: function () {
+                return this._closed.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverContentComponent.prototype, "opened", {
+            get: function () {
+                return this._opened.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverContentComponent.prototype, "isMouseEnter", {
+            get: function () {
+                return this._isMouseEnter.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyPopoverContentComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.contentTarget.createEmbeddedView(this.context.contentTemplateRef);
+            this.addEventListeners();
+            /*istanbul ignore else*/
+            if (this.themeSvc) {
+                this.themeSvc.settingsChange
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (themeSettings) {
+                    var _a, _b;
+                    /*istanbul ignore next*/
+                    _this.themeName = (_b = (_a = themeSettings.currentSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name;
+                });
             }
-            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]];
+        SkyPopoverContentComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+            this._closed.complete();
+            this._isMouseEnter.complete();
+            this._opened.complete();
+            /* istanbul ignore else */
+            if (this.affixer) {
+                this.affixer.destroy();
+                this.affixer = undefined;
             }
-        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));
+        };
+        SkyPopoverContentComponent.prototype.onAnimationEvent = function (event) {
+            if (event.fromState === 'void') {
+                return;
             }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
+            if (event.phaseName === 'done') {
+                if (event.toState === 'open') {
+                    this._opened.next();
+                }
+                else {
+                    this._closed.next();
+                }
             }
-            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, _);
+        };
+        SkyPopoverContentComponent.prototype.open = function (caller, config) {
+            var _this = this;
+            this.caller = caller;
+            this.dismissOnBlur = config.dismissOnBlur;
+            this.enableAnimations = config.enableAnimations;
+            this.horizontalAlignment = config.horizontalAlignment;
+            this.placement = config.placement;
+            this.popoverTitle = config.popoverTitle;
+            this.popoverType = config.popoverType;
+            this.changeDetector.markForCheck();
+            // Indicates if the popover should be displayed statically.
+            // Please note: This feature is internal-only and used by the visual tests to capture multiple
+            // states simultaneously without the overhead of event listeners.
+            /* istanbul ignore if */
+            if (config.isStatic) {
+                this.isOpen = true;
+                this.changeDetector.markForCheck();
+                return;
+            }
+            // Let the styles render before gauging the affix dimensions.
+            setTimeout(function () {
+                if (!_this.popoverRef.nativeElement || _this.ngUnsubscribe.isStopped) {
+                    return;
                 }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
+                if (!_this.affixer) {
+                    _this.setupAffixer();
                 }
-                finally {
-                    f = t = 0;
+                var affixOptions = {
+                    autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
+                    enableAutoFit: true,
+                    horizontalAlignment: parseAffixHorizontalAlignment(_this.horizontalAlignment),
+                    isSticky: true,
+                    placement: parseAffixPlacement(_this.placement),
+                };
+                // Ensure vertical alignment is set according to the popover's placement value.
+                if (affixOptions.placement === 'left' ||
+                    affixOptions.placement === 'right') {
+                    affixOptions.verticalAlignment = 'middle';
                 }
-            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 };
+                _this.affixer.affixTo(_this.caller.nativeElement, affixOptions);
+                _this.updateArrowOffset();
+                _this.isOpen = true;
+                _this.changeDetector.markForCheck();
+            });
+        };
+        SkyPopoverContentComponent.prototype.close = function () {
+            this.isOpen = false;
+            this.changeDetector.markForCheck();
+        };
+        SkyPopoverContentComponent.prototype.applyFocus = function () {
+            if (this.isOpen) {
+                this.coreAdapterService.getFocusableChildrenAndApplyFocus(this.popoverRef, '.sky-popover', true);
+            }
+        };
+        SkyPopoverContentComponent.prototype.setupAffixer = function () {
+            var _this = this;
+            var affixer = this.affixService.createAffixer(this.popoverRef);
+            affixer.offsetChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                _this.updateArrowOffset();
+                _this.changeDetector.markForCheck();
+            });
+            affixer.overflowScroll.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                _this.updateArrowOffset();
+                _this.changeDetector.markForCheck();
+            });
+            affixer.placementChange
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (change) {
+                _this.placement = change.placement;
+                _this.changeDetector.markForCheck();
+            });
+            this.affixer = affixer;
+        };
+        SkyPopoverContentComponent.prototype.updateArrowOffset = function () {
+            if (this.placement) {
+                var _c = this.adapterService.getArrowCoordinates({
+                    caller: this.caller,
+                    popover: this.popoverRef,
+                    popoverArrow: this.arrowRef,
+                }, this.placement, this.themeName), top = _c.top, left = _c.left;
+                this.arrowTop = top;
+                this.arrowLeft = left;
+            }
+        };
+        SkyPopoverContentComponent.prototype.isFocusLeavingElement = function (event) {
+            var focusableItems = this.coreAdapterService.getFocusableChildren(this.elementRef.nativeElement);
+            var isFirstItem = focusableItems[0] === event.target && event.shiftKey;
+            var isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
+                !event.shiftKey;
+            return focusableItems.length === 0 || isFirstItem || isLastItem;
+        };
+        SkyPopoverContentComponent.prototype.addEventListeners = function () {
+            var _this = this;
+            var hostElement = this.elementRef.nativeElement;
+            rxjs.fromEvent(hostElement, 'mouseenter')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () { return _this._isMouseEnter.next(true); });
+            rxjs.fromEvent(hostElement, 'mouseleave')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () { return _this._isMouseEnter.next(false); });
+            rxjs.fromEvent(hostElement, 'keydown')
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                var key = event.key.toLowerCase();
+                /* tslint:disable-next-line:switch-default */
+                switch (key) {
+                    case 'escape':
+                        _this.close();
+                        _this.caller.nativeElement.focus();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    // Since the popover now lives in an overlay at the bottom of the document body, we need
+                    // to handle the tab key ourselves. Otherwise, focus would be moved to the browser's
+                    // search bar.
+                    case 'tab':
+                        if (!_this.dismissOnBlur) {
+                            return;
+                        }
+                        /*istanbul ignore else*/
+                        if (_this.isFocusLeavingElement(event)) {
+                            _this.close();
+                            _this.caller.nativeElement.focus();
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }
+                        break;
                 }
-            };
-        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 };
+            });
+        };
+        return SkyPopoverContentComponent;
+    }());
+    SkyPopoverContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverContentComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyAffixService }, { token: i1__namespace.SkyCoreAdapterService }, { token: SkyPopoverAdapterService }, { token: SkyPopoverContext }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyPopoverContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [SkyPopoverAdapterService], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header\n      *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1\n        *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n", styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media (max-width: 276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-popover-content',
+                        template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header\n      *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1\n        *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n",
+                        styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:none}@media (max-width: 276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-right-color:#ef4044;border-top-color:transparent;border-left-color:transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-left-color:#ef4044;border-bottom-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:solid 10px #00b4f1;border-left:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044;border-left-color:#ef4044;border-top-color:transparent;border-right-color:transparent}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:solid 10px #00b4f1;border-right:solid 10px #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044;border-right-color:#ef4044;border-bottom-color:transparent;border-left-color:transparent}\n"],
+                        animations: [skyPopoverAnimation],
+                        providers: [SkyPopoverAdapterService],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyAffixService }, { type: i1__namespace.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext }, { type: i2__namespace.SkyThemeService, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { arrowRef: [{
+                    type: i0.ViewChild,
+                    args: ['arrowRef', {
+                            read: i0.ElementRef,
+                            static: true,
+                        }]
+                }], popoverRef: [{
+                    type: i0.ViewChild,
+                    args: ['popoverRef', {
+                            read: i0.ElementRef,
+                            static: true,
+                        }]
+                }], contentTarget: [{
+                    type: i0.ViewChild,
+                    args: ['contentTarget', {
+                            read: i0.ViewContainerRef,
+                            static: true,
+                        }]
+                }] } });
+
+    var SkyPopoverComponent = /** @class */ (function () {
+        function SkyPopoverComponent(overlayService) {
+            this.overlayService = overlayService;
+            /**
+             * Fires when users close the popover.
+             */
+            this.popoverClosed = new i0.EventEmitter();
+            /**
+             * Fires when users open the popover.
+             */
+            this.popoverOpened = new i0.EventEmitter();
+            /**
+             * Indicates that the popover is in the process of being opened or closed.
+             * @internal
+             */
+            this.isActive = false;
+            /**
+             * Used by unit tests to disable animations since the component is injected at the bottom of the
+             * document body.
+             * @internal
+             */
+            this.enableAnimations = true;
+            this.isMouseEnter = false;
+            this.isMarkedForCloseOnMouseLeave = false;
+            this.ngUnsubscribe = new rxjs.Subject();
         }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
+        Object.defineProperty(SkyPopoverComponent.prototype, "alignment", {
+            get: function () {
+                return this._alignment || 'center';
+            },
+            /**
+             * Specifies the horizontal alignment of the popover in relation to the trigger element.
+             * The `skyPopoverAlignment` property on the popover directive takes precedence over this property when specified.
+             * @default "center"
+             */
+            set: function (value) {
+                this._alignment = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverComponent.prototype, "dismissOnBlur", {
+            get: function () {
+                if (this._dismissOnBlur === undefined) {
+                    return true;
+                }
+                return this._dismissOnBlur;
+            },
+            /**
+             * Indicates whether to close the popover when it loses focus.
+             * To require users to click a trigger button to close the popover, set this input to false.
+             * @default true
+             */
+            set: function (value) {
+                this._dismissOnBlur = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverComponent.prototype, "placement", {
+            get: function () {
+                return this._placement || 'above';
+            },
+            /**
+             * Specifies the placement of the popover in relation to the trigger element.
+             * The `skyPopoverPlacement` property on the popover directive takes precedence over this property when specified.
+             * @default "above"
+             */
+            set: function (value) {
+                this._placement = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyPopoverComponent.prototype, "popoverType", {
+            get: function () {
+                return this._popoverType || 'info';
+            },
+            /**
+             * Specifies the type of popover.
+             * @default "info"
+             */
+            set: function (value) {
+                this._popoverType = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyPopoverComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+            if (this.overlay) {
+                this.overlayService.close(this.overlay);
+                this.overlay = undefined;
             }
-            finally {
-                if (e)
-                    throw e.error;
+        };
+        /**
+         * Positions the popover next to a given caller element.
+         * @param caller The element that opened the popover.
+         * @param placement The placement of the popover.
+         * @param alignment The horizontal alignment of the popover.
+         * @internal
+         */
+        SkyPopoverComponent.prototype.positionNextTo = function (caller, placement, alignment) {
+            if (!this.overlay) {
+                this.setupOverlay();
             }
-        }
-        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];
+            this.placement = placement !== null && placement !== void 0 ? placement : this.placement;
+            this.alignment = alignment !== null && alignment !== void 0 ? alignment : this.alignment;
+            this.isActive = true;
+            this.contentRef.open(caller, {
+                dismissOnBlur: this.dismissOnBlur,
+                enableAnimations: this.enableAnimations,
+                horizontalAlignment: this.alignment,
+                isStatic: false,
+                placement: this.placement,
+                popoverTitle: this.popoverTitle,
+                popoverType: this.popoverType,
+            });
+        };
+        /**
+         * Closes the popover.
+         * @internal
+         */
+        SkyPopoverComponent.prototype.close = function () {
+            var _a;
+            /*istanbul ignore next*/
+            (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        /**
+         * Brings focus to the popover element if its open.
+         * @internal
+         */
+        SkyPopoverComponent.prototype.applyFocus = function () {
+            var _a;
+            /*istanbul ignore next*/
+            (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
+        };
+        /**
+         * Adds a flag to the popover to close when the mouse leaves the popover's bounds.
+         * @internal
+         */
+        SkyPopoverComponent.prototype.markForCloseOnMouseLeave = function () {
+            this.isMarkedForCloseOnMouseLeave = true;
+        };
+        SkyPopoverComponent.prototype.setupOverlay = function () {
+            var _this = this;
+            var overlay = this.overlayService.create({
+                enableScroll: true,
+                enablePointerEvents: true,
+            });
+            overlay.backdropClick.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                if (_this.dismissOnBlur) {
+                    _this.close();
                 }
-            }
-        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;
-    }
+            });
+            var contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
+                {
+                    provide: SkyPopoverContext,
+                    useValue: new SkyPopoverContext({
+                        contentTemplateRef: this.templateRef,
+                    }),
+                },
+            ]);
+            contentRef.opened.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                _this.popoverOpened.emit(_this);
+            });
+            contentRef.closed.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
+                /*istanbul ignore else*/
+                if (_this.isActive && _this.overlay) {
+                    _this.overlayService.close(_this.overlay);
+                    _this.overlay = undefined;
+                    _this.isActive = false;
+                    _this.popoverClosed.emit(_this);
+                }
+            });
+            contentRef.isMouseEnter
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (isMouseEnter) {
+                _this.isMouseEnter = isMouseEnter;
+                if (_this.isMarkedForCloseOnMouseLeave) {
+                    _this.isMarkedForCloseOnMouseLeave = false;
+                    _this.close();
+                }
+            });
+            this.overlay = overlay;
+            this.contentRef = contentRef;
+        };
+        return SkyPopoverComponent;
+    }());
+    SkyPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, deps: [{ token: i1__namespace.SkyOverlayService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverComponent, selector: "sky-popover", inputs: { alignment: "alignment", dismissOnBlur: "dismissOnBlur", placement: "placement", popoverTitle: "popoverTitle", popoverType: "popoverType" }, outputs: { popoverClosed: "popoverClosed", popoverOpened: "popoverOpened" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyPopoverComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-popover',
+                        template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n",
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.SkyOverlayService }]; }, propDecorators: { alignment: [{
+                    type: i0.Input
+                }], dismissOnBlur: [{
+                    type: i0.Input
+                }], placement: [{
+                    type: i0.Input
+                }], popoverTitle: [{
+                    type: i0.Input
+                }], popoverType: [{
+                    type: i0.Input
+                }], popoverClosed: [{
+                    type: i0.Output
+                }], popoverOpened: [{
+                    type: i0.Output
+                }], templateRef: [{
+                    type: i0.ViewChild,
+                    args: ['templateRef', {
+                            read: i0.TemplateRef,
+                            static: true,
+                        }]
+                }] } });
 
     /**
      * Specifies the type of message to send to the popover component.
@@ -2090,7 +2086,6 @@
         SkyPopoverDirective.prototype.removeEventListeners = function () {
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
-            this.ngUnsubscribe = undefined;
         };
         SkyPopoverDirective.prototype.handleIncomingMessages = function (message) {
             /* tslint:disable-next-line:switch-default */