@skyux/popovers 7.9.0 → 7.9.1

package/fesm2020/skyux-popovers.mjs

@@ -1,9 +1,9 @@
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ElementRef, TemplateRef, Optional, ViewChild, EventEmitter, Output, ContentChildren, Injectable, ViewContainerRef, Directive } from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ElementRef, TemplateRef, Optional, Inject, ViewChild, EventEmitter, Output, ContentChildren, Injectable, ViewContainerRef, Directive } from '@angular/core';
 import * as i1 from '@skyux/core';
-import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
+import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
 import * as i4 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i2 from '@skyux/theme';
@@ -194,13 +194,13 @@ function parseAffixHorizontalAlignment$1(alignment) {
     }
 }
 
-var _SkyDropdownComponent_instances, _SkyDropdownComponent_affixer, _SkyDropdownComponent_ngUnsubscribe, _SkyDropdownComponent_overlay, _SkyDropdownComponent__buttonStyle, _SkyDropdownComponent__buttonType, _SkyDropdownComponent__dismissOnBlur, _SkyDropdownComponent__horizontalAlignment, _SkyDropdownComponent__isOpen, _SkyDropdownComponent__trigger, _SkyDropdownComponent__triggerButton, _SkyDropdownComponent_positionTimeout, _SkyDropdownComponent_changeDetector, _SkyDropdownComponent_affixService, _SkyDropdownComponent_overlayService, _SkyDropdownComponent_logService, _SkyDropdownComponent_themeSvc, _SkyDropdownComponent_addEventListeners, _SkyDropdownComponent_createOverlay, _SkyDropdownComponent_destroyAffixer, _SkyDropdownComponent_destroyOverlay, _SkyDropdownComponent_createAffixer, _SkyDropdownComponent_handleIncomingMessages, _SkyDropdownComponent_sendMessage, _SkyDropdownComponent_positionDropdownMenu;
+var _SkyDropdownComponent_instances, _SkyDropdownComponent_affixer, _SkyDropdownComponent_ngUnsubscribe, _SkyDropdownComponent_overlay, _SkyDropdownComponent__buttonStyle, _SkyDropdownComponent__buttonType, _SkyDropdownComponent__dismissOnBlur, _SkyDropdownComponent__horizontalAlignment, _SkyDropdownComponent__isOpen, _SkyDropdownComponent__trigger, _SkyDropdownComponent__triggerButton, _SkyDropdownComponent_positionTimeout, _SkyDropdownComponent_changeDetector, _SkyDropdownComponent_affixService, _SkyDropdownComponent_overlayService, _SkyDropdownComponent_logService, _SkyDropdownComponent_themeSvc, _SkyDropdownComponent_zIndex, _SkyDropdownComponent_addEventListeners, _SkyDropdownComponent_createOverlay, _SkyDropdownComponent_destroyAffixer, _SkyDropdownComponent_destroyOverlay, _SkyDropdownComponent_createAffixer, _SkyDropdownComponent_handleIncomingMessages, _SkyDropdownComponent_sendMessage, _SkyDropdownComponent_positionDropdownMenu;
 const DEFAULT_BUTTON_TYPE = 'select';
 /**
  * Creates a dropdown menu that displays menu items that users may select.
  */
 class SkyDropdownComponent {
-    constructor(changeDetector, affixService, overlayService, logService, themeSvc) {
+    constructor(changeDetector, affixService, overlayService, logService, themeSvc, stackingContext) {
         _SkyDropdownComponent_instances.add(this);
         /**
          * Whether to disable the dropdown button.
@@ -231,11 +231,13 @@ class SkyDropdownComponent {
         _SkyDropdownComponent_overlayService.set(this, void 0);
         _SkyDropdownComponent_logService.set(this, void 0);
         _SkyDropdownComponent_themeSvc.set(this, void 0);
+        _SkyDropdownComponent_zIndex.set(this, void 0);
         __classPrivateFieldSet(this, _SkyDropdownComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyDropdownComponent_affixService, affixService, "f");
         __classPrivateFieldSet(this, _SkyDropdownComponent_overlayService, overlayService, "f");
         __classPrivateFieldSet(this, _SkyDropdownComponent_logService, logService, "f");
         __classPrivateFieldSet(this, _SkyDropdownComponent_themeSvc, themeSvc, "f");
+        __classPrivateFieldSet(this, _SkyDropdownComponent_zIndex, stackingContext?.zIndex, "f");
     }
     /**
      * The background color for the dropdown button. Available values are `default`,
@@ -346,7 +348,7 @@ class SkyDropdownComponent {
         __classPrivateFieldGet(this, _SkyDropdownComponent_ngUnsubscribe, "f").complete();
     }
 }
-_SkyDropdownComponent_affixer = new WeakMap(), _SkyDropdownComponent_ngUnsubscribe = new WeakMap(), _SkyDropdownComponent_overlay = new WeakMap(), _SkyDropdownComponent__buttonStyle = new WeakMap(), _SkyDropdownComponent__buttonType = new WeakMap(), _SkyDropdownComponent__dismissOnBlur = new WeakMap(), _SkyDropdownComponent__horizontalAlignment = new WeakMap(), _SkyDropdownComponent__isOpen = new WeakMap(), _SkyDropdownComponent__trigger = new WeakMap(), _SkyDropdownComponent__triggerButton = new WeakMap(), _SkyDropdownComponent_positionTimeout = new WeakMap(), _SkyDropdownComponent_changeDetector = new WeakMap(), _SkyDropdownComponent_affixService = new WeakMap(), _SkyDropdownComponent_overlayService = new WeakMap(), _SkyDropdownComponent_logService = new WeakMap(), _SkyDropdownComponent_themeSvc = new WeakMap(), _SkyDropdownComponent_instances = new WeakSet(), _SkyDropdownComponent_addEventListeners = function _SkyDropdownComponent_addEventListeners() {
+_SkyDropdownComponent_affixer = new WeakMap(), _SkyDropdownComponent_ngUnsubscribe = new WeakMap(), _SkyDropdownComponent_overlay = new WeakMap(), _SkyDropdownComponent__buttonStyle = new WeakMap(), _SkyDropdownComponent__buttonType = new WeakMap(), _SkyDropdownComponent__dismissOnBlur = new WeakMap(), _SkyDropdownComponent__horizontalAlignment = new WeakMap(), _SkyDropdownComponent__isOpen = new WeakMap(), _SkyDropdownComponent__trigger = new WeakMap(), _SkyDropdownComponent__triggerButton = new WeakMap(), _SkyDropdownComponent_positionTimeout = new WeakMap(), _SkyDropdownComponent_changeDetector = new WeakMap(), _SkyDropdownComponent_affixService = new WeakMap(), _SkyDropdownComponent_overlayService = new WeakMap(), _SkyDropdownComponent_logService = new WeakMap(), _SkyDropdownComponent_themeSvc = new WeakMap(), _SkyDropdownComponent_zIndex = new WeakMap(), _SkyDropdownComponent_instances = new WeakSet(), _SkyDropdownComponent_addEventListeners = function _SkyDropdownComponent_addEventListeners() {
     __classPrivateFieldGet(this, _SkyDropdownComponent_ngUnsubscribe, "f").next();
     __classPrivateFieldGet(this, _SkyDropdownComponent_ngUnsubscribe, "f").complete();
     __classPrivateFieldSet(this, _SkyDropdownComponent_ngUnsubscribe, new Subject(), "f");
@@ -439,6 +441,13 @@ _SkyDropdownComponent_affixer = new WeakMap(), _SkyDropdownComponent_ngUnsubscri
             enableScroll: true,
             enablePointerEvents: true,
         });
+        if (__classPrivateFieldGet(this, _SkyDropdownComponent_zIndex, "f")) {
+            __classPrivateFieldGet(this, _SkyDropdownComponent_zIndex, "f")
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDropdownComponent_ngUnsubscribe, "f")))
+                .subscribe((zIndex) => {
+                overlay.componentRef.instance.zIndex = zIndex.toString(10);
+            });
+        }
         overlay.attachTemplate(this.menuContainerTemplateRef);
         overlay.backdropClick
             .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDropdownComponent_ngUnsubscribe, "f")))
@@ -515,13 +524,18 @@ _SkyDropdownComponent_affixer = new WeakMap(), _SkyDropdownComponent_ngUnsubscri
         }
     }), "f");
 };
-SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAffixService }, { token: i1.SkyOverlayService }, { token: i1.SkyLogService }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAffixService }, { token: i1.SkyOverlayService }, { token: i1.SkyLogService }, { token: i2.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", 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:var(--sky-text-color-deemphasized);cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:var(--sky-background-color-primary-dark);color:var(--sky-text-color-on-dark);max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:var(--sky-background-color-neutral-light);color:var(--sky-text-color-default);text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:var(--sky-background-color-disabled);cursor:not-allowed;pointer-events:none;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:var(--sky-text-color-deemphasized);cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:var(--sky-background-color-primary-dark);color:var(--sky-text-color-on-dark)}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}:host-context(.sky-toolbar-container) .sky-dropdown-button.sky-btn-link{color:#212327}.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;color:var(--sky-text-color-deemphasized);font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:var(--sky-text-color-default);box-shadow:none}: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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}: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:var(--sky-text-color-default)}: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:var(--sky-text-color-deemphasized)}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu{border-radius:6px;padding:3px 8px;background-color:transparent}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:none}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;color:var(--sky-text-color-deemphasized);font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:var(--sky-text-color-default);box-shadow:none}.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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-dropdown-button-type-tab.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.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:var(--sky-text-color-default)}.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:var(--sky-text-color-deemphasized)}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-context-menu{border-radius:6px;padding:3px 8px;background-color:transparent}.sky-theme-modern .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:none}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-dropdown\">\n  <button\n    class=\"sky-btn sky-dropdown-button\"\n    type=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? menuId : null\"\n    [attr.aria-haspopup]=\"menuAriaRole\"\n    [attr.aria-label]=\"\n      label || ('skyux_dropdown_context_menu_default_label' | skyLibResources)\n    \"\n    [attr.title]=\"title\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    #triggerButton\n  >\n    <ng-container [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"ellipsis\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\"\n          class=\"sky-dropdown-button-container\"\n        >\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"> </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"caret-down\"\n            >\n            </sky-icon>\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-dropdown-caret\"\n              icon=\"chevron-down\"\n              iconType=\"skyux\"\n            >\n            </sky-icon>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\"\n        >\n          <sky-icon [icon]=\"buttonType\" size=\"lg\"></sky-icon>\n        </div>\n      </ng-template>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #menuContainerTemplateRef>\n  <div\n    class=\"sky-dropdown-menu-container\"\n    [class.hidden]=\"!isVisible\"\n    #menuContainerElementRef\n  >\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:var(--sky-text-color-deemphasized);cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:var(--sky-background-color-primary-dark);color:var(--sky-text-color-on-dark);max-width:100%;text-align:left}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:var(--sky-background-color-neutral-light);color:var(--sky-text-color-default);text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:var(--sky-background-color-disabled);cursor:not-allowed;pointer-events:none;outline:none;text-decoration:none}.sky-dropdown-button-type-tab.sky-btn-tab-disabled:hover{color:var(--sky-text-color-deemphasized);cursor:default;text-decoration:none}.sky-dropdown-button-type-tab:hover:not(.sky-btn-tab-disabled){background-color:var(--sky-background-color-primary-dark);color:var(--sky-text-color-on-dark)}.sky-dropdown-button-type-context-menu{border-radius:50%;padding:3px 8px}:host-context(.sky-toolbar-container) .sky-dropdown-button.sky-btn-link{color:#212327}.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;color:var(--sky-text-color-deemphasized);font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:var(--sky-text-color-default);box-shadow:none}: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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-dropdown-button-type-tab.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}: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:var(--sky-text-color-default)}: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:var(--sky-text-color-deemphasized)}:host-context(.sky-theme-modern) .sky-dropdown-caret{margin-left:10px}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu{border-radius:6px;padding:3px 8px;background-color:transparent}:host-context(.sky-theme-modern) .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:none}.sky-theme-modern .sky-dropdown-button-type-tab{border:none;border-radius:0;color:var(--sky-text-color-deemphasized);font-weight:400;padding:10px 15px;transition:box-shadow .15s;background-color:transparent;color:var(--sky-text-color-default);box-shadow:none}.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-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-dropdown-button-type-tab:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-dropdown-button-type-tab:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-dropdown-button-type-tab:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-dropdown-button-type-tab.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-dropdown-button-type-tab.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.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:var(--sky-text-color-default)}.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:var(--sky-text-color-deemphasized)}.sky-theme-modern .sky-dropdown-caret{margin-left:10px}.sky-theme-modern .sky-dropdown-button-type-context-menu{border-radius:6px;padding:3px 8px;background-color:transparent}.sky-theme-modern .sky-dropdown-button-type-context-menu:not(:hover):not(:focus-visible){box-shadow:none}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab:hover{color:#fff}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab:hover{color:#fff}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-btn-tab-close,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-button-type-tab .sky-tab-header-count{color:#efefef}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyAffixService }, { type: i1.SkyOverlayService }, { type: i1.SkyLogService }, { type: i2.SkyThemeService, decorators: [{
                     type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SKY_STACKING_CONTEXT]
                 }] }]; }, propDecorators: { buttonStyle: [{
                 type: Input
             }], buttonType: [{
@@ -1284,9 +1298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                     }]
             }] } });
 
-var _SkyPopoverComponent_instances, _SkyPopoverComponent_contentRef, _SkyPopoverComponent_isMarkedForCloseOnMouseLeave, _SkyPopoverComponent_ngUnsubscribe, _SkyPopoverComponent_overlay, _SkyPopoverComponent__alignment, _SkyPopoverComponent__dismissOnBlur, _SkyPopoverComponent__placement, _SkyPopoverComponent__popoverType, _SkyPopoverComponent_overlayService, _SkyPopoverComponent_setupOverlay;
+var _SkyPopoverComponent_instances, _SkyPopoverComponent_contentRef, _SkyPopoverComponent_isMarkedForCloseOnMouseLeave, _SkyPopoverComponent_ngUnsubscribe, _SkyPopoverComponent_overlay, _SkyPopoverComponent__alignment, _SkyPopoverComponent__dismissOnBlur, _SkyPopoverComponent__placement, _SkyPopoverComponent__popoverType, _SkyPopoverComponent_overlayService, _SkyPopoverComponent_zIndex, _SkyPopoverComponent_setupOverlay;
 class SkyPopoverComponent {
-    constructor(overlayService) {
+    constructor(overlayService, stackingContext) {
         _SkyPopoverComponent_instances.add(this);
         /**
          * Fires when users close the popover.
@@ -1317,7 +1331,9 @@ class SkyPopoverComponent {
         _SkyPopoverComponent__placement.set(this, 'above');
         _SkyPopoverComponent__popoverType.set(this, 'info');
         _SkyPopoverComponent_overlayService.set(this, void 0);
+        _SkyPopoverComponent_zIndex.set(this, void 0);
         __classPrivateFieldSet(this, _SkyPopoverComponent_overlayService, overlayService, "f");
+        __classPrivateFieldSet(this, _SkyPopoverComponent_zIndex, stackingContext?.zIndex, "f");
     }
     /**
      * The horizontal alignment of the popover in relation to the trigger element.
@@ -1418,12 +1434,19 @@ class SkyPopoverComponent {
         __classPrivateFieldSet(this, _SkyPopoverComponent_isMarkedForCloseOnMouseLeave, true, "f");
     }
 }
-_SkyPopoverComponent_contentRef = new WeakMap(), _SkyPopoverComponent_isMarkedForCloseOnMouseLeave = new WeakMap(), _SkyPopoverComponent_ngUnsubscribe = new WeakMap(), _SkyPopoverComponent_overlay = new WeakMap(), _SkyPopoverComponent__alignment = new WeakMap(), _SkyPopoverComponent__dismissOnBlur = new WeakMap(), _SkyPopoverComponent__placement = new WeakMap(), _SkyPopoverComponent__popoverType = new WeakMap(), _SkyPopoverComponent_overlayService = new WeakMap(), _SkyPopoverComponent_instances = new WeakSet(), _SkyPopoverComponent_setupOverlay = function _SkyPopoverComponent_setupOverlay() {
+_SkyPopoverComponent_contentRef = new WeakMap(), _SkyPopoverComponent_isMarkedForCloseOnMouseLeave = new WeakMap(), _SkyPopoverComponent_ngUnsubscribe = new WeakMap(), _SkyPopoverComponent_overlay = new WeakMap(), _SkyPopoverComponent__alignment = new WeakMap(), _SkyPopoverComponent__dismissOnBlur = new WeakMap(), _SkyPopoverComponent__placement = new WeakMap(), _SkyPopoverComponent__popoverType = new WeakMap(), _SkyPopoverComponent_overlayService = new WeakMap(), _SkyPopoverComponent_zIndex = new WeakMap(), _SkyPopoverComponent_instances = new WeakSet(), _SkyPopoverComponent_setupOverlay = function _SkyPopoverComponent_setupOverlay() {
     if (this.templateRef) {
         const overlay = __classPrivateFieldGet(this, _SkyPopoverComponent_overlayService, "f").create({
             enableScroll: true,
             enablePointerEvents: true,
         });
+        if (__classPrivateFieldGet(this, _SkyPopoverComponent_zIndex, "f")) {
+            __classPrivateFieldGet(this, _SkyPopoverComponent_zIndex, "f")
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyPopoverComponent_ngUnsubscribe, "f")))
+                .subscribe((zIndex) => {
+                overlay.componentRef.instance.zIndex = zIndex.toString(10);
+            });
+        }
         overlay.backdropClick
             .pipe(takeUntil(__classPrivateFieldGet(this, _SkyPopoverComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
@@ -1464,12 +1487,17 @@ _SkyPopoverComponent_contentRef = new WeakMap(), _SkyPopoverComponent_isMarkedFo
         __classPrivateFieldSet(this, _SkyPopoverComponent_contentRef, contentRef, "f");
     }
 };
-SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1.SkyOverlayService }], target: i0.ɵɵFactoryTarget.Component });
+SkyPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyPopoverComponent, deps: [{ token: i1.SkyOverlayService }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyPopoverComponent, selector: "sky-popover", inputs: { alignment: "alignment", dismissOnBlur: "dismissOnBlur", placement: "placement", popoverTitle: "popoverTitle", popoverType: "popoverType" }, outputs: { popoverClosed: "popoverClosed", popoverOpened: "popoverOpened" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-popover', template: "<ng-template #templateRef>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.SkyOverlayService }]; }, propDecorators: { alignment: [{
+        }], ctorParameters: function () { return [{ type: i1.SkyOverlayService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SKY_STACKING_CONTEXT]
+                }] }]; }, propDecorators: { alignment: [{
                 type: Input
             }], dismissOnBlur: [{
                 type: Input