@skyux/popovers 5.0.2 → 5.5.0

package/esm2015/lib/modules/dropdown/dropdown.component.js

@@ -0,0 +1,360 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Optional, TemplateRef, ViewChild, } from '@angular/core';
+import { SkyAffixAutoFitContext, SkyAffixService, SkyOverlayService, } from '@skyux/core';
+import { SkyThemeService } from '@skyux/theme';
+import { fromEvent as observableFromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyDropdownMessageType } from './types/dropdown-message-type';
+import { parseAffixHorizontalAlignment } from './dropdown-extensions';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/core";
+import * as i2 from "@skyux/theme";
+import * as i3 from "@skyux/indicators";
+import * as i4 from "@angular/common";
+import * as i5 from "@skyux/i18n";
+export 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;
+        observableFromEvent(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);
+                });
+            }
+        });
+        observableFromEvent(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;
+            }
+        });
+        observableFromEvent(buttonElement, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.isMouseEnter = true;
+            if (this.trigger === 'hover') {
+                this.sendMessage(SkyDropdownMessageType.Open);
+            }
+        });
+        observableFromEvent(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(this.horizontalAlignment),
+                isSticky: true,
+                placement: 'below',
+            });
+            this.isVisible = true;
+            this.changeDetector.markForCheck();
+        });
+    }
+}
+SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: SkyDropdownComponent, selector: "sky-dropdown", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", disabled: "disabled", dismissOnBlur: "dismissOnBlur", label: "label", horizontalAlignment: "horizontalAlignment", messageStream: "messageStream", title: "title", trigger: "trigger" }, viewQueries: [{ propertyName: "menuContainerElementRef", first: true, predicate: ["menuContainerElementRef"], descendants: true, read: 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{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"], components: [{ type: i3.λ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: "12.2.16", ngImport: i0, type: SkyDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-dropdown',
+                    templateUrl: './dropdown.component.html',
+                    styleUrls: ['./dropdown.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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,
+                    }]
+            }] } });
+//# sourceMappingURL=dropdown.component.js.map

