@skyux/popovers 5.8.4 → 5.9.2

package/fesm2015/skyux-popovers.js

@@ -13,6 +13,7 @@ import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } fro
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 
 /**
  * Specifies the type of message to send.
@@ -1151,18 +1152,11 @@ class SkyPopoverContentComponent {
                 isSticky: true,
                 placement: parseAffixPlacement(this.placement),
             };
-            // Ensure that we are positioning the vertical alginment correctly. These
-            // are the default alignments for all popovers but ensure that we are future proof here.
+            // Ensure vertical alignment is set according to the popover's placement value.
             if (affixOptions.placement === 'left' ||
                 affixOptions.placement === 'right') {
                 affixOptions.verticalAlignment = 'middle';
             }
-            else if (affixOptions.placement === 'above') {
-                affixOptions.verticalAlignment = 'bottom';
-            }
-            else {
-                affixOptions.verticalAlignment = 'top';
-            }
             this.affixer.affixTo(this.caller.nativeElement, affixOptions);
             this.updateArrowOffset();
             this.isOpen = true;
@@ -1314,8 +1308,7 @@ class SkyPopoverComponent {
     }
     /**
      * Specifies the horizontal alignment of the popover in relation to the trigger element.
-     * The `skyPopoverAlignment` property on the popover directive overwrites this property.
-     * Options include:`"center"`, `"right"`, and `'"left"`.
+     * The `skyPopoverAlignment` property on the popover directive takes precedence over this property when specified.
      * @default "center"
      */
     set alignment(value) {
@@ -1340,8 +1333,7 @@ class SkyPopoverComponent {
     }
     /**
      * Specifies the placement of the popover in relation to the trigger element.
-     * The `skyPopoverPlacement` property on the popover directive overwrites this property.
-     * Options include:`"above"`, `"below"`, `"right"`, and `"left"`.
+     * The `skyPopoverPlacement` property on the popover directive takes precedence over this property when specified.
      * @default "above"
      */
     set placement(value) {
@@ -1505,14 +1497,24 @@ var SkyPopoverMessageType;
     SkyPopoverMessageType[SkyPopoverMessageType["Focus"] = 3] = "Focus";
 })(SkyPopoverMessageType || (SkyPopoverMessageType = {}));
 
+var _SkyPopoverDirective_messageStreamSub;
 class SkyPopoverDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
-        /**
-         * Provides an observable to send commands to the popover that respect the `SkyPopoverMessage` type.
-         */
-        this.skyPopoverMessageStream = new Subject();
+        this._skyPopoverMessageStream = new Subject();
+        _SkyPopoverDirective_messageStreamSub.set(this, void 0);
         this.ngUnsubscribe = new Subject();
+        this.subscribeMessageStream();
+    }
+    /**
+     * Provides an RxJS `Subject` to send commands to the popover that respect the `SkyPopoverMessage` type.
+     */
+    set skyPopoverMessageStream(value) {
+        this._skyPopoverMessageStream = value !== null && value !== void 0 ? value : new Subject();
+        this.subscribeMessageStream();
+    }
+    get skyPopoverMessageStream() {
+        return this._skyPopoverMessageStream;
     }
     /**
      * Specifies the user action that displays the popover.
@@ -1528,6 +1530,7 @@ class SkyPopoverDirective {
     }
     ngOnDestroy() {
         this.removeEventListeners();
+        this.unsubscribeMessageStream();
     }
     togglePopover() {
         if (this.skyPopover.isActive) {
@@ -1552,11 +1555,6 @@ class SkyPopoverDirective {
     }
     addEventListeners() {
         const element = this.elementRef.nativeElement;
-        this.skyPopoverMessageStream
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((message) => {
-            this.handleIncomingMessages(message);
-        });
         fromEvent(element, 'keydown')
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((event) => {
@@ -1655,7 +1653,20 @@ class SkyPopoverDirective {
     sendMessage(messageType) {
         this.skyPopoverMessageStream.next({ type: messageType });
     }
+    subscribeMessageStream() {
+        this.unsubscribeMessageStream();
+        __classPrivateFieldSet(this, _SkyPopoverDirective_messageStreamSub, this.skyPopoverMessageStream.subscribe((message) => {
+            this.handleIncomingMessages(message);
+        }), "f");
+    }
+    unsubscribeMessageStream() {
+        if (__classPrivateFieldGet(this, _SkyPopoverDirective_messageStreamSub, "f")) {
+            __classPrivateFieldGet(this, _SkyPopoverDirective_messageStreamSub, "f").unsubscribe();
+            __classPrivateFieldSet(this, _SkyPopoverDirective_messageStreamSub, undefined, "f");
+        }
+    }
 }
+_SkyPopoverDirective_messageStreamSub = new WeakMap();
 SkyPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 SkyPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyPopoverDirective, selector: "[skyPopover]", inputs: { skyPopover: "skyPopover", skyPopoverAlignment: "skyPopoverAlignment", skyPopoverMessageStream: "skyPopoverMessageStream", skyPopoverPlacement: "skyPopoverPlacement", skyPopoverTrigger: "skyPopoverTrigger" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyPopoverDirective, decorators: [{