@skyux/popovers 4.5.2 → 4.7.1

package/fesm5/skyux-popovers.js

@@ -343,6 +343,7 @@ var SkyDropdownComponent = /** @class */ (function () {
     SkyDropdownComponent.prototype.ngOnDestroy = function () {
         this.destroyAffixer();
         this.destroyOverlay();
+        clearTimeout(this._positionTimeout);
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
         this.ngUnsubscribe = undefined;
@@ -506,7 +507,7 @@ var SkyDropdownComponent = /** @class */ (function () {
         this.isVisible = false;
         this.createOverlay();
         this.changeDetector.markForCheck();
-        setTimeout(function () {
+        this._positionTimeout = setTimeout(function () {
             _this.affixer.affixTo(_this.triggerButton.nativeElement, {
                 autoFitContext: SkyAffixAutoFitContext.Viewport,
                 enableAutoFit: true,
@@ -573,7 +574,7 @@ var SkyDropdownComponent = /** @class */ (function () {
             selector: 'sky-dropdown',
             template: "<div\n  class=\"sky-dropdown\"\n>\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]=\"label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\"\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'\"\n          icon=\"ellipsis-h\"\n        ></sky-icon>\n        <sky-icon *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div\n            class=\"sky-dropdown-button-content-container\"\n          >\n            <ng-content\n              select=\"sky-dropdown-button\"\n            >\n            </ng-content>\n          </div>\n          <div\n            class=\"sky-dropdown-button-icon-container\"\n          >\n            <sky-icon *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\">\n          <sky-icon\n            [icon]=\"buttonType\"\n            size=\"lg\"\n          ></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template\n  #menuContainerTemplateRef\n>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content\n      select=\"sky-dropdown-menu\"\n    ></ng-content>\n  </div>\n</ng-template>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [".sky-dropdown-button-type-tab{border:none;border-radius:4px 4px 0 0;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.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:0;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){text-decoration:none;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}.sky-theme-modern .sky-dropdown-button-type-tab,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab{border:none;border-radius:0;font-weight:400;padding:10px 15px;transition:box-shadow 150ms;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),: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:1px solid #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:0}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active),:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-dropdown-button-type-tab:active,:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:3px solid #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active),:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:3px solid #1870b8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled),:host-context(.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,: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}.sky-theme-modern .sky-dropdown-caret,:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab,:host-context(.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,:host-context(.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,: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}"]
+            styles: [".sky-dropdown-button-type-tab{border:none;border-radius:4px 4px 0 0;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.sky-btn-tab-disabled{background-color:#cdcfd2;cursor:default;outline:0;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){text-decoration:none;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 150ms;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:1px solid #00b4f1;padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:0}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus:not(:active){outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{border-bottom:3px solid #00b4f1;padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:not(:active){border-bottom:3px solid #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 150ms;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:1px solid #00b4f1;padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus{background-color:transparent;outline:0}.sky-theme-modern .sky-dropdown-button-type-tab:focus:not(:active){outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-dropdown-button-type-tab:active{border-bottom:3px solid #00b4f1;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:not(:active){border-bottom:3px solid #1870b8;padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:transparent;color:#212327}.sky-theme-modern .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern .sky-dropdown-button-type-tab .sky-tab-header-count{color:#686c73}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}"]
         }),
         __param(3, Optional())
     ], SkyDropdownComponent);
@@ -889,7 +890,7 @@ var SkyDropdownMenuComponent = /** @class */ (function () {
         Output()
     ], SkyDropdownMenuComponent.prototype, "menuChanges", void 0);
     __decorate([
-        ContentChildren(SkyDropdownItemComponent)
+        ContentChildren(SkyDropdownItemComponent, { descendants: true })
     ], SkyDropdownMenuComponent.prototype, "menuItems", void 0);
     SkyDropdownMenuComponent = __decorate([
         Component({
@@ -1086,6 +1087,7 @@ var SkyPopoverContentComponent = /** @class */ (function () {
         this.dismissOnBlur = true;
         this.enableAnimations = true;
         this.isOpen = false;
+        this.popoverType = 'info';
         this.ngUnsubscribe = new Subject();
         this._closed = new Subject();
         this._isMouseEnter = new Subject();
@@ -1123,6 +1125,7 @@ var SkyPopoverContentComponent = /** @class */ (function () {
         var _this = this;
         this.contentTarget.createEmbeddedView(this.context.contentTemplateRef);
         this.addEventListeners();
+        /*istanbul ignore else*/
         if (this.themeSvc) {
             this.themeSvc.settingsChange
                 .pipe(takeUntil(this.ngUnsubscribe))
@@ -1170,6 +1173,9 @@ var SkyPopoverContentComponent = /** @class */ (function () {
         this.horizontalAlignment = config.horizontalAlignment;
         this.placement = config.placement;
         this.popoverTitle = config.popoverTitle;
+        if (config.popoverType) {
+            this.popoverType = config.popoverType;
+        }
         this.changeDetector.markForCheck();
         // Indicates if the popover should be displayed statically.
         // Please note: This feature is internal-only and used by the visual tests to capture multiple
@@ -1182,6 +1188,11 @@ var SkyPopoverContentComponent = /** @class */ (function () {
         }
         // Let the styles render before gauging the affix dimensions.
         setTimeout(function () {
+            var _a;
+            /*istanbul ignore next*/
+            if (!((_a = _this.popoverRef) === null || _a === void 0 ? void 0 : _a.nativeElement) || !_this.ngUnsubscribe || _this.ngUnsubscribe.isStopped) {
+                return;
+            }
             if (!_this.affixer) {
                 _this.setupAffixer();
             }
@@ -1324,9 +1335,9 @@ var SkyPopoverContentComponent = /** @class */ (function () {
     SkyPopoverContentComponent = __decorate([
         Component({
             selector: 'sky-popover-content',
-            template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1 *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n",
+            template: "<div\n  class=\"sky-popover-container sky-popover-max-height\"\n  [@.disabled]=\"!enableAnimations\"\n  [@skyPopoverAnimation]=\"animationState\"\n  [class.sky-popover-hidden]=\"!placement\"\n  [ngClass]=\"[\n    'sky-popover-alignment-' + horizontalAlignment,\n    'sky-popover-placement-' + placement,\n    'sky-popover-' + popoverType\n  ]\"\n  (@skyPopoverAnimation.done)=\"onAnimationEvent($event)\"\n  (@skyPopoverAnimation.start)=\"onAnimationEvent($event)\"\n  #popoverRef\n>\n  <div\n    class=\"sky-popover\"\n    tabindex=\"-1\"\n    [skyThemeClass]=\"{\n      'sky-rounded-corners sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n  >\n    <header *ngIf=\"popoverTitle\"\n      class=\"sky-popover-header\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg sky-margin-stacked-lg': 'modern'\n      }\"\n    >\n      <h1 *ngIf=\"popoverTitle\"\n        class=\"sky-popover-title\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-emphasized': 'modern'\n        }\"\n      >\n        {{ popoverTitle }}\n      </h1>\n    </header>\n    <div\n      class=\"sky-popover-body\"\n      [skyThemeClass]=\"{\n        'sky-padding-even-default': 'default',\n        'sky-padding-even-lg': 'modern'\n      }\"\n    >\n      <ng-container #contentTarget></ng-container>\n    </div>\n    <span\n      aria-hidden=\"true\"\n      class=\"sky-popover-arrow\"\n      [style.left.px]=\"arrowLeft\"\n      [style.top.px]=\"arrowTop\"\n      #arrowRef\n    ></span>\n  </div>\n</div>\n",
             animations: [skyPopoverAnimation],
-            styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:0}@media (max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-theme-modern .sky-popover,:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow,:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above,:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover,:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow,:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:10px solid #00b4f1;border-right:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below,:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover,:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow,:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right,:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover,:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow,:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left,:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover,:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow,:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:10px solid #00b4f1;border-right:10px solid #00b4f1}"]
+            styles: [".sky-popover-container{position:fixed;min-width:276px;max-width:276px}.sky-popover-container.sky-popover-hidden{visibility:hidden;opacity:0;pointer-events:none!important}.sky-popover-container.sky-popover-hidden *{pointer-events:none!important}.sky-popover-container.sky-popover-static .sky-popover-arrow{position:absolute}.sky-popover-container:focus{outline:0}@media (max-width:276px){.sky-popover-container{max-width:100%;min-width:auto}}.sky-popover{background-color:#fff}.sky-popover-header{padding-bottom:0}.sky-popover-header+.sky-popover-body{padding-top:2px}.sky-popover-title{margin:0}.sky-popover-arrow{width:0;height:0;position:fixed;border:10px solid transparent}.sky-popover-placement-above{padding-bottom:10px}.sky-popover-placement-above .sky-popover{border-bottom:10px solid #00b4f1}.sky-popover-placement-above .sky-popover-arrow{border-bottom:0;border-top-color:#00b4f1;bottom:0;left:50%;margin-left:-10px}.sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-top-color:#ef4044}.sky-popover-placement-below{padding-top:10px}.sky-popover-placement-below .sky-popover{border-top:10px solid #00b4f1}.sky-popover-placement-below .sky-popover-arrow{border-top:0;border-bottom-color:#00b4f1;top:0;left:50%;margin-left:-10px}.sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-bottom-color:#ef4044}.sky-popover-placement-right{padding-left:10px}.sky-popover-placement-right .sky-popover{border-left:10px solid #00b4f1}.sky-popover-placement-right .sky-popover-arrow{border-left:0;border-right-color:#00b4f1;left:0;top:50%;margin-top:-10px}.sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-right-color:#ef4044}.sky-popover-placement-left{padding-right:10px}.sky-popover-placement-left .sky-popover{border-right:10px solid #00b4f1}.sky-popover-placement-left .sky-popover-arrow{border-right:0;border-left-color:#00b4f1;right:0;top:50%;margin-top:-10px}.sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-left-color:#ef4044}.sky-popover-placement-above.sky-popover-alignment-left .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-left .sky-popover-arrow{left:40px;right:auto}.sky-popover-placement-above.sky-popover-alignment-right .sky-popover-arrow,.sky-popover-placement-below.sky-popover-alignment-right .sky-popover-arrow{left:auto;right:40px}.sky-popover-max-height .sky-popover{overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}:host-context(.sky-theme-modern) .sky-popover{border-radius:6px}:host-context(.sky-theme-modern) .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}:host-context(.sky-theme-modern) .sky-popover-placement-above{padding-bottom:10px}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:10px solid #00b4f1;border-right:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-color:transparent #ef4044 #ef4044 transparent}:host-context(.sky-theme-modern) .sky-popover-placement-below{padding-top:10px}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:10px solid #00b4f1;border-left:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 transparent transparent #ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right{padding-left:10px}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:10px solid #00b4f1;border-left:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-color:transparent transparent #ef4044 #ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left{padding-right:10px}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:10px solid #00b4f1;border-right:10px solid #00b4f1}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}:host-context(.sky-theme-modern) .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 #ef4044 transparent transparent}.sky-theme-modern .sky-popover{border-radius:6px}.sky-theme-modern .sky-popover-arrow{transform:rotate(45deg);border-color:transparent}.sky-theme-modern .sky-popover-placement-above{padding-bottom:10px}.sky-theme-modern .sky-popover-placement-above .sky-popover{border-bottom:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above .sky-popover-arrow{bottom:1px;border-radius:0 0 3px;border-bottom:10px solid #00b4f1;border-right:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover{border-bottom-color:#ef4044}.sky-theme-modern .sky-popover-placement-above.sky-popover-danger .sky-popover-arrow{border-color:transparent #ef4044 #ef4044 transparent}.sky-theme-modern .sky-popover-placement-below{padding-top:10px}.sky-theme-modern .sky-popover-placement-below .sky-popover{border-top:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below .sky-popover-arrow{top:1px;border-radius:3px 0 0;border-top:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover{border-top-color:#ef4044}.sky-theme-modern .sky-popover-placement-below.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 transparent transparent #ef4044}.sky-theme-modern .sky-popover-placement-right{padding-left:10px}.sky-theme-modern .sky-popover-placement-right .sky-popover{border-left:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right .sky-popover-arrow{left:1px;border-radius:0 0 0 3px;border-bottom:10px solid #00b4f1;border-left:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover{border-left-color:#ef4044}.sky-theme-modern .sky-popover-placement-right.sky-popover-danger .sky-popover-arrow{border-color:transparent transparent #ef4044 #ef4044}.sky-theme-modern .sky-popover-placement-left{padding-right:10px}.sky-theme-modern .sky-popover-placement-left .sky-popover{border-right:6px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left .sky-popover-arrow{right:1px;border-radius:0 3px 0 0;border-top:10px solid #00b4f1;border-right:10px solid #00b4f1}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover{border-right-color:#ef4044}.sky-theme-modern .sky-popover-placement-left.sky-popover-danger .sky-popover-arrow{border-color:#ef4044 #ef4044 transparent transparent}"]
         }),
         __param(6, Optional())
     ], SkyPopoverContentComponent);
@@ -1436,7 +1447,8 @@ var SkyPopoverComponent = /** @class */ (function () {
             horizontalAlignment: this.alignment,
             isStatic: false,
             placement: this.placement,
-            popoverTitle: this.popoverTitle
+            popoverTitle: this.popoverTitle,
+            popoverType: this.popoverType
         });
     };
     /**
@@ -1444,14 +1456,16 @@ var SkyPopoverComponent = /** @class */ (function () {
      * @internal
      */
     SkyPopoverComponent.prototype.close = function () {
-        this.contentRef.close();
+        var _a;
+        (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.close();
     };
     /**
      * Brings focus to the popover element if its open.
      * @internal
      */
     SkyPopoverComponent.prototype.applyFocus = function () {
-        this.contentRef.applyFocus();
+        var _a;
+        (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.applyFocus();
     };
     /**
      * Adds a flag to the popover to close when the mouse leaves the popover's bounds.
@@ -1487,10 +1501,12 @@ var SkyPopoverComponent = /** @class */ (function () {
         contentRef.closed
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(function () {
-            _this.overlayService.close(_this.overlay);
-            _this.overlay = undefined;
-            _this.isActive = false;
-            _this.popoverClosed.emit(_this);
+            if (_this.isActive) {
+                _this.overlayService.close(_this.overlay);
+                _this.overlay = undefined;
+                _this.isActive = false;
+                _this.popoverClosed.emit(_this);
+            }
         });
         contentRef.isMouseEnter
             .pipe(takeUntil(this.ngUnsubscribe))
@@ -1519,6 +1535,9 @@ var SkyPopoverComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], SkyPopoverComponent.prototype, "popoverTitle", void 0);
+    __decorate([
+        Input()
+    ], SkyPopoverComponent.prototype, "popoverType", void 0);
     __decorate([
         Output()
     ], SkyPopoverComponent.prototype, "popoverClosed", void 0);
@@ -1700,7 +1719,9 @@ var SkyPopoverDirective = /** @class */ (function () {
                 this.positionPopover();
                 break;
             case SkyPopoverMessageType.Close:
-                this.closePopover();
+                if (this.skyPopover.isActive) {
+                    this.closePopover();
+                }
                 break;
             case SkyPopoverMessageType.Reposition:
                 // Only reposition the popover if it is already open.