@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-actions-panel.mjs

@@ -1,29 +1,24 @@
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { CdkDialogContainer, Dialog } from '@angular/cdk/dialog';
-import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { Overlay } from '@angular/cdk/overlay';
+import { OverlayContainer, Overlay, OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, inject, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Injectable, NgModule } from '@angular/core';
-import { map, of, Subject, ReplaySubject, filter, take, takeUntil } from 'rxjs';
-import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
+import { InjectionToken, signal, inject, Injector, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, EnvironmentInjector, createEnvironmentInjector, NgModule } from '@angular/core';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i2 from '@koobiq/components/button';
+import * as i3 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import { ruRULocaleData, KbqAnimationDurations, KbqAnimationCurves, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
-import * as i1 from '@koobiq/components/divider';
+import * as i1 from '@koobiq/components/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqAnimationsDisabled, KbqLocaleOverridesDirective, kbqAfterAnimations, KBQ_WINDOW } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
-import * as i3 from '@koobiq/components/icon';
+import * as i4 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i4 from '@koobiq/components/tooltip';
+import * as i5 from '@koobiq/components/tooltip';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
+import { Subject, ReplaySubject, filter, take } from 'rxjs';
 
 /** Injection token that can be used to specify default actions panel config. */
 const KBQ_ACTIONS_PANEL_DEFAULT_CONFIG = new InjectionToken('KBQ_ACTIONS_PANEL_DEFAULT_CONFIG', { factory: () => new KbqActionsPanelConfig() });
 /**
- * Utility for providing default actions panel config.
- *
- * @see `KBQ_ACTIONS_PANEL_DEFAULT_CONFIG`
+ * Utility for providing default actions panel config through {@link KBQ_ACTIONS_PANEL_DEFAULT_CONFIG}.
  */
 const kbqActionsPanelDefaultConfigProvider = (config) => ({
     provide: KBQ_ACTIONS_PANEL_DEFAULT_CONFIG,
@@ -32,68 +27,41 @@ const kbqActionsPanelDefaultConfigProvider = (config) => ({
 /**
  * Configuration for opened actions panel.
  * Based on cdk `DialogConfig`.
- *
- * @see `DialogConfig`
- *
  */
 class KbqActionsPanelConfig {
     constructor() {
         /**
-         * Data being injected into the child component.
-         *
-         * @see `KBQ_ACTIONS_PANEL_DATA`
+         * Data being injected into the child component with {@link KBQ_ACTIONS_PANEL_DATA}.
          */
         this.data = null;
         /**
          * Whether the actions panel should be closed of when the user goes backwards/forwards in history.
+         * Defaults to `true`.
          * NOTE! This does not apply to router navigation.
-         *
-         * @default true
          */
         this.closeOnNavigation = true;
         /**
-         * Direction of the text in the actions panel.
-         *
-         * @default 'ltr'
+         * Direction of the text in the actions panel. Defaults to `'ltr'`.
          */
         this.direction = 'ltr';
         /**
-         * Scroll strategy to be used for the actions panel.
-         *
-         * @default `RepositionScrollStrategy`
+         * Scroll strategy to be used for the actions panel. Defaults to `RepositionScrollStrategy`.
          */
         this.scrollStrategy = (overlay) => overlay.scrollStrategies.reposition();
         /**
-         * Whether the user can use ESC or click on close button to close the actions panel.
-         *
-         * @default false
+         * Whether the user can use ESC or click on close button to close the actions panel. Defaults to `false`.
          */
         this.disableClose = false;
     }
 }
 
 /** Localization configuration provider. */
-const KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION = new InjectionToken('KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION', { factory: () => ruRULocaleData.actionsPanel });
-/** Utility provider for `KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION`. */
-const kbqActionsPanelLocaleConfigurationProvider = (configuration) => ({
-    provide: KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION,
-    useValue: configuration
-});
+const KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION = new InjectionToken('KbqActionsPanelLocaleConfiguration', { factory: () => ruRULocaleData.actionsPanel });
 /**
- * Animation that shows and hides the actions panel.
+ * Utility provider for `KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION`. Only the strings you pass are
+ * overridden; the rest keep following the active locale.
  */
-const KBQ_ACTIONS_PANEL_CONTAINER_ANIMATION = trigger('state', [
-    state('void, hidden', style({ transform: 'translateY(100%)' })),
-    state('visible', style({ transform: 'translateY(0%)' })),
-    transition('visible => void, visible => hidden', group([
-        animate(`${KbqAnimationDurations.Entering} ${KbqAnimationCurves.StandardCurve}`),
-        query('@*', animateChild(), { optional: true })
-    ])),
-    transition('void => visible', group([
-        animate(`${KbqAnimationDurations.Exiting} ${KbqAnimationCurves.StandardCurve}`),
-        query('@*', animateChild(), { optional: true })
-    ]))
-]);
+const kbqActionsPanelLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('actionsPanel', configuration);
 /**
  * Internal component that wraps user-provided actions panel content.
  *
@@ -107,13 +75,20 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
          *
          * @docs-private
          */
-        this.animationState = 'void';
+        this.animationState = signal('void', ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
         /**
-         * Emits whenever the state of the animation changes.
+         * Emits the state the actions panel has finished moving to.
          *
          * @docs-private
          */
-        this.animationStateChanged = new EventEmitter();
+        this.animationDone = new Subject();
+        /**
+         * Whether the actions panel moves without motion.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        this.injector = inject(Injector);
         /**
          * Actions panel configuration.
          *
@@ -122,15 +97,12 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
         this.config = inject(KbqActionsPanelConfig);
         this.actionsPanel = inject(KbqActionsPanel);
         this.renderer = inject(Renderer2);
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         /**
          * Actions panel locale configuration.
          *
          * @docs-private
          */
-        this.localeConfiguration = toSignal(this.localeService
-            ? this.localeService.changes.pipe(map(() => this.localeService.getParams('actionsPanel')))
-            : of(inject(KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION)));
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('actionsPanel', KBQ_ACTIONS_PANEL_LOCALE_CONFIGURATION);
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -151,11 +123,9 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
      */
     startOpenAnimation() {
         if (!this.destroyed) {
-            this.animationState = 'visible';
-            // animationState lives in host bindings and `detectChanges` does not refresh host bindings  so we have to
-            // call `markForCheck` to ensure the host view is refreshed eventually.
-            this._changeDetectorRef.markForCheck();
+            this.animationState.set('visible');
             this._changeDetectorRef.detectChanges();
+            this.waitForAnimation('visible');
         }
     }
     /**
@@ -165,28 +135,9 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
      */
     startCloseAnimation() {
         if (!this.destroyed) {
-            this.animationState = 'hidden';
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    /**
-     * Handles animation done events.
-     *
-     * @docs-private
-     */
-    onAnimationDone(event) {
-        if (event.toState === 'visible') {
-            this._trapFocus();
+            this.animationState.set('hidden');
+            this.waitForAnimation('hidden');
         }
-        this.animationStateChanged.emit(event);
-    }
-    /**
-     * Handles animation start events.
-     *
-     * @docs-private
-     */
-    onAnimationStart(event) {
-        this.animationStateChanged.emit(event);
     }
     /**
      * Handles escape key events.
@@ -194,10 +145,11 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
      * @docs-private
      */
     handleEscape(event) {
-        if (!this.config.disableClose) {
-            event.preventDefault();
-            this.close();
-        }
+        // A control inside the panel spent the key closing a popup of its own, such as a tooltip.
+        if (event.defaultPrevented || this.config.disableClose)
+            return;
+        event.preventDefault();
+        this.close();
     }
     /**
      * @docs-private
@@ -205,6 +157,26 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
     _contentAttached() {
         this.applyContainerClass();
     }
+    waitForAnimation(state) {
+        const pending = this.pendingTransition;
+        // An entrance cut short by closing still ends, or the panel would never report having opened.
+        if (pending) {
+            pending.wait.destroy();
+            this.pendingTransition = undefined;
+            this.animationDone.next(pending.state);
+        }
+        // A subscriber may have disposed of the panel by now.
+        if (this.destroyed)
+            return;
+        const wait = kbqAfterAnimations(() => this._elementRef.nativeElement, () => {
+            this.pendingTransition = undefined;
+            if (state === 'visible') {
+                this._trapFocus();
+            }
+            this.animationDone.next(state);
+        }, this.injector);
+        this.pendingTransition = { state, wait };
+    }
     applyContainerClass() {
         const { containerClass } = this.config;
         if (containerClass) {
@@ -216,8 +188,8 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqActionsPanelContainer, isStandalone: true, selector: "kbq-actions-panel-container", host: { listeners: { "@state.start": "onAnimationStart($event)", "@state.done": "onAnimationDone($event)", "keydown.escape": "handleEscape($event)" }, properties: { "class.kbq-actions-panel-container_rtl": "config.direction === \"rtl\"", "@state": "animationState" }, classAttribute: "kbq-actions-panel-container" }, usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqActionsPanelContainer, isStandalone: true, selector: "kbq-actions-panel-container", host: { listeners: { "keydown.escape": "handleEscape($any($event))" }, properties: { "class.kbq-actions-panel-container_rtl": "config.direction === \"rtl\"", "class.kbq-actions-panel-container_visible": "animationState() === 'visible'", "class.kbq-animations-disabled": "animationsDisabled" }, classAttribute: "kbq-actions-panel-container" }, usesInheritance: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective }], ngImport: i0, template: `
         <div class="kbq-actions-panel-container__content">
             <ng-template cdkPortalOutlet />
         </div>
@@ -227,16 +199,17 @@ class KbqActionsPanelContainer extends CdkDialogContainer {
                 class="kbq-actions-panel-container__close-button"
                 color="contrast"
                 kbq-button
-                [kbqTooltip]="localeConfiguration()!.closeTooltip"
+                [attr.aria-label]="localeConfiguration().closeTooltip"
+                [kbqTooltip]="localeConfiguration().closeTooltip"
                 [kbqTooltipOffset]="16"
                 (click)="close()"
             >
                 <i kbq-icon="kbq-circle-xmark_16"></i>
             </button>
         }
-    `, isInline: true, styles: [".kbq-actions-panel-container,.kbq-actions-panel-overlay{--kbq-actions-panel-background-color: var(--kbq-background-contrast);--kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);--kbq-actions-panel-padding: var(--kbq-size-s);--kbq-actions-panel-margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-l);--kbq-actions-panel-border-radius: var(--kbq-size-l);--kbq-actions-panel-box-shadow: var(--kbq-shadow-card);--kbq-actions-panel-height: var(--kbq-size-5xl);--kbq-actions-panel-vertical-divider-background-color: var( --kbq-line-on-contrast-less, var(--kbq-line-contrast-fade) );--kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);--kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s)}\n", ".kbq-actions-panel-container{background:var(--kbq-actions-panel-background-color);color:var(--kbq-actions-panel-text-color);box-shadow:var(--kbq-actions-panel-box-shadow);height:var(--kbq-actions-panel-height);padding:var(--kbq-actions-panel-padding);border-radius:var(--kbq-actions-panel-border-radius);display:flex;flex-grow:1;align-items:center;overflow:hidden;box-sizing:border-box}.kbq-actions-panel-container .kbq-actions-panel-container__content{display:flex;align-items:center;flex-grow:1;overflow:hidden}.kbq-actions-panel-container .kbq-actions-panel-container__vertical-divider{background-color:var(--kbq-actions-panel-vertical-divider-background-color);height:var(--kbq-actions-panel-vertical-divider-height)!important;margin:var(--kbq-actions-panel-vertical-divider-margin)}.kbq-actions-panel-container .kbq-button,.kbq-actions-panel-container .kbq-button-icon{--kbq-button-filled-contrast-fade-off-background: transparent;--kbq-button-filled-contrast-fade-on-background: transparent}.kbq-actions-panel-overlay{margin:var(--kbq-actions-panel-margin)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i1.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i4.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], animations: [KBQ_ACTIONS_PANEL_CONTAINER_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-actions-panel-container,.kbq-actions-panel-overlay{--kbq-actions-panel-background-color: var(--kbq-background-contrast);--kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);--kbq-actions-panel-padding: var(--kbq-size-s);--kbq-actions-panel-margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-l);--kbq-actions-panel-border-radius: var(--kbq-size-l);--kbq-actions-panel-box-shadow: var(--kbq-shadow-card);--kbq-actions-panel-height: var(--kbq-size-5xl);--kbq-actions-panel-vertical-divider-background-color: var( --kbq-line-on-contrast-less, var(--kbq-line-contrast-fade) );--kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);--kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s)}\n", "@charset \"UTF-8\";.kbq-actions-panel-container{background:var(--kbq-actions-panel-background-color);color:var(--kbq-actions-panel-text-color);box-shadow:var(--kbq-actions-panel-box-shadow);height:var(--kbq-actions-panel-height);padding:var(--kbq-actions-panel-padding);border-radius:var(--kbq-actions-panel-border-radius)}@supports (corner-shape: squircle){.kbq-actions-panel-container{corner-shape:squircle;border-radius:clamp(var(--kbq-actions-panel-border-radius) * 1.85,var(--kbq-actions-panel-border-radius) * 2.3 - 3.6px,var(--kbq-actions-panel-border-radius) * 2)}}.kbq-actions-panel-container{display:flex;flex-grow:1;align-items:center;overflow:hidden;box-sizing:border-box;transform:translateY(100%);transition:transform .15s cubic-bezier(.4,0,.2,1)}.kbq-actions-panel-container.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-actions-panel-container{animation:none;transition:none}}.kbq-actions-panel-container.kbq-actions-panel-container_visible{transform:none;animation:kbq-actions-panel-enter 125ms cubic-bezier(.4,0,.2,1)}.kbq-actions-panel-container.kbq-actions-panel-container_visible.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-actions-panel-container.kbq-actions-panel-container_visible{animation:none;transition:none}}.kbq-actions-panel-container .kbq-actions-panel-container__content{display:flex;align-items:center;flex-grow:1;overflow:hidden}.kbq-actions-panel-container .kbq-actions-panel-container__vertical-divider{background-color:var(--kbq-actions-panel-vertical-divider-background-color);height:var(--kbq-actions-panel-vertical-divider-height)!important;margin:var(--kbq-actions-panel-vertical-divider-margin)}.kbq-actions-panel-container .kbq-button,.kbq-actions-panel-container .kbq-button-icon{--kbq-button-filled-contrast-fade-off-background: transparent;--kbq-button-filled-contrast-fade-on-background: transparent}.kbq-actions-panel-container .kbq-button.kbq-disabled.kbq-contrast,.kbq-actions-panel-container .kbq-button.kbq-disabled.kbq-contrast-fade,.kbq-actions-panel-container .kbq-button-icon.kbq-disabled.kbq-contrast,.kbq-actions-panel-container .kbq-button-icon.kbq-disabled.kbq-contrast-fade{--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-button-filled-contrast-fade-off-background);--kbq-button-filled-contrast-fade-off-states-disabled-border: var(--kbq-button-filled-contrast-fade-off-border);--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-button-filled-contrast-fade-off-foreground);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-button-filled-contrast-fade-off-left-icon);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-button-filled-contrast-fade-off-right-icon);--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-button-filled-contrast-fade-on-background);--kbq-button-filled-contrast-fade-on-states-disabled-border: var(--kbq-button-filled-contrast-fade-on-border);--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-button-filled-contrast-fade-on-foreground);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-filled-contrast-fade-on-left-icon);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-filled-contrast-fade-on-right-icon);--kbq-button-outline-contrast-fade-on-states-disabled-background: var(--kbq-button-outline-contrast-fade-on-background);--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-button-outline-contrast-fade-on-border);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-button-outline-contrast-fade-on-foreground);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-outline-contrast-fade-on-left-icon);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-outline-contrast-fade-on-right-icon);--kbq-button-transparent-contrast-fade-on-states-disabled-background: var(--kbq-button-transparent-contrast-fade-on-background);--kbq-button-transparent-contrast-fade-on-states-disabled-border: var(--kbq-button-transparent-contrast-fade-on-border);--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-button-transparent-contrast-fade-on-foreground);--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-transparent-contrast-fade-on-left-icon);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-transparent-contrast-fade-on-right-icon);opacity:var(--kbq-opacity-disabled)}.kbq-actions-panel-overlay{margin:var(--kbq-actions-panel-margin)}@keyframes kbq-actions-panel-enter{0%{transform:translateY(100%)}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i2.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings", "decorative", "length"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i5.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelContainer, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-actions-panel-container', imports: [
                         CdkPortalOutlet,
@@ -254,21 +227,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 class="kbq-actions-panel-container__close-button"
                 color="contrast"
                 kbq-button
-                [kbqTooltip]="localeConfiguration()!.closeTooltip"
+                [attr.aria-label]="localeConfiguration().closeTooltip"
+                [kbqTooltip]="localeConfiguration().closeTooltip"
                 [kbqTooltipOffset]="16"
                 (click)="close()"
             >
                 <i kbq-icon="kbq-circle-xmark_16"></i>
             </button>
         }
-    `, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
+    `, changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-actions-panel-container',
                         '[class.kbq-actions-panel-container_rtl]': 'config.direction === "rtl"',
-                        '[@state]': 'animationState',
-                        '(@state.start)': 'onAnimationStart($event)',
-                        '(@state.done)': 'onAnimationDone($event)',
-                        '(keydown.escape)': 'handleEscape($event)'
-                    }, animations: [KBQ_ACTIONS_PANEL_CONTAINER_ANIMATION], styles: [".kbq-actions-panel-container,.kbq-actions-panel-overlay{--kbq-actions-panel-background-color: var(--kbq-background-contrast);--kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);--kbq-actions-panel-padding: var(--kbq-size-s);--kbq-actions-panel-margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-l);--kbq-actions-panel-border-radius: var(--kbq-size-l);--kbq-actions-panel-box-shadow: var(--kbq-shadow-card);--kbq-actions-panel-height: var(--kbq-size-5xl);--kbq-actions-panel-vertical-divider-background-color: var( --kbq-line-on-contrast-less, var(--kbq-line-contrast-fade) );--kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);--kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s)}\n", ".kbq-actions-panel-container{background:var(--kbq-actions-panel-background-color);color:var(--kbq-actions-panel-text-color);box-shadow:var(--kbq-actions-panel-box-shadow);height:var(--kbq-actions-panel-height);padding:var(--kbq-actions-panel-padding);border-radius:var(--kbq-actions-panel-border-radius);display:flex;flex-grow:1;align-items:center;overflow:hidden;box-sizing:border-box}.kbq-actions-panel-container .kbq-actions-panel-container__content{display:flex;align-items:center;flex-grow:1;overflow:hidden}.kbq-actions-panel-container .kbq-actions-panel-container__vertical-divider{background-color:var(--kbq-actions-panel-vertical-divider-background-color);height:var(--kbq-actions-panel-vertical-divider-height)!important;margin:var(--kbq-actions-panel-vertical-divider-margin)}.kbq-actions-panel-container .kbq-button,.kbq-actions-panel-container .kbq-button-icon{--kbq-button-filled-contrast-fade-off-background: transparent;--kbq-button-filled-contrast-fade-on-background: transparent}.kbq-actions-panel-overlay{margin:var(--kbq-actions-panel-margin)}\n"] }]
+                        '[class.kbq-actions-panel-container_visible]': "animationState() === 'visible'",
+                        '[class.kbq-animations-disabled]': 'animationsDisabled',
+                        '(keydown.escape)': 'handleEscape($any($event))'
+                    }, hostDirectives: [KbqLocaleOverridesDirective], styles: [".kbq-actions-panel-container,.kbq-actions-panel-overlay{--kbq-actions-panel-background-color: var(--kbq-background-contrast);--kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);--kbq-actions-panel-padding: var(--kbq-size-s);--kbq-actions-panel-margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-l);--kbq-actions-panel-border-radius: var(--kbq-size-l);--kbq-actions-panel-box-shadow: var(--kbq-shadow-card);--kbq-actions-panel-height: var(--kbq-size-5xl);--kbq-actions-panel-vertical-divider-background-color: var( --kbq-line-on-contrast-less, var(--kbq-line-contrast-fade) );--kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);--kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s)}\n", "@charset \"UTF-8\";.kbq-actions-panel-container{background:var(--kbq-actions-panel-background-color);color:var(--kbq-actions-panel-text-color);box-shadow:var(--kbq-actions-panel-box-shadow);height:var(--kbq-actions-panel-height);padding:var(--kbq-actions-panel-padding);border-radius:var(--kbq-actions-panel-border-radius)}@supports (corner-shape: squircle){.kbq-actions-panel-container{corner-shape:squircle;border-radius:clamp(var(--kbq-actions-panel-border-radius) * 1.85,var(--kbq-actions-panel-border-radius) * 2.3 - 3.6px,var(--kbq-actions-panel-border-radius) * 2)}}.kbq-actions-panel-container{display:flex;flex-grow:1;align-items:center;overflow:hidden;box-sizing:border-box;transform:translateY(100%);transition:transform .15s cubic-bezier(.4,0,.2,1)}.kbq-actions-panel-container.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-actions-panel-container{animation:none;transition:none}}.kbq-actions-panel-container.kbq-actions-panel-container_visible{transform:none;animation:kbq-actions-panel-enter 125ms cubic-bezier(.4,0,.2,1)}.kbq-actions-panel-container.kbq-actions-panel-container_visible.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-actions-panel-container.kbq-actions-panel-container_visible{animation:none;transition:none}}.kbq-actions-panel-container .kbq-actions-panel-container__content{display:flex;align-items:center;flex-grow:1;overflow:hidden}.kbq-actions-panel-container .kbq-actions-panel-container__vertical-divider{background-color:var(--kbq-actions-panel-vertical-divider-background-color);height:var(--kbq-actions-panel-vertical-divider-height)!important;margin:var(--kbq-actions-panel-vertical-divider-margin)}.kbq-actions-panel-container .kbq-button,.kbq-actions-panel-container .kbq-button-icon{--kbq-button-filled-contrast-fade-off-background: transparent;--kbq-button-filled-contrast-fade-on-background: transparent}.kbq-actions-panel-container .kbq-button.kbq-disabled.kbq-contrast,.kbq-actions-panel-container .kbq-button.kbq-disabled.kbq-contrast-fade,.kbq-actions-panel-container .kbq-button-icon.kbq-disabled.kbq-contrast,.kbq-actions-panel-container .kbq-button-icon.kbq-disabled.kbq-contrast-fade{--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-button-filled-contrast-fade-off-background);--kbq-button-filled-contrast-fade-off-states-disabled-border: var(--kbq-button-filled-contrast-fade-off-border);--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-button-filled-contrast-fade-off-foreground);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-button-filled-contrast-fade-off-left-icon);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-button-filled-contrast-fade-off-right-icon);--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-button-filled-contrast-fade-on-background);--kbq-button-filled-contrast-fade-on-states-disabled-border: var(--kbq-button-filled-contrast-fade-on-border);--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-button-filled-contrast-fade-on-foreground);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-filled-contrast-fade-on-left-icon);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-filled-contrast-fade-on-right-icon);--kbq-button-outline-contrast-fade-on-states-disabled-background: var(--kbq-button-outline-contrast-fade-on-background);--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-button-outline-contrast-fade-on-border);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-button-outline-contrast-fade-on-foreground);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-outline-contrast-fade-on-left-icon);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-outline-contrast-fade-on-right-icon);--kbq-button-transparent-contrast-fade-on-states-disabled-background: var(--kbq-button-transparent-contrast-fade-on-background);--kbq-button-transparent-contrast-fade-on-states-disabled-border: var(--kbq-button-transparent-contrast-fade-on-border);--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-button-transparent-contrast-fade-on-foreground);--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-button-transparent-contrast-fade-on-left-icon);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-button-transparent-contrast-fade-on-right-icon);opacity:var(--kbq-opacity-disabled)}.kbq-actions-panel-overlay{margin:var(--kbq-actions-panel-margin)}@keyframes kbq-actions-panel-enter{0%{transform:translateY(100%)}}\n"] }]
         }] });
 
 /**
@@ -284,7 +257,7 @@ class KbqActionsPanelRef {
         this.keydownEvents = this.dialogRef.keydownEvents;
         /** Emits when the actions panel starts opening, before its entrance animation plays. */
         this.beforeOpened = this.beforeOpenedSubject;
-        /** Emits when the actions panel has opened and appeared. */
+        /** Emits when the actions panel has opened and appeared, or once closing cuts its entrance short. */
         this.afterOpened = this.afterOpenedSubject;
         /** Emits when the actions panel starts closing, before its exit animation plays. */
         this.beforeClosed = this.beforeClosedSubject;
@@ -321,33 +294,28 @@ class KbqActionsPanelRef {
     }
     /** Closes the actions panel. */
     close(result) {
-        if (!this.containerInstance) {
+        const container = this.containerInstance;
+        if (!container) {
             return;
         }
-        this.containerInstance.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'start'), take(1))
-            .subscribe(({ totalTime }) => {
-            this.closeAnimationFallbackTimeout = setTimeout(() => this.dialogRef.close(this.result), totalTime + 100);
-        });
+        // The exit ends an entrance still in progress, so it starts ahead of `beforeClosed` for `afterOpened` to
+        // come first — and the container is let go before that, since an `afterOpened` subscriber may close again.
+        this.containerInstance = null;
         this.result = result;
+        container.startCloseAnimation();
         this.beforeClosedSubject.next(result);
         this.beforeClosedSubject.complete();
-        this.containerInstance.startCloseAnimation();
-        this.containerInstance = null;
     }
     handleAnimation() {
-        this.containerInstance.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'visible'), take(1))
+        this.containerInstance.animationDone
+            .pipe(filter((state) => state === 'visible'), take(1))
             .subscribe(() => {
             this.afterOpenedSubject.next();
             this.afterOpenedSubject.complete();
         });
-        this.containerInstance.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'hidden'), take(1))
-            .subscribe(() => {
-            clearTimeout(this.closeAnimationFallbackTimeout);
-            this.dialogRef.close(this.result);
-        });
+        this.containerInstance.animationDone
+            .pipe(filter((state) => state === 'hidden'), take(1))
+            .subscribe(() => this.dialogRef.close(this.result));
     }
     handleOverlayDetachments() {
         this.dialogRef.overlayRef
@@ -359,24 +327,167 @@ class KbqActionsPanelRef {
     }
 }
 
+/**
+ * Element that {@link KbqActionsPanelScopedOverlayContainer} renders overlays into.
+ *
+ * @docs-private
+ */
+const KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_HOST = new InjectionToken('KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_HOST');
+/**
+ * Class of the wrapper that {@link KbqActionsPanelScopedOverlayContainer} adds to the host.
+ *
+ * @docs-private
+ */
+const KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_CONTAINER_SELECTOR = 'kbq-actions-panel-scoped-overlay-container';
+/**
+ * Hosts currently promoted to a containing block, with the inline `position` to put back and the number of containers
+ * relying on the promotion.
+ *
+ * The promotion belongs to the host rather than to a container: several containers share one host whenever panels
+ * overlap — replacing an open panel creates the new overlay before the old one finishes closing — and the first
+ * to be destroyed must not restore a `position` the others still need.
+ */
+const promotedHosts = new WeakMap();
+/**
+ * `OverlayContainer` that renders overlays inside {@link KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_HOST} instead of
+ * `document.body`.
+ *
+ * CDK resolves the overlay host from the `OverlayContainer` available in DI, and there is exactly one of those per
+ * application. Providing this container in a child injector — together with a `Dialog` of its own — is what makes a
+ * single overlay render inside a specific element while the rest of the application keeps using the global container.
+ *
+ * The container is scoped to one host and is not reusable: it is expected to be created and destroyed alongside the
+ * overlay it hosts.
+ *
+ * @docs-private
+ */
+class KbqActionsPanelScopedOverlayContainer extends OverlayContainer {
+    constructor() {
+        super(...arguments);
+        this.host = inject(KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_HOST).nativeElement;
+        this.window = inject(KBQ_WINDOW);
+        /** Wrapper that isolates the container from the host's own content. */
+        this.wrapperElement = null;
+        /** Whether this container holds a share of the host's promotion to a containing block. */
+        this.holdsHostPromotion = false;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.wrapperElement?.remove();
+        this.wrapperElement = null;
+        this.releaseHostPromotion();
+    }
+    /**
+     * Deliberately does not call `super`: CDK's implementation marks the container with a `platform` attribute and
+     * removes every other container carrying one, which is bookkeeping for the single application-wide container. A
+     * scoped container is not that container, and joining the scheme would make it delete — and be deleted by — the
+     * global one as soon as both exist.
+     */
+    _createContainer() {
+        const wrapper = this._document.createElement('div');
+        wrapper.classList.add(KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_CONTAINER_SELECTOR);
+        wrapper.style.position = 'absolute';
+        wrapper.style.inset = '0';
+        wrapper.style.pointerEvents = 'none';
+        const container = this._document.createElement('div');
+        container.classList.add('cdk-overlay-container');
+        // CDK styles `.cdk-overlay-container` as a viewport-sized `position: fixed` layer. A scoped container has to
+        // cover the host instead; the remaining CDK rules (`top`/`left`/`width`/`height`) already do the right thing
+        // once the element is out of the fixed positioning context.
+        container.style.position = 'absolute';
+        // The container gets a wrapper of its own rather than being appended to the host directly, because CDK's
+        // `Dialog` marks every sibling of the overlay container with `aria-hidden` while a dialog is open. Inside the
+        // host those siblings are the very content the actions panel acts on, so the container is kept as an only
+        // child and there is nothing left for CDK to hide.
+        wrapper.appendChild(container);
+        this.promoteHostToContainingBlock();
+        this.host.appendChild(wrapper);
+        this.wrapperElement = wrapper;
+        this._containerElement = container;
+    }
+    /**
+     * The wrapper is absolutely positioned, so it resolves against the nearest positioned ancestor. A `static` host
+     * would let the overlay land on some outer element instead, so it is promoted to `relative`; a host that is
+     * already positioned is left untouched.
+     */
+    promoteHostToContainingBlock() {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        const promotion = promotedHosts.get(this.host);
+        if (promotion) {
+            promotion.containers++;
+            this.holdsHostPromotion = true;
+            return;
+        }
+        // A host that is not in the document yet reports no position at all (`getComputedStyle` returns an empty
+        // declaration), and is treated as `static`: promoting one that turns out to be positioned is harmless,
+        // leaving a `static` one alone is not.
+        const { position } = this.window.getComputedStyle(this.host);
+        if (position && position !== 'static') {
+            return;
+        }
+        promotedHosts.set(this.host, { inlinePosition: this.host.style.position, containers: 1 });
+        this.host.style.position = 'relative';
+        this.holdsHostPromotion = true;
+    }
+    /** Gives the host its own `position` back once no scoped container depends on the promotion any more. */
+    releaseHostPromotion() {
+        if (!this.holdsHostPromotion) {
+            return;
+        }
+        this.holdsHostPromotion = false;
+        const promotion = promotedHosts.get(this.host);
+        if (--promotion.containers > 0) {
+            return;
+        }
+        promotedHosts.delete(this.host);
+        this.host.style.position = promotion.inlinePosition;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedOverlayContainer }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+
 /** Injection token that can be used to access the data that was passed in to actions panel. */
 const KBQ_ACTIONS_PANEL_DATA = new InjectionToken('KBQ_ACTIONS_PANEL_DATA');
 /**
  * Selector for actions panel overlay.
  *
- * @docs-private
+ * @internal
  */
 const KBQ_ACTIONS_PANEL_OVERLAY_SELECTOR = 'kbq-actions-panel-overlay';
+/**
+ * `Dialog` backing a panel that renders into an `overlayContainer`.
+ *
+ * A child `Dialog` shares `openDialogs` with the root one but keeps an `_ariaHiddenElements` map of its own, and CDK
+ * restores the `aria-hidden` marks from whichever instance happens to close the last dialog. Left apart, marks a root
+ * dialog put on the application are never taken off again. Adopting the root's map keeps both halves of that
+ * bookkeeping on the same object.
+ */
+class KbqActionsPanelScopedDialog extends Dialog {
+    constructor() {
+        super();
+        this['_ariaHiddenElements'] = inject(Dialog, { skipSelf: true })['_ariaHiddenElements'];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedDialog }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelScopedDialog, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 /**
  * Service for opening actions panel.
  */
 class KbqActionsPanel {
     constructor() {
         this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
         this.overlay = inject(Overlay);
         this.dialog = inject(Dialog);
         this.defaultConfig = inject(KBQ_ACTIONS_PANEL_DEFAULT_CONFIG);
-        this.resizeObserver = inject(SharedResizeObserver);
         /** The reference to the currently opened actions panel. */
         this.openedActionsPanelRef = null;
     }
@@ -413,80 +524,84 @@ class KbqActionsPanel {
     openDialog(componentOrTemplateRef, config = {}) {
         let actionsPanelRef;
         const { overlayContainer, overlayPanelClass } = config;
-        this.dialog.open(componentOrTemplateRef, {
-            ...config,
-            container: KbqActionsPanelContainer,
-            restoreFocus: false,
-            autoFocus: null,
-            hasBackdrop: false,
-            // Disable closing since we need to sync it up to the animation ourselves
-            closeOnOverlayDetachments: false,
-            // Disable closing since we need to sync it up to the animation ourselves
-            closeOnDestroy: false,
-            // Disable closing since we need to sync it up to the animation ourselves
-            disableClose: true,
-            scrollStrategy: config.scrollStrategy && config.scrollStrategy(this.overlay),
-            positionStrategy: overlayContainer
-                ? this.overlay
-                    .position()
-                    .flexibleConnectedTo(overlayContainer)
-                    .withPositions([{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'bottom' }])
-                    .withFlexibleDimensions()
-                    .withPush(false)
-                    .withLockedPosition()
-                    .withGrowAfterOpen()
-                : this.overlay.position().global().centerHorizontally().bottom(),
-            templateContext: () => {
-                return {
-                    $implicit: config.data,
-                    data: config.data,
-                    actionsPanelRef
-                };
-            },
-            injector: Injector.create({
-                parent: config.injector || this.injector,
-                providers: [{ provide: KbqActionsPanelConfig, useValue: config }]
-            }),
-            providers: (dialogRef, _dialogConfig, container) => {
-                actionsPanelRef = new KbqActionsPanelRef(dialogRef, container);
-                return [
-                    { provide: KbqActionsPanelRef, useValue: actionsPanelRef },
-                    { provide: KBQ_ACTIONS_PANEL_DATA, useValue: config.data }
-                ];
-            }
-        });
+        // CDK takes the overlay host from the `OverlayContainer` its `Dialog` was injected with, and there is one of
+        // those per application. Rendering the panel inside `overlayContainer` therefore means giving this panel a
+        // `Dialog` of its own, backed by a container scoped to that element.
+        const scopedInjector = overlayContainer ? this.createScopedInjector(overlayContainer) : null;
+        const dialog = scopedInjector ? scopedInjector.get(Dialog) : this.dialog;
+        try {
+            dialog.open(componentOrTemplateRef, {
+                ...config,
+                container: KbqActionsPanelContainer,
+                restoreFocus: false,
+                autoFocus: null,
+                hasBackdrop: false,
+                // Disable closing since we need to sync it up to the animation ourselves
+                closeOnOverlayDetachments: false,
+                // Disable closing since we need to sync it up to the animation ourselves
+                closeOnDestroy: false,
+                // Disable closing since we need to sync it up to the animation ourselves
+                disableClose: true,
+                scrollStrategy: config.scrollStrategy && config.scrollStrategy(this.overlay),
+                // Pinned to the bottom center of the overlay container — the viewport by default, `overlayContainer`
+                // when one is given. The panel's width follows from `.cdk-overlay-pane`'s `max-width: 100%` in both
+                // cases.
+                positionStrategy: this.overlay.position().global().centerHorizontally().bottom(),
+                templateContext: () => {
+                    return {
+                        $implicit: config.data,
+                        data: config.data,
+                        actionsPanelRef
+                    };
+                },
+                injector: Injector.create({
+                    parent: config.injector || this.injector,
+                    providers: [{ provide: KbqActionsPanelConfig, useValue: config }]
+                }),
+                providers: (dialogRef, _dialogConfig, container) => {
+                    actionsPanelRef = new KbqActionsPanelRef(dialogRef, container);
+                    return [
+                        { provide: KbqActionsPanelRef, useValue: actionsPanelRef },
+                        { provide: KBQ_ACTIONS_PANEL_DATA, useValue: config.data }
+                    ];
+                }
+            });
+        }
+        catch (error) {
+            // `open()` builds the overlay, and with it the scoped container that has already put a wrapper into the
+            // host and promoted it. Nothing else would ever destroy the injector, so unwind it here.
+            scopedInjector?.destroy();
+            throw error;
+        }
         const { overlayRef } = actionsPanelRef;
         overlayRef.addPanelClass(KBQ_ACTIONS_PANEL_OVERLAY_SELECTOR);
         if (overlayPanelClass)
             overlayRef.addPanelClass(overlayPanelClass);
-        if (overlayContainer) {
-            const { afterClosed } = actionsPanelRef;
-            this.syncOverlayMaxWidth(overlayContainer.nativeElement, overlayRef.overlayElement);
-            this.resizeObserver
-                .observe(overlayContainer.nativeElement)
-                .pipe(takeUntil(afterClosed))
-                .subscribe(() => {
-                if (this.syncOverlayMaxWidth(overlayContainer.nativeElement, overlayRef.overlayElement)) {
-                    overlayRef.updatePosition();
-                }
-            });
+        if (scopedInjector) {
+            // The scoped injector owns the panel's `Dialog` and overlay container, so it lives exactly as long as the
+            // panel. `afterClosed` emits after the overlay has been disposed of.
+            actionsPanelRef.afterClosed.subscribe(() => scopedInjector.destroy());
         }
         return actionsPanelRef;
     }
-    syncOverlayMaxWidth(container, overlayElement) {
-        const { width } = container.getBoundingClientRect();
-        if (!width)
-            return false;
-        const maxWidth = coerceCssPixelValue(width);
-        if (overlayElement.style.maxWidth === maxWidth)
-            return false;
-        overlayElement.style.maxWidth = maxWidth;
-        return true;
+    /** Injector that makes CDK render the panel's overlay inside `host` instead of `document.body`. */
+    createScopedInjector(host) {
+        return createEnvironmentInjector([
+            // A `Dialog` of its own is what carries the scoped container into `createOverlayRef` — the root one
+            // resolves the application-wide container. It still reaches the root `Dialog` through `skipSelf` and
+            // shares its registry of open dialogs, so `closeAll()` and `afterAllClosed` keep seeing this panel.
+            { provide: Dialog, useClass: KbqActionsPanelScopedDialog },
+            { provide: KBQ_ACTIONS_PANEL_SCOPED_OVERLAY_HOST, useValue: host },
+            { provide: OverlayContainer, useClass: KbqActionsPanelScopedOverlayContainer },
+            // A popover is shown in the top layer and laid out against the viewport, wherever its host sits in
+            // the DOM: the panel would leave `host` and pin itself to the bottom of the page.
+            { provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } }
+        ], this.environmentInjector, KbqActionsPanel.name);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanel, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanel, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanel, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -495,11 +610,11 @@ const COMPONENTS = [
     KbqActionsPanelContainer
 ];
 class KbqActionsPanelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelModule, imports: [KbqActionsPanelContainer], exports: [KbqActionsPanelContainer] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelModule, providers: [KbqActionsPanel], imports: [COMPONENTS] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelModule, imports: [KbqActionsPanelContainer], exports: [KbqActionsPanelContainer] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelModule, providers: [KbqActionsPanel], imports: [COMPONENTS] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionsPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqActionsPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,