@skyux/popovers 5.0.2 → 5.5.0

package/esm2015/index.js

@@ -0,0 +1,23 @@
+export * from './lib/modules/dropdown/types/dropdown-horizontal-alignment';
+export * from './lib/modules/dropdown/types/dropdown-menu-change';
+export * from './lib/modules/dropdown/types/dropdown-message';
+export * from './lib/modules/dropdown/types/dropdown-message-type';
+export * from './lib/modules/dropdown/types/dropdown-trigger-type';
+export * from './lib/modules/dropdown/dropdown.module';
+export * from './lib/modules/popover/popover.module';
+export * from './lib/modules/popover/types/popover-alignment';
+export * from './lib/modules/popover/types/popover-message';
+export * from './lib/modules/popover/types/popover-message-type';
+export * from './lib/modules/popover/types/popover-placement';
+export * from './lib/modules/popover/types/popover-position';
+export * from './lib/modules/popover/types/popover-trigger';
+// Components and directives must be exported to support Angular's "partial" Ivy compiler.
+// Obscure names are used to indicate types are not part of the public API.
+export { SkyDropdownItemComponent as λ1 } from './lib/modules/dropdown/dropdown-item.component';
+export { SkyDropdownButtonComponent as λ2 } from './lib/modules/dropdown/dropdown-button.component';
+export { SkyDropdownComponent as λ3 } from './lib/modules/dropdown/dropdown.component';
+export { SkyDropdownMenuComponent as λ4 } from './lib/modules/dropdown/dropdown-menu.component';
+export { SkyPopoverContentComponent as λ5 } from './lib/modules/popover/popover-content.component';
+export { SkyPopoverComponent as λ6 } from './lib/modules/popover/popover.component';
+export { SkyPopoverDirective as λ7 } from './lib/modules/popover/popover.directive';
+//# sourceMappingURL=index.js.map

package/esm2015/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/popovers/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4DAA4D,CAAC;AAC3E,cAAc,mDAAmD,CAAC;AAClE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oDAAoD,CAAC;AACnE,cAAc,oDAAoD,CAAC;AACnE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,6CAA6C,CAAC;AAE5D,0FAA0F;AAC1F,2EAA2E;AAC3E,OAAO,EAAE,wBAAwB,IAAI,EAAE,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,0BAA0B,IAAI,EAAE,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,oBAAoB,IAAI,EAAE,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,wBAAwB,IAAI,EAAE,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,0BAA0B,IAAI,EAAE,EAAE,MAAM,iDAAiD,CAAC;AACnG,OAAO,EAAE,mBAAmB,IAAI,EAAE,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,mBAAmB,IAAI,EAAE,EAAE,MAAM,yCAAyC,CAAC","sourcesContent":["export * from './lib/modules/dropdown/types/dropdown-horizontal-alignment';\nexport * from './lib/modules/dropdown/types/dropdown-menu-change';\nexport * from './lib/modules/dropdown/types/dropdown-message';\nexport * from './lib/modules/dropdown/types/dropdown-message-type';\nexport * from './lib/modules/dropdown/types/dropdown-trigger-type';\nexport * from './lib/modules/dropdown/dropdown.module';\n\nexport * from './lib/modules/popover/popover.module';\nexport * from './lib/modules/popover/types/popover-alignment';\nexport * from './lib/modules/popover/types/popover-message';\nexport * from './lib/modules/popover/types/popover-message-type';\nexport * from './lib/modules/popover/types/popover-placement';\nexport * from './lib/modules/popover/types/popover-position';\nexport * from './lib/modules/popover/types/popover-trigger';\n\n// Components and directives must be exported to support Angular's \"partial\" Ivy compiler.\n// Obscure names are used to indicate types are not part of the public API.\nexport { SkyDropdownItemComponent as λ1 } from './lib/modules/dropdown/dropdown-item.component';\nexport { SkyDropdownButtonComponent as λ2 } from './lib/modules/dropdown/dropdown-button.component';\nexport { SkyDropdownComponent as λ3 } from './lib/modules/dropdown/dropdown.component';\nexport { SkyDropdownMenuComponent as λ4 } from './lib/modules/dropdown/dropdown-menu.component';\nexport { SkyPopoverContentComponent as λ5 } from './lib/modules/popover/popover-content.component';\nexport { SkyPopoverComponent as λ6 } from './lib/modules/popover/popover.component';\nexport { SkyPopoverDirective as λ7 } from './lib/modules/popover/popover.directive';\n"]}

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SkyDropdownButtonComponent {
+}
+SkyDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDropdownButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-dropdown-button',
+                    templateUrl: './dropdown-button.component.html',
+                }]
+        }] });
+//# sourceMappingURL=dropdown-button.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-button.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-button.component.ts","../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-button.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAM1C,MAAM,OAAO,0BAA0B;;wHAA1B,0BAA0B;4GAA1B,0BAA0B,2DCNvC,6BACA;4FDKa,0BAA0B;kBAJtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,WAAW,EAAE,kCAAkC;iBAChD","sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'sky-dropdown-button',\n  templateUrl: './dropdown-button.component.html',\n})\nexport class SkyDropdownButtonComponent {}\n","<ng-content></ng-content>\n"]}

