@skyux/popovers 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-popovers.mjs

@@ -0,0 +1,1705 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ElementRef, TemplateRef, Optional, ViewChild, EventEmitter, Output, ContentChildren, Injectable, ViewContainerRef, Directive } from '@angular/core';
+import * as i1 from '@skyux/core';
+import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
+import * as i3 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i2 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import * as i5 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+/**
+ * Specifies the type of message to send.
+ */
+var SkyDropdownMessageType;
+(function (SkyDropdownMessageType) {
+    /**
+     * Opens the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Open"] = 0] = "Open";
+    /**
+     *  Closes the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Close"] = 1] = "Close";
+    /**
+     * Puts focus on the dropdown button.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusTriggerButton"] = 2] = "FocusTriggerButton";
+    /**
+     * Puts focus on the next item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusNextItem"] = 3] = "FocusNextItem";
+    /**
+     * Puts focus on the previous item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusPreviousItem"] = 4] = "FocusPreviousItem";
+    /**
+     * Repositions the dropdown menu next to the dropdown button. This is useful for when the
+     * dropdown menu's width and height change while it is open.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["Reposition"] = 5] = "Reposition";
+    /**
+     * Puts focus on the first item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusFirstItem"] = 6] = "FocusFirstItem";
+    /**
+     * Puts focus on the last item in the dropdown menu.
+     */
+    SkyDropdownMessageType[SkyDropdownMessageType["FocusLastItem"] = 7] = "FocusLastItem";
+})(SkyDropdownMessageType || (SkyDropdownMessageType = {}));
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-popovers' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_dropdown_context_menu_default_label: { message: 'Context menu' },
+    },
+};
+class SkyPopoversResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyPopoversResourcesModule {
+}
+SkyPopoversResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoversResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPopoversResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoversResourcesModule, exports: [SkyI18nModule] });
+SkyPopoversResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoversResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyPopoversResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoversResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyPopoversResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Specifies the button for the dropdown menu.
+ */
+class SkyDropdownButtonComponent {
+}
+SkyDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dropdown-button', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Specifies the items to display on the dropdown menu.
+ */
+class SkyDropdownItemComponent {
+    constructor(elementRef, changeDetector, renderer) {
+        this.elementRef = elementRef;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        this.isActive = false;
+        this.isDisabled = false;
+    }
+    /**
+     * Specifies an ARIA role for the dropdown menu item
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the item functions and what it controls. 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 "menuitem"
+     */
+    set ariaRole(value) {
+        this._ariaRole = value;
+    }
+    get ariaRole() {
+        return this._ariaRole || 'menuitem';
+    }
+    get buttonElement() {
+        return this.elementRef.nativeElement.querySelector('button,a');
+    }
+    ngAfterViewInit() {
+        this.isDisabled = !this.isFocusable();
+        // Make sure anchor elements are tab-able.
+        const buttonElement = this.buttonElement;
+        /* istanbul ignore else */
+        if (buttonElement) {
+            this.renderer.setAttribute(buttonElement, 'tabIndex', '0');
+        }
+        this.changeDetector.detectChanges();
+    }
+    focusElement(enableNativeFocus) {
+        this.isActive = true;
+        if (enableNativeFocus) {
+            this.buttonElement.focus();
+        }
+        this.changeDetector.detectChanges();
+    }
+    isFocusable() {
+        /*tslint:disable no-null-keyword */
+        const isFocusable = this.buttonElement &&
+            this.buttonElement.getAttribute('disabled') === null;
+        /*tslint:enable */
+        return isFocusable;
+    }
+    resetState() {
+        this.isActive = false;
+        this.changeDetector.markForCheck();
+    }
+}
+SkyDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDropdownItemComponent, selector: "sky-dropdown-item", inputs: { ariaRole: "ariaRole" }, ngImport: i0, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive,\n    'sky-dropdown-item-disabled': isDisabled\n  }\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active,.sky-dropdown-item:hover{background-color:#eeeeef}.sky-dropdown-item.sky-dropdown-item-disabled{cursor:default}.sky-dropdown-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],.sky-dropdown-item>button[disabled]{color:#686c73}.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>button[disabled]:hover{cursor:default}.sky-theme-modern .sky-dropdown-item{margin:0}.sky-theme-modern .sky-dropdown-item.sky-dropdown-item-active,.sky-theme-modern .sky-dropdown-item:hover{background-color:transparent}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{padding:8px 20px;transition:box-shadow .15s}.sky-theme-modern .sky-dropdown-item>a:hover,.sky-theme-modern .sky-dropdown-item>button:hover{outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-dropdown-item>a:focus,.sky-theme-modern .sky-dropdown-item>a:active,.sky-theme-modern .sky-dropdown-item>button:focus,.sky-theme-modern .sky-dropdown-item>button:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-dropdown-item>a:focus:not(:active),.sky-theme-modern .sky-dropdown-item>button:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>a,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>button{color:#fbfcfe}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive,\n    'sky-dropdown-item-disabled': isDisabled\n  }\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active,.sky-dropdown-item:hover{background-color:#eeeeef}.sky-dropdown-item.sky-dropdown-item-disabled{cursor:default}.sky-dropdown-item.sky-dropdown-item-disabled:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],.sky-dropdown-item>button[disabled]{color:#686c73}.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>button[disabled]:hover{cursor:default}.sky-theme-modern .sky-dropdown-item{margin:0}.sky-theme-modern .sky-dropdown-item.sky-dropdown-item-active,.sky-theme-modern .sky-dropdown-item:hover{background-color:transparent}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{padding:8px 20px;transition:box-shadow .15s}.sky-theme-modern .sky-dropdown-item>a:hover,.sky-theme-modern .sky-dropdown-item>button:hover{outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-dropdown-item>a:focus,.sky-theme-modern .sky-dropdown-item>a:active,.sky-theme-modern .sky-dropdown-item>button:focus,.sky-theme-modern .sky-dropdown-item>button:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-dropdown-item>a:focus:not(:active),.sky-theme-modern .sky-dropdown-item>button:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>a,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>button{color:#fbfcfe}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { ariaRole: [{
+                type: 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.
+ */
+class SkyDropdownComponent {
+    constructor(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 Subject();
+        this.isMouseEnter = false;
+        this.isVisible = false;
+        this.ngUnsubscribe = new Subject();
+        this._isOpen = false;
+    }
+    /**
+     * 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 buttonStyle(value) {
+        this._buttonStyle = value;
+    }
+    get buttonStyle() {
+        return this._buttonStyle || 'default';
+    }
+    /**
+     * 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 buttonType(value) {
+        this._buttonType = value;
+    }
+    get buttonType() {
+        return this._buttonType || 'select';
+    }
+    /**
+     * Indicates whether to disable the dropdown button.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled || false;
+    }
+    /**
+     * Indicates whether to close the dropdown when users click away from the menu.
+     * @default true
+     */
+    set dismissOnBlur(value) {
+        this._dismissOnBlur = value;
+    }
+    get dismissOnBlur() {
+        if (this._dismissOnBlur === undefined) {
+            return true;
+        }
+        return this._dismissOnBlur;
+    }
+    /**
+     * Specifies the horizontal alignment of the dropdown menu in relation to the dropdown button.
+     * @default "left"
+     */
+    set horizontalAlignment(value) {
+        this._horizontalAlignment = value;
+    }
+    get horizontalAlignment() {
+        return this._horizontalAlignment || 'left';
+    }
+    /**
+     * 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 trigger(value) {
+        this._trigger = value;
+    }
+    get trigger() {
+        return this._trigger || 'click';
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+        this.changeDetector.markForCheck();
+    }
+    get isOpen() {
+        return this._isOpen || false;
+    }
+    set menuContainerElementRef(value) {
+        if (value) {
+            this._menuContainerElementRef = value;
+            this.destroyAffixer();
+            this.createAffixer();
+            this.changeDetector.markForCheck();
+        }
+    }
+    get menuContainerElementRef() {
+        return this._menuContainerElementRef;
+    }
+    ngOnInit() {
+        var _a;
+        this.addEventListeners();
+        this.messageStream
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((message) => {
+            this.handleIncomingMessages(message);
+        });
+        // Load proper icons on theme change.
+        (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.destroyAffixer();
+        this.destroyOverlay();
+        clearTimeout(this._positionTimeout);
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.ngUnsubscribe = undefined;
+    }
+    addEventListeners() {
+        const buttonElement = this.triggerButton.nativeElement;
+        fromEvent(buttonElement, 'click')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            if (this.isOpen) {
+                this.sendMessage(SkyDropdownMessageType.Close);
+            }
+            else {
+                this.sendMessage(SkyDropdownMessageType.Open);
+                // Wait for dropdown to open, then set focus on first item.
+                setTimeout(() => {
+                    this.sendMessage(SkyDropdownMessageType.FocusFirstItem);
+                });
+            }
+        });
+        fromEvent(buttonElement, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            const key = event.key.toLowerCase();
+            /* tslint:disable-next-line:switch-default */
+            switch (key) {
+                case 'escape':
+                    /*istanbul ignore else*/
+                    if (this.isOpen) {
+                        this.sendMessage(SkyDropdownMessageType.Close);
+                        this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);
+                        event.stopPropagation();
+                    }
+                    break;
+                case 'tab':
+                    if (this.isOpen && this.dismissOnBlur) {
+                        this.sendMessage(SkyDropdownMessageType.Close);
+                    }
+                    break;
+                case 'arrowup':
+                case 'up':
+                    if (!this.isOpen) {
+                        this.sendMessage(SkyDropdownMessageType.Open);
+                        this.sendMessage(SkyDropdownMessageType.FocusLastItem);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                case 'enter':
+                case 'arrowdown':
+                case 'down':
+                case ' ': // Spacebar.
+                    /*istanbul ignore else*/
+                    if (!this.isOpen) {
+                        this.sendMessage(SkyDropdownMessageType.Open);
+                        this.sendMessage(SkyDropdownMessageType.FocusFirstItem);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+            }
+        });
+        fromEvent(buttonElement, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.isMouseEnter = true;
+            if (this.trigger === 'hover') {
+                this.sendMessage(SkyDropdownMessageType.Open);
+            }
+        });
+        fromEvent(buttonElement, 'mouseleave')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.isMouseEnter = false;
+            if (this.trigger === 'hover') {
+                // Allow the dropdown menu to set isMouseEnter before checking if the close action
+                // should be taken.
+                setTimeout(() => {
+                    if (!this.isMouseEnter) {
+                        this.sendMessage(SkyDropdownMessageType.Close);
+                    }
+                });
+            }
+        });
+    }
+    createOverlay() {
+        if (this.overlay) {
+            return;
+        }
+        const overlay = this.overlayService.create({
+            enableScroll: true,
+            enablePointerEvents: true,
+        });
+        overlay.attachTemplate(this.menuContainerTemplateRef);
+        overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            if (this.dismissOnBlur) {
+                this.sendMessage(SkyDropdownMessageType.Close);
+            }
+        });
+        this.overlay = overlay;
+    }
+    destroyAffixer() {
+        /*istanbul ignore else*/
+        if (this.affixer) {
+            this.affixer.destroy();
+            this.affixer = undefined;
+        }
+    }
+    destroyOverlay() {
+        /*istanbul ignore else*/
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    createAffixer() {
+        const affixer = this.affixService.createAffixer(this.menuContainerElementRef);
+        affixer.placementChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => {
+            this.isVisible = change.placement !== null;
+            this.changeDetector.markForCheck();
+        });
+        this.affixer = affixer;
+    }
+    handleIncomingMessages(message) {
+        if (!this.disabled) {
+            /* tslint:disable-next-line:switch-default */
+            switch (message.type) {
+                case SkyDropdownMessageType.Open:
+                    this.isOpen = true;
+                    this.positionDropdownMenu();
+                    break;
+                case SkyDropdownMessageType.Close:
+                    this.isOpen = false;
+                    this.destroyOverlay();
+                    break;
+                case SkyDropdownMessageType.Reposition:
+                    // Only reposition the dropdown if it is already open.
+                    /* istanbul ignore else */
+                    if (this.isOpen && this.affixer) {
+                        this.affixer.reaffix();
+                    }
+                    break;
+                case SkyDropdownMessageType.FocusTriggerButton:
+                    this.triggerButton.nativeElement.focus();
+                    break;
+            }
+        }
+    }
+    sendMessage(type) {
+        this.messageStream.next({ type });
+    }
+    positionDropdownMenu() {
+        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(() => {
+            this.affixer.affixTo(this.triggerButton.nativeElement, {
+                autoFitContext: SkyAffixAutoFitContext.Viewport,
+                enableAutoFit: true,
+                horizontalAlignment: parseAffixHorizontalAlignment$1(this.horizontalAlignment),
+                isSticky: true,
+                placement: 'below',
+            });
+            this.isVisible = true;
+            this.changeDetector.markForCheck();
+        });
+    }
+}
+SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAffixService }, { token: i1.SkyOverlayService }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: ElementRef }, { propertyName: "menuContainerTemplateRef", first: true, predicate: ["menuContainerTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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,.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.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, 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,.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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyAffixService }, { type: i1.SkyOverlayService }, { type: i2.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { buttonStyle: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dismissOnBlur: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], horizontalAlignment: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], trigger: [{
+                type: Input
+            }], menuContainerElementRef: [{
+                type: ViewChild,
+                args: ['menuContainerElementRef', {
+                        read: ElementRef,
+                    }]
+            }], menuContainerTemplateRef: [{
+                type: ViewChild,
+                args: ['menuContainerTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], triggerButton: [{
+                type: ViewChild,
+                args: ['triggerButton', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }] } });
+
+let nextId = 0;
+/**
+ * Creates a menu that contains dropdown menu items.
+ *
+ */
+class SkyDropdownMenuComponent {
+    constructor(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 EventEmitter();
+        this.dropdownMenuId = `sky-dropdown-menu-${++nextId}`;
+        this.ngUnsubscribe = new Subject();
+        this._menuIndex = 0;
+    }
+    /**
+     * 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 ariaRole(value) {
+        this._ariaRole = value;
+    }
+    get ariaRole() {
+        return this._ariaRole || 'menu';
+    }
+    /**
+     * 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 useNativeFocus(value) {
+        this._useNativeFocus = value;
+    }
+    get useNativeFocus() {
+        if (this._useNativeFocus === undefined) {
+            return true;
+        }
+        return this._useNativeFocus;
+    }
+    get hasFocusableItems() {
+        const found = this.menuItems.find((item) => item.isFocusable());
+        return found !== undefined;
+    }
+    set menuIndex(value) {
+        if (value < 0) {
+            value = this.menuItems.length - 1;
+        }
+        if (value >= this.menuItems.length) {
+            value = 0;
+        }
+        this._menuIndex = value;
+    }
+    get menuIndex() {
+        return this._menuIndex;
+    }
+    ngAfterContentInit() {
+        /* istanbul ignore else */
+        if (this.dropdownComponent) {
+            this.dropdownComponent.menuId = this.dropdownMenuId;
+            this.dropdownComponent.menuAriaRole = this.ariaRole;
+            this.dropdownComponent.messageStream
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((message) => {
+                /* tslint:disable-next-line:switch-default */
+                switch (message.type) {
+                    case SkyDropdownMessageType.Open:
+                    case SkyDropdownMessageType.Close:
+                        this.reset();
+                        break;
+                    case SkyDropdownMessageType.FocusFirstItem:
+                        this.focusFirstItem();
+                        break;
+                    case SkyDropdownMessageType.FocusNextItem:
+                        this.focusNextItem();
+                        break;
+                    case SkyDropdownMessageType.FocusPreviousItem:
+                        this.focusPreviousItem();
+                        break;
+                    case SkyDropdownMessageType.FocusLastItem:
+                        this.focusLastItem();
+                        break;
+                }
+            });
+            this.menuChanges
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((change) => {
+                // Close the dropdown when a menu item is selected.
+                if (change.selectedItem) {
+                    this.sendMessage(SkyDropdownMessageType.Close);
+                    this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);
+                }
+                if (change.items) {
+                    // Update the popover style and position whenever the number of items changes.
+                    this.sendMessage(SkyDropdownMessageType.Reposition);
+                }
+            });
+        }
+        // Reset dropdown whenever the menu items change.
+        this.menuItems.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((items) => {
+            this.reset();
+            this.menuChanges.emit({
+                items: items.toArray(),
+            });
+        });
+        this.addEventListeners();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.ngUnsubscribe = undefined;
+    }
+    focusFirstItem() {
+        if (!this.hasFocusableItems) {
+            return;
+        }
+        this.menuIndex = 0;
+        const firstItem = this.getItemByIndex(this.menuIndex);
+        if (firstItem && firstItem.isFocusable()) {
+            this.focusItem(firstItem);
+        }
+        else {
+            this.focusNextItem();
+        }
+    }
+    focusLastItem() {
+        if (!this.hasFocusableItems) {
+            return;
+        }
+        this.menuIndex = this.menuItems.length - 1;
+        const lastItem = this.getItemByIndex(this.menuIndex);
+        if (lastItem && lastItem.isFocusable()) {
+            this.focusItem(lastItem);
+        }
+        else {
+            this.focusPreviousItem();
+        }
+    }
+    focusPreviousItem() {
+        if (!this.hasFocusableItems) {
+            return;
+        }
+        this.menuIndex--;
+        const previousItem = this.getItemByIndex(this.menuIndex);
+        if (previousItem && previousItem.isFocusable()) {
+            this.focusItem(previousItem);
+        }
+        else {
+            this.focusPreviousItem();
+        }
+    }
+    focusNextItem() {
+        if (!this.hasFocusableItems) {
+            return;
+        }
+        this.menuIndex++;
+        const nextItem = this.getItemByIndex(this.menuIndex);
+        if (nextItem && nextItem.isFocusable()) {
+            this.focusItem(nextItem);
+        }
+        else {
+            this.focusNextItem();
+        }
+    }
+    reset() {
+        this._menuIndex = -1;
+        this.resetItemsActiveState();
+        this.changeDetector.markForCheck();
+    }
+    resetItemsActiveState() {
+        this.menuItems.forEach((item) => {
+            item.resetState();
+        });
+    }
+    focusItem(item) {
+        this.resetItemsActiveState();
+        item.focusElement(this.useNativeFocus);
+        this.menuChanges.emit({
+            activeIndex: this.menuIndex,
+        });
+    }
+    getItemByIndex(index) {
+        return this.menuItems.find((item, i) => {
+            return i === index;
+        });
+    }
+    selectItemByEventTarget(target) {
+        const selectedItem = this.menuItems.find((item, i) => {
+            const 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,
+            });
+        }
+    }
+    sendMessage(type) {
+        this.dropdownComponent.messageStream.next({ type });
+    }
+    addEventListeners() {
+        const dropdownMenuElement = this.elementRef.nativeElement;
+        fromEvent(dropdownMenuElement, 'click')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            this.selectItemByEventTarget(event.target);
+        });
+        fromEvent(dropdownMenuElement, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            const key = event.key.toLowerCase();
+            /*tslint:disable-next-line:switch-default*/
+            switch (key) {
+                case 'escape':
+                    this.sendMessage(SkyDropdownMessageType.Close);
+                    this.sendMessage(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(SkyDropdownMessageType.Close);
+                    }
+                    this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);
+                    break;
+            }
+        });
+        fromEvent(dropdownMenuElement, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.dropdownComponent.isMouseEnter = true;
+        });
+        fromEvent(dropdownMenuElement, 'mouseleave')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.dropdownComponent.isMouseEnter = false;
+            // Allow the dropdown component to set isMouseEnter before checking if the close action
+            // should be taken.
+            setTimeout(() => {
+                if (this.dropdownComponent.trigger === 'hover' &&
+                    this.dropdownComponent.isMouseEnter === false) {
+                    this.sendMessage(SkyDropdownMessageType.Close);
+                }
+            });
+        });
+    }
+}
+SkyDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyDropdownComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { ariaLabelledBy: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], useNativeFocus: [{
+                type: Input
+            }], menuChanges: [{
+                type: Output
+            }], menuItems: [{
+                type: ContentChildren,
+                args: [SkyDropdownItemComponent, { descendants: true }]
+            }] } });
+
+class SkyDropdownModule {
+}
+SkyDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownModule, declarations: [SkyDropdownButtonComponent,
+        SkyDropdownComponent,
+        SkyDropdownItemComponent,
+        SkyDropdownMenuComponent], imports: [CommonModule,
+        SkyAffixModule,
+        SkyIconModule,
+        SkyOverlayModule,
+        SkyPopoversResourcesModule,
+        SkyThemeModule], exports: [SkyDropdownButtonComponent,
+        SkyDropdownComponent,
+        SkyDropdownItemComponent,
+        SkyDropdownMenuComponent] });
+SkyDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownModule, imports: [[
+            CommonModule,
+            SkyAffixModule,
+            SkyIconModule,
+            SkyOverlayModule,
+            SkyPopoversResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDropdownButtonComponent,
+                        SkyDropdownComponent,
+                        SkyDropdownItemComponent,
+                        SkyDropdownMenuComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyAffixModule,
+                        SkyIconModule,
+                        SkyOverlayModule,
+                        SkyPopoversResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyDropdownButtonComponent,
+                        SkyDropdownComponent,
+                        SkyDropdownItemComponent,
+                        SkyDropdownMenuComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyPopoverAdapterService {
+    getArrowCoordinates(elements, placement, themeName) {
+        const callerRect = elements.caller.nativeElement.getBoundingClientRect();
+        const popoverRect = elements.popover.nativeElement.getBoundingClientRect();
+        const arrowRect = elements.popoverArrow.nativeElement.getBoundingClientRect();
+        const pixelTolerance = 20;
+        let top;
+        let 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, left };
+    }
+}
+SkyPopoverAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyPopoverAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+const skyPopoverAnimation = trigger('skyPopoverAnimation', [
+    state('void', style({
+        opacity: 0,
+    })),
+    state('open', style({
+        opacity: 1,
+    })),
+    state('closed', style({
+        opacity: 0,
+    })),
+    transition('void => *', [animate('250ms')]),
+    transition('open => closed', [animate('150ms')]),
+    transition('closed => open', [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}'!`;
+    }
+}
+
+/**
+ * @dynamic
+ * @internal
+ */
+class SkyPopoverContext {
+    constructor(args) {
+        this.contentTemplateRef = args.contentTemplateRef;
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyPopoverContentComponent {
+    constructor(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.popoverType = 'info';
+        this.ngUnsubscribe = new Subject();
+        this._closed = new Subject();
+        this._isMouseEnter = new Subject();
+        this._opened = new Subject();
+    }
+    get animationState() {
+        return this.isOpen ? 'open' : 'closed';
+    }
+    get closed() {
+        return this._closed.asObservable();
+    }
+    get opened() {
+        return this._opened.asObservable();
+    }
+    get isMouseEnter() {
+        return this._isMouseEnter.asObservable();
+    }
+    ngOnInit() {
+        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(takeUntil(this.ngUnsubscribe))
+                .subscribe((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;
+            });
+        }
+    }
+    ngOnDestroy() {
+        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;
+    }
+    onAnimationEvent(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();
+            }
+            else {
+                /*istanbul ignore next*/
+                (_b = this._closed) === null || _b === void 0 ? void 0 : _b.next();
+            }
+        }
+    }
+    open(caller, config) {
+        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();
+            return;
+        }
+        // Let the styles render before gauging the affix dimensions.
+        setTimeout(() => {
+            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();
+            }
+            const affixOptions = {
+                autoFitContext: SkyAffixAutoFitContext.Viewport,
+                enableAutoFit: true,
+                horizontalAlignment: parseAffixHorizontalAlignment(this.horizontalAlignment),
+                isSticky: true,
+                placement: parseAffixPlacement(this.placement),
+            };
+            // Ensure that we are positioning the vertical alginment correctly. These
+            // are the default alignments for all popovers but ensure that we are future proof here.
+            if (affixOptions.placement === 'left' ||
+                affixOptions.placement === 'right') {
+                affixOptions.verticalAlignment = 'middle';
+            }
+            else if (affixOptions.placement === 'above') {
+                affixOptions.verticalAlignment = 'bottom';
+            }
+            else {
+                affixOptions.verticalAlignment = 'top';
+            }
+            this.affixer.affixTo(this.caller.nativeElement, affixOptions);
+            this.updateArrowOffset();
+            this.isOpen = true;
+            this.changeDetector.markForCheck();
+        });
+    }
+    close() {
+        this.isOpen = false;
+        this.changeDetector.markForCheck();
+    }
+    applyFocus() {
+        if (this.isOpen) {
+            this.coreAdapterService.getFocusableChildrenAndApplyFocus(this.popoverRef, '.sky-popover', true);
+        }
+    }
+    setupAffixer() {
+        const affixer = this.affixService.createAffixer(this.popoverRef);
+        affixer.offsetChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.updateArrowOffset();
+            this.changeDetector.markForCheck();
+        });
+        affixer.overflowScroll.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.updateArrowOffset();
+            this.changeDetector.markForCheck();
+        });
+        affixer.placementChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => {
+            this.placement = change.placement;
+            this.changeDetector.markForCheck();
+        });
+        this.affixer = affixer;
+    }
+    updateArrowOffset() {
+        const { top, left } = this.adapterService.getArrowCoordinates({
+            caller: this.caller,
+            popover: this.popoverRef,
+            popoverArrow: this.arrowRef,
+        }, this.placement, this.themeName);
+        this.arrowTop = top;
+        this.arrowLeft = left;
+    }
+    isFocusLeavingElement(event) {
+        const focusableItems = this.coreAdapterService.getFocusableChildren(this.elementRef.nativeElement);
+        const isFirstItem = focusableItems[0] === event.target && event.shiftKey;
+        const isLastItem = focusableItems[focusableItems.length - 1] === event.target &&
+            !event.shiftKey;
+        return focusableItems.length === 0 || isFirstItem || isLastItem;
+    }
+    addEventListeners() {
+        const hostElement = this.elementRef.nativeElement;
+        fromEvent(hostElement, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this._isMouseEnter.next(true));
+        fromEvent(hostElement, 'mouseleave')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this._isMouseEnter.next(false));
+        fromEvent(hostElement, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            const 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;
+            }
+        });
+    }
+}
+SkyPopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i1.SkyCoreAdapterService }, { token: SkyPopoverAdapterService }, { token: SkyPopoverContext, optional: true }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyPopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPopoverContentComponent, selector: "sky-popover-content", providers: [SkyPopoverAdapterService], viewQueries: [{ propertyName: "arrowRef", first: true, predicate: ["arrowRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "contentTarget", first: true, predicate: ["contentTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [skyPopoverAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-popover-content', animations: [skyPopoverAnimation], providers: [SkyPopoverAdapterService], 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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i1.SkyCoreAdapterService }, { type: SkyPopoverAdapterService }, { type: SkyPopoverContext, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { arrowRef: [{
+                type: ViewChild,
+                args: ['arrowRef', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], popoverRef: [{
+                type: ViewChild,
+                args: ['popoverRef', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], contentTarget: [{
+                type: ViewChild,
+                args: ['contentTarget', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyPopoverComponent {
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        /**
+         * Fires when users close the popover.
+         */
+        this.popoverClosed = new EventEmitter();
+        /**
+         * Fires when users open the popover.
+         */
+        this.popoverOpened = new 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 Subject();
+    }
+    /**
+     * Specifies the horizontal alignment of the popover in relation to the trigger element.
+     * The `skyPopoverAlignment` property on the popover directive overwrites this property.
+     * Options include:`"center"`, `"right"`, and `'"left"`.
+     * @default "center"
+     */
+    set alignment(value) {
+        this._alignment = value;
+    }
+    get alignment() {
+        return this._alignment || 'center';
+    }
+    /**
+     * 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 dismissOnBlur(value) {
+        this._dismissOnBlur = value;
+    }
+    get dismissOnBlur() {
+        if (this._dismissOnBlur === undefined) {
+            return true;
+        }
+        return this._dismissOnBlur;
+    }
+    /**
+     * Specifies the placement of the popover in relation to the trigger element.
+     * The `skyPopoverPlacement` property on the popover directive overwrites this property.
+     * Options include:`"above"`, `"below"`, `"right"`, and `"left"`.
+     * @default "above"
+     */
+    set placement(value) {
+        this._placement = value;
+    }
+    get placement() {
+        return this._placement || 'above';
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.ngUnsubscribe = undefined;
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    /**
+     * 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
+     */
+    positionNextTo(caller, placement, alignment) {
+        if (!this.overlay) {
+            this.setupOverlay();
+        }
+        this.placement = placement;
+        this.alignment = 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
+     */
+    close() {
+        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
+     */
+    applyFocus() {
+        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
+     */
+    markForCloseOnMouseLeave() {
+        this.isMarkedForCloseOnMouseLeave = true;
+    }
+    setupOverlay() {
+        const overlay = this.overlayService.create({
+            enableScroll: true,
+            enablePointerEvents: true,
+        });
+        overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            if (this.dismissOnBlur) {
+                this.close();
+            }
+        });
+        const contentRef = overlay.attachComponent(SkyPopoverContentComponent, [
+            {
+                provide: SkyPopoverContext,
+                useValue: new SkyPopoverContext({
+                    contentTemplateRef: this.templateRef,
+                }),
+            },
+        ]);
+        contentRef.opened.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.popoverOpened.emit(this);
+        });
+        contentRef.closed.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            /*istanbul ignore else*/
+            if (this.isActive) {
+                this.overlayService.close(this.overlay);
+                this.overlay = undefined;
+                this.isActive = false;
+                this.popoverClosed.emit(this);
+            }
+        });
+        contentRef.isMouseEnter
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((isMouseEnter) => {
+            this.isMouseEnter = isMouseEnter;
+            if (this.isMarkedForCloseOnMouseLeave) {
+                this.isMarkedForCloseOnMouseLeave = false;
+                this.close();
+            }
+        });
+        this.overlay = overlay;
+        this.contentRef = contentRef;
+    }
+}
+SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1.SkyOverlayService }], target: i0.ɵɵFactoryTarget.Component });
+SkyPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-popover', template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.SkyOverlayService }]; }, propDecorators: { alignment: [{
+                type: Input
+            }], dismissOnBlur: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], popoverTitle: [{
+                type: Input
+            }], popoverType: [{
+                type: Input
+            }], popoverClosed: [{
+                type: Output
+            }], popoverOpened: [{
+                type: Output
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['templateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * Specifies the type of message to send to the popover component.
+ */
+var SkyPopoverMessageType;
+(function (SkyPopoverMessageType) {
+    /**
+     * Opens the popover.
+     */
+    SkyPopoverMessageType[SkyPopoverMessageType["Open"] = 0] = "Open";
+    /**
+     * Closes the popover.
+     */
+    SkyPopoverMessageType[SkyPopoverMessageType["Close"] = 1] = "Close";
+    /**
+     * Repositions the popover to the appropriate position.
+     * This is useful for when the popover's width and height change while it is open.
+     */
+    SkyPopoverMessageType[SkyPopoverMessageType["Reposition"] = 2] = "Reposition";
+    /**
+     * Brings focus to the popover element.
+     */
+    SkyPopoverMessageType[SkyPopoverMessageType["Focus"] = 3] = "Focus";
+})(SkyPopoverMessageType || (SkyPopoverMessageType = {}));
+
+class SkyPopoverDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /**
+         * Provides an observable to send commands to the popover that respect the `SkyPopoverMessage` type.
+         */
+        this.skyPopoverMessageStream = new Subject();
+        this.ngUnsubscribe = new Subject();
+    }
+    /**
+     * Specifies the user action that displays the popover.
+     */
+    set skyPopoverTrigger(value) {
+        this._trigger = value;
+    }
+    get skyPopoverTrigger() {
+        return this._trigger || 'click';
+    }
+    ngOnInit() {
+        this.addEventListeners();
+    }
+    ngOnDestroy() {
+        this.removeEventListeners();
+    }
+    togglePopover() {
+        if (this.skyPopover.isActive) {
+            this.sendMessage(SkyPopoverMessageType.Close);
+            return;
+        }
+        this.sendMessage(SkyPopoverMessageType.Open);
+    }
+    positionPopover() {
+        this.skyPopover.positionNextTo(this.elementRef, this.skyPopoverPlacement, this.skyPopoverAlignment);
+    }
+    closePopover() {
+        this.skyPopover.close();
+    }
+    closePopoverOrMarkForClose() {
+        if (this.skyPopover.isMouseEnter) {
+            this.skyPopover.markForCloseOnMouseLeave();
+        }
+        else {
+            this.sendMessage(SkyPopoverMessageType.Close);
+        }
+    }
+    addEventListeners() {
+        const element = this.elementRef.nativeElement;
+        this.skyPopoverMessageStream
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((message) => {
+            this.handleIncomingMessages(message);
+        });
+        fromEvent(element, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            if (!this.skyPopover.isActive) {
+                return;
+            }
+            const key = event.key.toLowerCase();
+            /* tslint:disable-next-line:switch-default */
+            switch (key) {
+                case 'escape':
+                    this.sendMessage(SkyPopoverMessageType.Close);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'tab':
+                    if (this.skyPopover.dismissOnBlur) {
+                        this.sendMessage(SkyPopoverMessageType.Close);
+                    }
+                    break;
+                case 'arrowdown':
+                case 'arrowleft':
+                case 'arrowright':
+                case 'arrowup':
+                case 'down':
+                case 'left':
+                case 'right':
+                case 'up':
+                    this.sendMessage(SkyPopoverMessageType.Focus);
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+            }
+        });
+        fromEvent(element, 'click')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            if (this.skyPopover) {
+                this.togglePopover();
+            }
+        });
+        fromEvent(element, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            if (this.skyPopover) {
+                this.skyPopover.isMouseEnter = true;
+                if (!this.skyPopover.isActive &&
+                    this.skyPopoverTrigger === 'mouseenter') {
+                    this.sendMessage(SkyPopoverMessageType.Open);
+                }
+            }
+        });
+        fromEvent(element, 'mouseleave')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            if (this.skyPopover) {
+                this.skyPopover.isMouseEnter = false;
+                if (this.skyPopover.isActive &&
+                    this.skyPopoverTrigger === 'mouseenter') {
+                    // Give the popover a chance to set its isMouseEnter flag before checking to see
+                    // if it should be closed.
+                    setTimeout(() => {
+                        this.closePopoverOrMarkForClose();
+                    });
+                }
+            }
+        });
+    }
+    removeEventListeners() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.ngUnsubscribe = undefined;
+    }
+    handleIncomingMessages(message) {
+        /* tslint:disable-next-line:switch-default */
+        switch (message.type) {
+            case SkyPopoverMessageType.Open:
+                this.positionPopover();
+                break;
+            case SkyPopoverMessageType.Close:
+                /*istanbul ignore else*/
+                if (this.skyPopover.isActive) {
+                    this.closePopover();
+                }
+                break;
+            case SkyPopoverMessageType.Reposition:
+                // Only reposition the popover if it is already open.
+                if (this.skyPopover.isActive) {
+                    this.positionPopover();
+                }
+                break;
+            case SkyPopoverMessageType.Focus:
+                this.skyPopover.applyFocus();
+                break;
+        }
+    }
+    sendMessage(messageType) {
+        this.skyPopoverMessageStream.next({ type: messageType });
+    }
+}
+SkyPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyPopoverDirective, selector: "[skyPopover]", inputs: { skyPopover: "skyPopover", skyPopoverAlignment: "skyPopoverAlignment", skyPopoverMessageStream: "skyPopoverMessageStream", skyPopoverPlacement: "skyPopoverPlacement", skyPopoverTrigger: "skyPopoverTrigger" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyPopover]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { skyPopover: [{
+                type: Input
+            }], skyPopoverAlignment: [{
+                type: Input
+            }], skyPopoverMessageStream: [{
+                type: Input
+            }], skyPopoverPlacement: [{
+                type: Input
+            }], skyPopoverTrigger: [{
+                type: Input
+            }] } });
+
+class SkyPopoverModule {
+}
+SkyPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverModule, declarations: [SkyPopoverComponent,
+        SkyPopoverContentComponent,
+        SkyPopoverDirective], imports: [CommonModule,
+        SkyAffixModule,
+        SkyIconModule,
+        SkyOverlayModule,
+        SkyPopoversResourcesModule,
+        SkyThemeModule], exports: [SkyPopoverComponent,
+        SkyPopoverContentComponent,
+        SkyPopoverDirective] });
+SkyPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverModule, imports: [[
+            CommonModule,
+            SkyAffixModule,
+            SkyIconModule,
+            SkyOverlayModule,
+            SkyPopoversResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyPopoverComponent,
+                        SkyPopoverContentComponent,
+                        SkyPopoverDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyAffixModule,
+                        SkyIconModule,
+                        SkyOverlayModule,
+                        SkyPopoversResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyPopoverComponent,
+                        SkyPopoverContentComponent,
+                        SkyPopoverDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDropdownMessageType, SkyDropdownModule, SkyPopoverMessageType, SkyPopoverModule, SkyDropdownItemComponent as λ1, SkyDropdownButtonComponent as λ2, SkyDropdownComponent as λ3, SkyDropdownMenuComponent as λ4, SkyPopoverContentComponent as λ5, SkyPopoverComponent as λ6, SkyPopoverDirective as λ7 };
+//# sourceMappingURL=skyux-popovers.mjs.map