package/esm2015/lib/modules/dropdown/dropdown.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown.component.ts","../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\n\nimport {\n  SkyAffixAutoFitContext,\n  SkyAffixer,\n  SkyAffixService,\n  SkyOverlayInstance,\n  SkyOverlayService,\n} from '@skyux/core';\n\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { fromEvent as observableFromEvent, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyDropdownHorizontalAlignment } from './types/dropdown-horizontal-alignment';\n\nimport { SkyDropdownMessage } from './types/dropdown-message';\n\nimport { SkyDropdownMessageType } from './types/dropdown-message-type';\n\nimport { SkyDropdownTriggerType } from './types/dropdown-trigger-type';\n\nimport { parseAffixHorizontalAlignment } from './dropdown-extensions';\n\n@Component({\n  selector: 'sky-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDropdownComponent implements OnInit, OnDestroy {\n  /**\n   * Specifies a background color for the dropdown button. Available values are `default` and\n   * `primary`. These values set the background color from the\n   * [secondary and primary button classes](https://developer.blackbaud.com/skyux/components/button) respectively.\n   * @default \"default\"\n   */\n  @Input()\n  public set buttonStyle(value: string) {\n    this._buttonStyle = value;\n  }\n\n  public get buttonStyle(): string {\n    return this._buttonStyle || 'default';\n  }\n\n  /**\n   * Specifies the type of button to render as the dropdown's trigger element. To display a button\n   * with text and a caret, specify `select` and then enter the button text in a\n   * `sky-dropdown-button` element. To display a round button with an ellipsis, specify\n   * `context-menu`. And to display a button with a [Font Awesome icon](http://fontawesome.io/icons/), specify the icon's class name.\n   * For example, to display the `fa-filter` icon, specify `filter`.\n   * @default \"select\"\n   */\n  @Input()\n  public set buttonType(value: string) {\n    this._buttonType = value;\n  }\n\n  public get buttonType(): string {\n    return this._buttonType || 'select';\n  }\n\n  /**\n   * Indicates whether to disable the dropdown button.\n   * @default false\n   */\n  @Input()\n  public set disabled(value: boolean) {\n    this._disabled = value;\n  }\n\n  public get disabled(): boolean {\n    return this._disabled || false;\n  }\n\n  /**\n   * Indicates whether to close the dropdown when users click away from the menu.\n   * @default true\n   */\n  @Input()\n  public set dismissOnBlur(value: boolean) {\n    this._dismissOnBlur = value;\n  }\n\n  public get dismissOnBlur(): boolean {\n    if (this._dismissOnBlur === undefined) {\n      return true;\n    }\n\n    return this._dismissOnBlur;\n  }\n\n  /**\n   * Specifies an ARIA label for the dropdown. This sets the dropdown's `aria-label` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   */\n  @Input()\n  public label: string;\n\n  /**\n   * Specifies the horizontal alignment of the dropdown menu in relation to the dropdown button.\n   * @default \"left\"\n   */\n  @Input()\n  public set horizontalAlignment(value: SkyDropdownHorizontalAlignment) {\n    this._horizontalAlignment = value;\n  }\n\n  public get horizontalAlignment(): SkyDropdownHorizontalAlignment {\n    return this._horizontalAlignment || 'left';\n  }\n\n  /**\n   * Provides an observable to send commands to the dropdown. The commands should respect\n   * the [[SkyDropdownMessage]] type.\n   */\n\n  @Input()\n  public messageStream = new Subject<SkyDropdownMessage>();\n\n  /**\n   * Specifies a title to display in a tooltip when users hover the mouse over the dropdown button.\n   */\n  @Input()\n  public title: string;\n\n  /**\n   * Specifies how users interact with the dropdown button to expose the dropdown menu.\n   * We recommend the default `click` value because the `hover` value can pose\n   * [accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) issues\n   * for users on touch devices such as phones and tablets.\n   * @deprecated We recommend against using this property. If you choose to use the deprecated\n   * `hover` value anyway, we recommend that you not use it in combination with the `title`\n   * property. (This property will be removed in the next major version release.)\n   * @default \"click\"\n   */\n  @Input()\n  public set trigger(value: SkyDropdownTriggerType) {\n    this._trigger = value;\n  }\n\n  public get trigger(): SkyDropdownTriggerType {\n    return this._trigger || 'click';\n  }\n\n  public set isOpen(value: boolean) {\n    this._isOpen = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public get isOpen(): boolean {\n    return this._isOpen || false;\n  }\n\n  @ViewChild('menuContainerElementRef', {\n    read: ElementRef,\n  })\n  public set menuContainerElementRef(value: ElementRef) {\n    if (value) {\n      this._menuContainerElementRef = value;\n      this.destroyAffixer();\n      this.createAffixer();\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  public get menuContainerElementRef(): ElementRef {\n    return this._menuContainerElementRef;\n  }\n\n  public isMouseEnter: boolean = false;\n\n  public isVisible: boolean = false;\n\n  public menuId: string;\n\n  public menuAriaRole: string;\n\n  @ViewChild('menuContainerTemplateRef', {\n    read: TemplateRef,\n    static: true,\n  })\n  private menuContainerTemplateRef: TemplateRef<any>;\n\n  @ViewChild('triggerButton', {\n    read: ElementRef,\n    static: true,\n  })\n  private triggerButton: ElementRef;\n\n  private affixer: SkyAffixer;\n\n  private ngUnsubscribe = new Subject();\n\n  private overlay: SkyOverlayInstance;\n\n  private _buttonStyle: string;\n\n  private _buttonType: string;\n\n  private _disabled: boolean;\n\n  private _dismissOnBlur: boolean;\n\n  private _horizontalAlignment: SkyDropdownHorizontalAlignment;\n\n  private _isOpen = false;\n\n  private _menuContainerElementRef: ElementRef;\n\n  private _trigger: SkyDropdownTriggerType;\n\n  private _positionTimeout: number;\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private affixService: SkyAffixService,\n    private overlayService: SkyOverlayService,\n    @Optional() private themeSvc?: SkyThemeService\n  ) {}\n\n  public ngOnInit(): void {\n    this.addEventListeners();\n\n    this.messageStream\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((message: SkyDropdownMessage) => {\n        this.handleIncomingMessages(message);\n      });\n\n    // Load proper icons on theme change.\n    this.themeSvc?.settingsChange\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.changeDetector.markForCheck();\n      });\n  }\n\n  public ngOnDestroy(): void {\n    this.destroyAffixer();\n    this.destroyOverlay();\n    clearTimeout(this._positionTimeout);\n\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n    this.ngUnsubscribe = undefined;\n  }\n\n  private addEventListeners(): void {\n    const buttonElement = this.triggerButton.nativeElement;\n\n    observableFromEvent(buttonElement, 'click')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        if (this.isOpen) {\n          this.sendMessage(SkyDropdownMessageType.Close);\n        } else {\n          this.sendMessage(SkyDropdownMessageType.Open);\n          // Wait for dropdown to open, then set focus on first item.\n          setTimeout(() => {\n            this.sendMessage(SkyDropdownMessageType.FocusFirstItem);\n          });\n        }\n      });\n\n    observableFromEvent(buttonElement, 'keydown')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: KeyboardEvent) => {\n        const key = event.key.toLowerCase();\n\n        /* tslint:disable-next-line:switch-default */\n        switch (key) {\n          case 'escape':\n            /*istanbul ignore else*/\n            if (this.isOpen) {\n              this.sendMessage(SkyDropdownMessageType.Close);\n              this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);\n              event.stopPropagation();\n            }\n            break;\n\n          case 'tab':\n            if (this.isOpen && this.dismissOnBlur) {\n              this.sendMessage(SkyDropdownMessageType.Close);\n            }\n            break;\n\n          case 'arrowup':\n          case 'up':\n            if (!this.isOpen) {\n              this.sendMessage(SkyDropdownMessageType.Open);\n              this.sendMessage(SkyDropdownMessageType.FocusLastItem);\n              event.preventDefault();\n              event.stopPropagation();\n            }\n            break;\n\n          case 'enter':\n          case 'arrowdown':\n          case 'down':\n          case ' ': // Spacebar.\n            /*istanbul ignore else*/\n            if (!this.isOpen) {\n              this.sendMessage(SkyDropdownMessageType.Open);\n              this.sendMessage(SkyDropdownMessageType.FocusFirstItem);\n              event.preventDefault();\n              event.stopPropagation();\n            }\n            break;\n        }\n      });\n\n    observableFromEvent(buttonElement, 'mouseenter')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.isMouseEnter = true;\n        if (this.trigger === 'hover') {\n          this.sendMessage(SkyDropdownMessageType.Open);\n        }\n      });\n\n    observableFromEvent(buttonElement, 'mouseleave')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.isMouseEnter = false;\n        if (this.trigger === 'hover') {\n          // Allow the dropdown menu to set isMouseEnter before checking if the close action\n          // should be taken.\n          setTimeout(() => {\n            if (!this.isMouseEnter) {\n              this.sendMessage(SkyDropdownMessageType.Close);\n            }\n          });\n        }\n      });\n  }\n\n  private createOverlay(): void {\n    if (this.overlay) {\n      return;\n    }\n\n    const overlay = this.overlayService.create({\n      enableScroll: true,\n      enablePointerEvents: true,\n    });\n\n    overlay.attachTemplate(this.menuContainerTemplateRef);\n\n    overlay.backdropClick.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      if (this.dismissOnBlur) {\n        this.sendMessage(SkyDropdownMessageType.Close);\n      }\n    });\n\n    this.overlay = overlay;\n  }\n\n  private destroyAffixer(): void {\n    /*istanbul ignore else*/\n    if (this.affixer) {\n      this.affixer.destroy();\n      this.affixer = undefined;\n    }\n  }\n\n  private destroyOverlay(): void {\n    /*istanbul ignore else*/\n    if (this.overlay) {\n      this.overlayService.close(this.overlay);\n      this.overlay = undefined;\n    }\n  }\n\n  private createAffixer(): void {\n    const affixer = this.affixService.createAffixer(\n      this.menuContainerElementRef\n    );\n\n    affixer.placementChange\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((change) => {\n        this.isVisible = change.placement !== null;\n        this.changeDetector.markForCheck();\n      });\n\n    this.affixer = affixer;\n  }\n\n  private handleIncomingMessages(message: SkyDropdownMessage): void {\n    if (!this.disabled) {\n      /* tslint:disable-next-line:switch-default */\n      switch (message.type) {\n        case SkyDropdownMessageType.Open:\n          this.isOpen = true;\n          this.positionDropdownMenu();\n          break;\n\n        case SkyDropdownMessageType.Close:\n          this.isOpen = false;\n          this.destroyOverlay();\n          break;\n\n        case SkyDropdownMessageType.Reposition:\n          // Only reposition the dropdown if it is already open.\n          /* istanbul ignore else */\n          if (this.isOpen && this.affixer) {\n            this.affixer.reaffix();\n          }\n          break;\n\n        case SkyDropdownMessageType.FocusTriggerButton:\n          this.triggerButton.nativeElement.focus();\n          break;\n      }\n    }\n  }\n\n  private sendMessage(type: SkyDropdownMessageType): void {\n    this.messageStream.next({ type });\n  }\n\n  private positionDropdownMenu(): void {\n    this.isVisible = false;\n    this.createOverlay();\n    this.changeDetector.markForCheck();\n\n    // Explicitly declare the `setTimeout` from the `window` object in order to use the DOM typings\n    // during a unit test (instead of confusing this with Node's `setTimeout`).\n    this._positionTimeout = window.setTimeout(() => {\n      this.affixer.affixTo(this.triggerButton.nativeElement, {\n        autoFitContext: SkyAffixAutoFitContext.Viewport,\n        enableAutoFit: true,\n        horizontalAlignment: parseAffixHorizontalAlignment(\n          this.horizontalAlignment\n        ),\n        isSticky: true,\n        placement: 'below',\n      });\n\n      this.isVisible = true;\n      this.changeDetector.markForCheck();\n    });\n  }\n}\n","<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"]}

package/esm2015/lib/modules/dropdown/dropdown.module.js

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkyAffixModule, SkyOverlayModule } from '@skyux/core';
+import { SkyIconModule } from '@skyux/indicators';
+import { SkyThemeModule } from '@skyux/theme';
+import { SkyPopoversResourcesModule } from '../shared/sky-popovers-resources.module';
+import { SkyDropdownButtonComponent } from './dropdown-button.component';
+import { SkyDropdownItemComponent } from './dropdown-item.component';
+import { SkyDropdownMenuComponent } from './dropdown-menu.component';
+import { SkyDropdownComponent } from './dropdown.component';
+import * as i0 from "@angular/core";
+export class SkyDropdownModule {
+}
+SkyDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDropdownModule, imports: [[
+            CommonModule,
+            SkyAffixModule,
+            SkyIconModule,
+            SkyOverlayModule,
+            SkyPopoversResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=dropdown.module.js.map

package/esm2015/lib/modules/dropdown/dropdown.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;;AAwB5D,MAAM,OAAO,iBAAiB;;+GAAjB,iBAAiB;gHAAjB,iBAAiB,iBApB1B,0BAA0B;QAC1B,oBAAoB;QACpB,wBAAwB;QACxB,wBAAwB,aAGxB,YAAY;QACZ,cAAc;QACd,aAAa;QACb,gBAAgB;QAChB,0BAA0B;QAC1B,cAAc,aAGd,0BAA0B;QAC1B,oBAAoB;QACpB,wBAAwB;QACxB,wBAAwB;gHAGf,iBAAiB,YAfnB;YACP,YAAY;YACZ,cAAc;YACd,aAAa;YACb,gBAAgB;YAChB,0BAA0B;YAC1B,cAAc;SACf;4FAQU,iBAAiB;kBAtB7B,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,0BAA0B;wBAC1B,oBAAoB;wBACpB,wBAAwB;wBACxB,wBAAwB;qBACzB;oBACD,OAAO,EAAE;wBACP,YAAY;wBACZ,cAAc;wBACd,aAAa;wBACb,gBAAgB;wBAChB,0BAA0B;wBAC1B,cAAc;qBACf;oBACD,OAAO,EAAE;wBACP,0BAA0B;wBAC1B,oBAAoB;wBACpB,wBAAwB;wBACxB,wBAAwB;qBACzB;iBACF","sourcesContent":["import { CommonModule } from '@angular/common';\n\nimport { NgModule } from '@angular/core';\n\nimport { SkyAffixModule, SkyOverlayModule } from '@skyux/core';\n\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyPopoversResourcesModule } from '../shared/sky-popovers-resources.module';\n\nimport { SkyDropdownButtonComponent } from './dropdown-button.component';\n\nimport { SkyDropdownItemComponent } from './dropdown-item.component';\n\nimport { SkyDropdownMenuComponent } from './dropdown-menu.component';\n\nimport { SkyDropdownComponent } from './dropdown.component';\n\n@NgModule({\n  declarations: [\n    SkyDropdownButtonComponent,\n    SkyDropdownComponent,\n    SkyDropdownItemComponent,\n    SkyDropdownMenuComponent,\n  ],\n  imports: [\n    CommonModule,\n    SkyAffixModule,\n    SkyIconModule,\n    SkyOverlayModule,\n    SkyPopoversResourcesModule,\n    SkyThemeModule,\n  ],\n  exports: [\n    SkyDropdownButtonComponent,\n    SkyDropdownComponent,\n    SkyDropdownItemComponent,\n    SkyDropdownMenuComponent,\n  ],\n})\nexport class SkyDropdownModule {}\n"]}

package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-horizontal-alignment.js.map

package/esm2015/lib/modules/dropdown/types/dropdown-horizontal-alignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-horizontal-alignment.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/types/dropdown-horizontal-alignment.ts"],"names":[],"mappings":"","sourcesContent":["import { SkyAffixHorizontalAlignment } from '@skyux/core';\n\nexport type SkyDropdownHorizontalAlignment = SkyAffixHorizontalAlignment;\n"]}

package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-menu-change.js.map

package/esm2015/lib/modules/dropdown/types/dropdown-menu-change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-change.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/types/dropdown-menu-change.ts"],"names":[],"mappings":"","sourcesContent":["import { SkyDropdownItemComponent } from '../dropdown-item.component';\n\nexport interface SkyDropdownMenuChange {\n  /**\n   * Indicates the active menu index.\n   */\n  activeIndex?: number;\n\n  /**\n   * Indicates the items in the menu.\n   */\n  items?: SkyDropdownItemComponent[];\n\n  /**\n   * Indicates the selected item in the menu.\n   */\n  selectedItem?: SkyDropdownItemComponent;\n}\n"]}

package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js

@@ -0,0 +1,37 @@
+export 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 = {}));
+//# sourceMappingURL=dropdown-message-type.js.map

package/esm2015/lib/modules/dropdown/types/dropdown-message-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-message-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/types/dropdown-message-type.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,sBAyCX;AAzCD,WAAY,sBAAsB;IAChC;;OAEG;IACH,mEAAQ,CAAA;IAER;;OAEG;IACH,qEAAS,CAAA;IAET;;OAEG;IACH,+FAAsB,CAAA;IAEtB;;OAEG;IACH,qFAAiB,CAAA;IAEjB;;OAEG;IACH,6FAAqB,CAAA;IAErB;;;OAGG;IACH,+EAAc,CAAA;IAEd;;OAEG;IACH,uFAAkB,CAAA;IAElB;;OAEG;IACH,qFAAiB,CAAA;AACnB,CAAC,EAzCW,sBAAsB,KAAtB,sBAAsB,QAyCjC","sourcesContent":["export enum SkyDropdownMessageType {\n  /**\n   * Opens the dropdown menu.\n   */\n  Open = 0,\n\n  /**\n   *  Closes the dropdown menu.\n   */\n  Close = 1,\n\n  /**\n   * Puts focus on the dropdown button.\n   */\n  FocusTriggerButton = 2,\n\n  /**\n   * Puts focus on the next item in the dropdown menu.\n   */\n  FocusNextItem = 3,\n\n  /**\n   * Puts focus on the previous item in the dropdown menu.\n   */\n  FocusPreviousItem = 4,\n\n  /**\n   * Repositions the dropdown menu next to the dropdown button. This is useful for when the\n   * dropdown menu's width and height change while it is open.\n   */\n  Reposition = 5,\n\n  /**\n   * Puts focus on the first item in the dropdown menu.\n   */\n  FocusFirstItem = 6,\n\n  /**\n   * Puts focus on the last item in the dropdown menu.\n   */\n  FocusLastItem = 7,\n}\n"]}

package/esm2015/lib/modules/dropdown/types/dropdown-message.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-message.js.map

package/esm2015/lib/modules/dropdown/types/dropdown-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-message.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/types/dropdown-message.ts"],"names":[],"mappings":"","sourcesContent":["import { SkyDropdownMessageType } from './dropdown-message-type';\n\nexport interface SkyDropdownMessage {\n  /**\n   * Indicates the type of message to send.\n   */\n  type?: SkyDropdownMessageType;\n}\n"]}

package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-trigger-type.js.map

package/esm2015/lib/modules/dropdown/types/dropdown-trigger-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-trigger-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/types/dropdown-trigger-type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyDropdownTriggerType = 'click' | 'hover';\n"]}

package/esm2015/lib/modules/popover/popover-adapter.service.js

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export 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: "12.2.16", ngImport: i0, type: SkyPopoverAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyPopoverAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverAdapterService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=popover-adapter.service.js.map