package/esm2015/lib/modules/dropdown/dropdown-extensions.js

@@ -0,0 +1,14 @@
+export 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}'!`;
+    }
+}
+//# sourceMappingURL=dropdown-extensions.js.map

package/esm2015/lib/modules/dropdown/dropdown-extensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-extensions.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-extensions.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,6BAA6B,CAC3C,SAAyC;IAEzC,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,0BAA0B;QAC1B;YACE,MAAM,mEAAmE,SAAS,IAAI,CAAC;KAC1F;AACH,CAAC","sourcesContent":["import { SkyAffixHorizontalAlignment } from '@skyux/core';\n\nimport { SkyDropdownHorizontalAlignment } from './types/dropdown-horizontal-alignment';\n\nexport function parseAffixHorizontalAlignment(\n  alignment: SkyDropdownHorizontalAlignment\n): SkyAffixHorizontalAlignment {\n  switch (alignment) {\n    case 'center':\n      return 'center';\n    case 'left':\n      return 'left';\n    case 'right':\n      return 'right';\n    /* istanbul ignore next */\n    default:\n      throw `SkyAffixHorizontalAlignment does not have a matching value for '${alignment}'!`;\n  }\n}\n"]}

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

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export 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: "12.2.16", 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: "12.2.16", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-dropdown-item',
+                    templateUrl: './dropdown-item.component.html',
+                    styleUrls: ['./dropdown-item.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { ariaRole: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=dropdown-item.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-item.component.ts","../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-item.component.html"],"names":[],"mappings":"AAAA,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,iBAAiB,GAClB,MAAM,eAAe,CAAC;;;AASvB,MAAM,OAAO,wBAAwB;IA4BnC,YACS,UAAsB,EACrB,cAAiC,EACjC,QAAmB;QAFpB,eAAU,GAAV,UAAU,CAAY;QACrB,mBAAc,GAAd,cAAc,CAAmB;QACjC,aAAQ,GAAR,QAAQ,CAAW;QATtB,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;IAQvB,CAAC;IA/BJ;;;;;;;OAOG;IACH,IACW,QAAQ,CAAC,KAAa;QAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,IAAI,UAAU,CAAC;IACtC,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjE,CAAC;IAcM,eAAe;QACpB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAEtC,0CAA0C;QAC1C,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,0BAA0B;QAC1B,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC;SAC5D;QAED,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;IACtC,CAAC;IAEM,YAAY,CAAC,iBAA0B;QAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,IAAI,iBAAiB,EAAE;YACrB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;QAED,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;IACtC,CAAC;IAEM,WAAW;QAChB,mCAAmC;QACnC,MAAM,WAAW,GACf,IAAI,CAAC,aAAa;YAClB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;QACvD,kBAAkB;QAClB,OAAO,WAAW,CAAC;IACrB,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;;sHArEU,wBAAwB;0GAAxB,wBAAwB,2FClBrC,6NAUA;4FDQa,wBAAwB;kBAPpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,WAAW,EAAE,gCAAgC;oBAC7C,SAAS,EAAE,CAAC,gCAAgC,CAAC;oBAC7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;yJAWY,QAAQ;sBADlB,KAAK","sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  Renderer2,\n  ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n  selector: 'sky-dropdown-item',\n  templateUrl: './dropdown-item.component.html',\n  styleUrls: ['./dropdown-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyDropdownItemComponent implements AfterViewInit {\n  /**\n   * Specifies an ARIA role for the dropdown menu item\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n   * by indicating how the item functions and what it controls. For information about\n   * how an ARIA role indicates what an item represents on a web page, see the\n   * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).\n   * @default \"menuitem\"\n   */\n  @Input()\n  public set ariaRole(value: string) {\n    this._ariaRole = value;\n  }\n\n  public get ariaRole(): string {\n    return this._ariaRole || 'menuitem';\n  }\n\n  public get buttonElement(): HTMLButtonElement {\n    return this.elementRef.nativeElement.querySelector('button,a');\n  }\n\n  public isActive = false;\n\n  public isDisabled = false;\n\n  private _ariaRole: string;\n\n  public constructor(\n    public elementRef: ElementRef,\n    private changeDetector: ChangeDetectorRef,\n    private renderer: Renderer2\n  ) {}\n\n  public ngAfterViewInit(): void {\n    this.isDisabled = !this.isFocusable();\n\n    // Make sure anchor elements are tab-able.\n    const buttonElement = this.buttonElement;\n    /* istanbul ignore else */\n    if (buttonElement) {\n      this.renderer.setAttribute(buttonElement, 'tabIndex', '0');\n    }\n\n    this.changeDetector.detectChanges();\n  }\n\n  public focusElement(enableNativeFocus: boolean): void {\n    this.isActive = true;\n\n    if (enableNativeFocus) {\n      this.buttonElement.focus();\n    }\n\n    this.changeDetector.detectChanges();\n  }\n\n  public isFocusable(): boolean {\n    /*tslint:disable no-null-keyword */\n    const isFocusable =\n      this.buttonElement &&\n      this.buttonElement.getAttribute('disabled') === null;\n    /*tslint:enable */\n    return isFocusable;\n  }\n\n  public resetState(): void {\n    this.isActive = false;\n    this.changeDetector.markForCheck();\n  }\n}\n","<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"]}

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

@@ -0,0 +1,307 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, Optional, Output, QueryList, ViewEncapsulation, } from '@angular/core';
+import { fromEvent as observableFromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyDropdownComponent } from './dropdown.component';
+import { SkyDropdownItemComponent } from './dropdown-item.component';
+import { SkyDropdownMessageType } from './types/dropdown-message-type';
+import * as i0 from "@angular/core";
+import * as i1 from "./dropdown.component";
+let nextId = 0;
+export 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;
+        observableFromEvent(dropdownMenuElement, 'click')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            this.selectItemByEventTarget(event.target);
+        });
+        observableFromEvent(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;
+            }
+        });
+        observableFromEvent(dropdownMenuElement, 'mouseenter')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.dropdownComponent.isMouseEnter = true;
+        });
+        observableFromEvent(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: "12.2.16", ngImport: i0, type: SkyDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDropdownMenuComponent, selector: "sky-dropdown-menu", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", useNativeFocus: "useNativeFocus" }, outputs: { menuChanges: "menuChanges" }, queries: [{ propertyName: "menuItems", predicate: SkyDropdownItemComponent, descendants: true }], ngImport: i0, 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: "12.2.16", ngImport: i0, type: SkyDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-dropdown-menu',
+                    templateUrl: './dropdown-menu.component.html',
+                    styleUrls: ['./dropdown-menu.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyDropdownComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { ariaLabelledBy: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], useNativeFocus: [{
+                type: Input
+            }], menuChanges: [{
+                type: Output
+            }], menuItems: [{
+                type: ContentChildren,
+                args: [SkyDropdownItemComponent, { descendants: true }]
+            }] } });
+//# sourceMappingURL=dropdown-menu.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-menu.component.ts","../../../../../../../../libs/components/popovers/src/lib/modules/dropdown/dropdown-menu.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Optional,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { fromEvent as observableFromEvent, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyDropdownComponent } from './dropdown.component';\n\nimport { SkyDropdownItemComponent } from './dropdown-item.component';\n\nimport { SkyDropdownMenuChange } from './types/dropdown-menu-change';\n\nimport { SkyDropdownMessage } from './types/dropdown-message';\n\nimport { SkyDropdownMessageType } from './types/dropdown-message-type';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'sky-dropdown-menu',\n  templateUrl: './dropdown-menu.component.html',\n  styleUrls: ['./dropdown-menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyDropdownMenuComponent implements AfterContentInit, OnDestroy {\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that labels\n   * the dropdown menu. This sets the dropdown menu's `aria-labelledby` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   */\n  @Input()\n  public ariaLabelledBy: string;\n\n  /**\n   * Specifies an ARIA role for the dropdown menu\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n   * by indicating how the dropdown menu functions and what it controls. The dropdown button\n   * inherits this value to set its `aria-haspopup` property. For information\n   * about how an ARIA role indicates what an item represents on a web page, see the\n   * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).\n   * @default \"menu\"\n   */\n  @Input()\n  public set ariaRole(value: string) {\n    this._ariaRole = value;\n  }\n\n  public get ariaRole(): string {\n    return this._ariaRole || 'menu';\n  }\n\n  /**\n   * Indicates whether to use the browser's native focus function when users navigate through menu\n   * items with the keyboard. To disable the native focus function, set this property to `false`.\n   * For example, to let users interact with the dropdown menu but keep the keyboard focus on a\n   * different element, set this property to `false`.\n   * @default true\n   */\n  @Input()\n  public set useNativeFocus(value: boolean) {\n    this._useNativeFocus = value;\n  }\n\n  public get useNativeFocus(): boolean {\n    if (this._useNativeFocus === undefined) {\n      return true;\n    }\n\n    return this._useNativeFocus;\n  }\n\n  /**\n   * Fires when the dropdown menu's active index or selected item changes. This event provides an\n   * observable to emit changes, and the response is of\n   * the SkyDropdownMenuChange type.\n   */\n  @Output()\n  public menuChanges = new EventEmitter<SkyDropdownMenuChange>();\n\n  public dropdownMenuId: string = `sky-dropdown-menu-${++nextId}`;\n\n  private get hasFocusableItems(): boolean {\n    const found = this.menuItems.find((item) => item.isFocusable());\n    return found !== undefined;\n  }\n\n  public set menuIndex(value: number) {\n    if (value < 0) {\n      value = this.menuItems.length - 1;\n    }\n\n    if (value >= this.menuItems.length) {\n      value = 0;\n    }\n\n    this._menuIndex = value;\n  }\n\n  public get menuIndex(): number {\n    return this._menuIndex;\n  }\n\n  @ContentChildren(SkyDropdownItemComponent, { descendants: true })\n  public menuItems: QueryList<SkyDropdownItemComponent>;\n\n  private ngUnsubscribe = new Subject();\n\n  private _ariaRole: string;\n\n  private _menuIndex = 0;\n\n  private _useNativeFocus: boolean;\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private elementRef: ElementRef,\n    @Optional() private dropdownComponent: SkyDropdownComponent\n  ) {}\n\n  public ngAfterContentInit(): void {\n    /* istanbul ignore else */\n    if (this.dropdownComponent) {\n      this.dropdownComponent.menuId = this.dropdownMenuId;\n      this.dropdownComponent.menuAriaRole = this.ariaRole;\n\n      this.dropdownComponent.messageStream\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((message: SkyDropdownMessage) => {\n          /* tslint:disable-next-line:switch-default */\n          switch (message.type) {\n            case SkyDropdownMessageType.Open:\n            case SkyDropdownMessageType.Close:\n              this.reset();\n              break;\n\n            case SkyDropdownMessageType.FocusFirstItem:\n              this.focusFirstItem();\n              break;\n\n            case SkyDropdownMessageType.FocusNextItem:\n              this.focusNextItem();\n              break;\n\n            case SkyDropdownMessageType.FocusPreviousItem:\n              this.focusPreviousItem();\n              break;\n\n            case SkyDropdownMessageType.FocusLastItem:\n              this.focusLastItem();\n              break;\n          }\n        });\n\n      this.menuChanges\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((change: SkyDropdownMenuChange) => {\n          // Close the dropdown when a menu item is selected.\n          if (change.selectedItem) {\n            this.sendMessage(SkyDropdownMessageType.Close);\n            this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);\n          }\n\n          if (change.items) {\n            // Update the popover style and position whenever the number of items changes.\n            this.sendMessage(SkyDropdownMessageType.Reposition);\n          }\n        });\n    }\n\n    // Reset dropdown whenever the menu items change.\n    this.menuItems.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((items: QueryList<SkyDropdownItemComponent>) => {\n        this.reset();\n        this.menuChanges.emit({\n          items: items.toArray(),\n        });\n      });\n\n    this.addEventListeners();\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n    this.ngUnsubscribe = undefined;\n  }\n\n  public focusFirstItem(): void {\n    if (!this.hasFocusableItems) {\n      return;\n    }\n\n    this.menuIndex = 0;\n\n    const firstItem = this.getItemByIndex(this.menuIndex);\n    if (firstItem && firstItem.isFocusable()) {\n      this.focusItem(firstItem);\n    } else {\n      this.focusNextItem();\n    }\n  }\n\n  public focusLastItem(): void {\n    if (!this.hasFocusableItems) {\n      return;\n    }\n\n    this.menuIndex = this.menuItems.length - 1;\n\n    const lastItem = this.getItemByIndex(this.menuIndex);\n    if (lastItem && lastItem.isFocusable()) {\n      this.focusItem(lastItem);\n    } else {\n      this.focusPreviousItem();\n    }\n  }\n\n  public focusPreviousItem(): void {\n    if (!this.hasFocusableItems) {\n      return;\n    }\n\n    this.menuIndex--;\n\n    const previousItem = this.getItemByIndex(this.menuIndex);\n    if (previousItem && previousItem.isFocusable()) {\n      this.focusItem(previousItem);\n    } else {\n      this.focusPreviousItem();\n    }\n  }\n\n  public focusNextItem() {\n    if (!this.hasFocusableItems) {\n      return;\n    }\n\n    this.menuIndex++;\n\n    const nextItem = this.getItemByIndex(this.menuIndex);\n    if (nextItem && nextItem.isFocusable()) {\n      this.focusItem(nextItem);\n    } else {\n      this.focusNextItem();\n    }\n  }\n\n  public reset(): void {\n    this._menuIndex = -1;\n    this.resetItemsActiveState();\n    this.changeDetector.markForCheck();\n  }\n\n  private resetItemsActiveState() {\n    this.menuItems.forEach((item: SkyDropdownItemComponent) => {\n      item.resetState();\n    });\n  }\n\n  private focusItem(item: SkyDropdownItemComponent): void {\n    this.resetItemsActiveState();\n    item.focusElement(this.useNativeFocus);\n    this.menuChanges.emit({\n      activeIndex: this.menuIndex,\n    });\n  }\n\n  private getItemByIndex(index: number): SkyDropdownItemComponent {\n    return this.menuItems.find((item: any, i: number) => {\n      return i === index;\n    });\n  }\n\n  private selectItemByEventTarget(target: EventTarget): void {\n    const selectedItem = this.menuItems.find(\n      (item: SkyDropdownItemComponent, i: number) => {\n        const found = item.elementRef.nativeElement.contains(target);\n\n        if (found) {\n          this.menuIndex = i;\n          this.menuChanges.next({\n            activeIndex: this.menuIndex,\n          });\n        }\n\n        return found;\n      }\n    );\n\n    /* istanbul ignore else */\n    if (selectedItem) {\n      this.menuChanges.next({\n        selectedItem,\n      });\n    }\n  }\n\n  private sendMessage(type: SkyDropdownMessageType): void {\n    this.dropdownComponent.messageStream.next({ type });\n  }\n\n  private addEventListeners(): void {\n    const dropdownMenuElement = this.elementRef.nativeElement;\n\n    observableFromEvent(dropdownMenuElement, 'click')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: MouseEvent) => {\n        this.selectItemByEventTarget(event.target);\n      });\n\n    observableFromEvent(dropdownMenuElement, '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            this.sendMessage(SkyDropdownMessageType.Close);\n            this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);\n            event.stopPropagation();\n            event.preventDefault();\n            break;\n\n          case 'arrowdown':\n          case 'down':\n            this.focusNextItem();\n            event.preventDefault();\n            break;\n\n          case 'arrowup':\n          case 'up':\n            this.focusPreviousItem();\n            event.preventDefault();\n            break;\n\n          case 'tab':\n            if (this.dropdownComponent.dismissOnBlur) {\n              this.sendMessage(SkyDropdownMessageType.Close);\n            }\n            this.sendMessage(SkyDropdownMessageType.FocusTriggerButton);\n            break;\n        }\n      });\n\n    observableFromEvent(dropdownMenuElement, 'mouseenter')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.dropdownComponent.isMouseEnter = true;\n      });\n\n    observableFromEvent(dropdownMenuElement, 'mouseleave')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.dropdownComponent.isMouseEnter = false;\n        // Allow the dropdown component to set isMouseEnter before checking if the close action\n        // should be taken.\n        setTimeout(() => {\n          if (\n            this.dropdownComponent.trigger === 'hover' &&\n            this.dropdownComponent.isMouseEnter === false\n          ) {\n            this.sendMessage(SkyDropdownMessageType.Close);\n          }\n        });\n      });\n  }\n}\n","<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"]}