@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs

@@ -1,329 +1,588 @@
-import { NgTemplateOutlet, AsyncPipe, NgClass } from '@angular/common';
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, EnvironmentInjector, ApplicationRef, TemplateRef, Injector, createComponent, Injectable, signal, viewChild, ViewContainerRef, computed, ChangeDetectionStrategy, Component, Directive, booleanAttribute, input, output, contentChild, DestroyRef } from '@angular/core';
-import * as i1 from '@testgorilla/tgo-ui/components/button';
-import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { LanguageService, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { Subject } from 'rxjs';
-
+import { AsyncPipe, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, Component, DestroyRef, Directive, EnvironmentInjector, Injectable, InjectionToken, Injector, TemplateRef, ViewContainerRef, booleanAttribute, computed, contentChild, createComponent, inject, input, output, signal, viewChild } from "@angular/core";
+import * as i1 from "@testgorilla/tgo-ui/components/button";
+import { ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { LanguageService, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { TooltipComponentModule } from "@testgorilla/tgo-ui/components/tooltip";
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { Subject } from "rxjs";
 var SidePanelAnimationState;
-(function (SidePanelAnimationState) {
-    SidePanelAnimationState["Open"] = "open";
-    SidePanelAnimationState["Closed"] = "closed";
-    SidePanelAnimationState["ClosedRight"] = "closedRight";
-    SidePanelAnimationState["ClosedLeft"] = "closedLeft";
+(function(SidePanelAnimationState) {
+	SidePanelAnimationState["Open"] = "open";
+	SidePanelAnimationState["Closed"] = "closed";
+	SidePanelAnimationState["ClosedRight"] = "closedRight";
+	SidePanelAnimationState["ClosedLeft"] = "closedLeft";
 })(SidePanelAnimationState || (SidePanelAnimationState = {}));
-class SidePanelConfig {
-}
+var SidePanelConfig = class {};
 const defaultSidePanelConfig = {
-    position: 'right',
-    showBackButton: false,
-    title: '',
-    data: undefined,
-    showHeader: true,
-    showCloseButton: true,
-    size: 'small',
+	position: "right",
+	showBackButton: false,
+	title: "",
+	data: void 0,
+	showHeader: true,
+	showCloseButton: true,
+	size: "small"
 };
-const SIDE_PANEL_CONFIG = new InjectionToken('SIDE_PANEL_CONFIG', {
-    providedIn: 'root',
-    factory: () => defaultSidePanelConfig,
+const SIDE_PANEL_CONFIG = new InjectionToken("SIDE_PANEL_CONFIG", {
+	providedIn: "root",
+	factory: () => defaultSidePanelConfig
 });
-/**
- * Reference to a side panel opened via the SidePanelService.
- * Similar to MatDialogRef from Angular Material.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors MatDialogRef<T, R = any>: untyped-by-default result/component types for consumer ergonomics; the ref is invariant in T/R so `unknown` defaults would break internal ref storage in SidePanelService
-class SidePanelRef {
-    constructor() {
-        this._afterClosed = new Subject();
-    }
-    /**
-     * Observable that emits when the side panel is closed.
-     * Emits the result passed to the close method, or undefined if no result was provided.
-     */
-    afterClosed() {
-        return this._afterClosed.asObservable();
-    }
-    /**
-     * Closes the side panel with an optional result.
-     * @param result Optional data to be emitted via afterClosed()
-     */
-    close(_result) {
-        // This will be overridden by the service
-    }
-    /** @internal */
-    _emitClose(result) {
-        this._afterClosed.next(result);
-        this._afterClosed.complete();
-    }
-}
-
-/* eslint-disable @typescript-eslint/no-deprecated -- the @angular/animations trigger/state/style/animate/transition DSL is deprecated in 20.2 in favor of template-level animate.enter/animate.leave; migrating every Material/component animation is out of scope for this lint pass */
+var SidePanelRef = class {
+	constructor() {
+		this._afterClosed = new Subject();
+	}
+	afterClosed() {
+		return this._afterClosed.asObservable();
+	}
+	close(_result) {}
+	_emitClose(result) {
+		this._afterClosed.next(result);
+		this._afterClosed.complete();
+	}
+};
 const sidePanelAnimationDuration = 150;
-const sidePanelAnimation = [
-    trigger('slideInOut', [
-        state(`${SidePanelAnimationState.Open}`, style({ transform: 'translateX(0)' })),
-        state(`${SidePanelAnimationState.ClosedRight}`, style({ transform: 'translateX(100%)' })),
-        state(`${SidePanelAnimationState.ClosedLeft}`, style({ transform: 'translateX(-100%)' })),
-        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedRight}`, [
-            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
-        ]),
-        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedLeft}`, [
-            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
-        ]),
-    ]),
-];
-const backdropAnimation = [
-    trigger('fadeInOut', [
-        state(`${SidePanelAnimationState.Open}`, style({ opacity: 0.25 })),
-        state(`${SidePanelAnimationState.Closed}`, style({ opacity: 0 })),
-        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.Closed}`, [
-            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
-        ]),
-    ]),
-];
-
-const SIDE_PANEL_DATA = new InjectionToken('SIDE_PANEL_DATA');
-
-class SidePanelService {
-    constructor() {
-        this.defaultSidePanelConfig = inject(SIDE_PANEL_CONFIG);
-        this.injector = inject(EnvironmentInjector);
-        this.appRef = inject(ApplicationRef);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors MatDialog.open<T, R = any>: the returned ref's data/component types are untyped-by-default for consumer ergonomics
-    open(content, config, parentInjector) {
-        const panelConfig = { ...this.defaultSidePanelConfig, ...config };
-        const sidePanelRef = new SidePanelRef();
-        this.currentSidePanelRef = sidePanelRef;
-        sidePanelRef.close = (result) => {
-            this.close(result);
-        };
-        if (!this.SidePanelComponentRef) {
-            const injector = this.createSidePanelInjector(panelConfig, parentInjector);
-            const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);
-            this.SidePanelComponentRef = SidePanelComponentRef;
-        }
-        if (content instanceof TemplateRef) {
-            this.loadTemplate(content);
-        }
-        else {
-            this.loadComponent(content, sidePanelRef);
-        }
-        this.SidePanelComponentRef.instance.open();
-        return sidePanelRef;
-    }
-    close(result) {
-        if (this.SidePanelComponentRef) {
-            this.SidePanelComponentRef.instance.close(result);
-        }
-    }
-    destroyComponent(result) {
-        if (this.currentSidePanelRef) {
-            // eslint-disable-next-line no-underscore-dangle -- _emitClose is SidePanelRef's @internal API (mirrors MatDialogRef internals)
-            this.currentSidePanelRef._emitClose(result);
-            this.currentSidePanelRef = undefined;
-        }
-        if (this.SidePanelComponentRef) {
-            this.appRef.detachView(this.SidePanelComponentRef.hostView);
-            this.SidePanelComponentRef.destroy();
-            this.SidePanelComponentRef = undefined;
-        }
-        if (this.contentComponentRef) {
-            this.contentComponentRef.destroy();
-            this.contentComponentRef = undefined;
-        }
-    }
-    createSidePanelInjector(config, parentInjector) {
-        return Injector.create({
-            parent: parentInjector,
-            providers: [
-                { provide: SidePanelConfig, useValue: config },
-                { provide: SIDE_PANEL_DATA, useValue: config.data },
-            ],
-        });
-    }
-    createSidePanelComponent(position, injector) {
-        const sidePanelComponentRef = createComponent(SidePanelComponent, {
-            environmentInjector: this.injector,
-            elementInjector: injector,
-        });
-        this.appRef.attachView(sidePanelComponentRef.hostView);
-        const sidePanelEl = sidePanelComponentRef.hostView.rootNodes[0];
-        sidePanelEl.querySelector('.side-panel')?.classList.add(position);
-        document.body.appendChild(sidePanelEl);
-        return sidePanelComponentRef;
-    }
-    loadComponent(component, sidePanelRef) {
-        const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
-        if (viewContainerRef) {
-            viewContainerRef().clear();
-            this.contentComponentRef = viewContainerRef().createComponent(component);
-            // Set the component instance on the SidePanelRef
-            sidePanelRef.componentInstance = this.contentComponentRef.instance;
-        }
-    }
-    loadTemplate(template) {
-        const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
-        if (viewContainerRef) {
-            viewContainerRef().clear();
-            this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class SidePanelComponent {
-    constructor() {
-        this.sidePanelService = inject(SidePanelService);
-        this.sidePanelConfig = inject(SidePanelConfig);
-        this.sidePanelPosition = signal('right', ...(ngDevMode ? [{ debugName: "sidePanelPosition" }] : /* istanbul ignore next */ []));
-        this.sidePanelContainer = viewChild.required('sidePanelContainer', { read: ViewContainerRef });
-        this.sidePanel = viewChild.required('sidePanel');
-        this.backdrop = viewChild.required('sidePanelBackdrop');
-        this.language = LanguageService.defaultLanguage;
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.size = signal(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.isSmall = computed(() => this.size() === 'small', ...(ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []));
-        this.isLarge = computed(() => this.size() === 'large', ...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
-        this.isXLarge = computed(() => this.size() === 'x-large', ...(ngDevMode ? [{ debugName: "isXLarge" }] : /* istanbul ignore next */ []));
-        this.activeView = signal(null, ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
-        // The active view owns the header and the footer while it is registered, falling back to the config.
-        this.headerTitle = computed(() => this.activeView()?.title() ?? this.sidePanelConfig.title, ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
-        this.showBackButton = computed(() => this.activeView()?.showBackButton() ?? this.sidePanelConfig.showBackButton, ...(ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []));
-        this.footerTemplate = computed(() => this.activeView()?.footerTemplate() ?? null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
-        /** A view owns the back button only when it asked for one; otherwise the config did. */
-        this.viewOwnsBackButton = computed(() => this.activeView()?.showBackButton() !== undefined, ...(ngDevMode ? [{ debugName: "viewOwnsBackButton" }] : /* istanbul ignore next */ []));
-        this.footerDivider = computed(() => this.activeView()?.footerDivider() ?? false, ...(ngDevMode ? [{ debugName: "footerDivider" }] : /* istanbul ignore next */ []));
-        this.fillHeight = computed(() => this.activeView()?.fillHeight() ?? false, ...(ngDevMode ? [{ debugName: "fillHeight" }] : /* istanbul ignore next */ []));
-        this.animation = computed(() => {
-            if (this.isOpen()) {
-                return SidePanelAnimationState.Open;
-            }
-            return this.sidePanelPosition() === 'left'
-                ? SidePanelAnimationState.ClosedLeft
-                : SidePanelAnimationState.ClosedRight;
-        }, ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
-        // The config is injected once per panel and never mutated, so plain readonly fields suffice.
-        this.closeButtonTestId = this.sidePanelConfig.testId ? `${this.sidePanelConfig.testId}-close` : null;
-        this.backButtonTestId = this.sidePanelConfig.testId ? `${this.sidePanelConfig.testId}-back` : null;
-        const { position, size } = this.sidePanelConfig;
-        this.sidePanelPosition.set(position);
-        this.size.set(size);
-    }
-    /** The last view to register wins, so a control-flow swap in either order ends up correct. */
-    registerView(view) {
-        this.activeView.set(view);
-    }
-    /** Guarded by identity so a view destroyed after its successor was created cannot unseat it. */
-    unregisterView(view) {
-        if (this.activeView() === view) {
-            this.activeView.set(null);
-        }
-    }
-    /**
-     * The action follows whoever asked for the button, so that a consumer who leaves the flag in the
-     * config and adopts a view for its footer gets the old close behaviour rather than a dead button.
-     */
-    onBack() {
-        const view = this.activeView();
-        if (view && this.viewOwnsBackButton()) {
-            view.back.emit();
-            return;
-        }
-        this.close();
-    }
-    open() {
-        setTimeout(() => {
-            this.isOpen.set(true);
-        });
-    }
-    close(result) {
-        this.isOpen.set(false);
-        setTimeout(() => {
-            this.sidePanelService.destroyComponent(result);
-        }, sidePanelAnimationDuration);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  [class.side-panel-x-large]=\"isXLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n  [attr.data-testid]=\"sidePanelConfig.testId ?? null\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (showBackButton()) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"onBack()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [testId]=\"backButtonTestId\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ headerTitle() }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\" [class.side-panel-content-fill]=\"fillHeight()\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n\n  @if (footerTemplate(); as footer) {\n    <div class=\"side-panel-footer\" [class.side-panel-footer-divided]=\"footerDivider()\">\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;height:100vh;height:100dvh;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel.side-panel-x-large{width:1200px}@media(max-width:1280px){.side-panel.side-panel-x-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;min-height:0;flex:1;padding-right:16px;margin-right:-16px}.side-panel-content-fill{position:relative;overflow:hidden;padding-right:0;margin-right:0}.side-panel-footer{display:flex;align-items:center;justify-content:flex-end;column-gap:16px;flex:0 0 auto;min-height:48px;margin:0 -32px -32px;padding:16px 32px;background-color:#fff}.side-panel-footer-divided{border-top:1px solid #e9e9e9}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass, NgTemplateOutlet], template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  [class.side-panel-x-large]=\"isXLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n  [attr.data-testid]=\"sidePanelConfig.testId ?? null\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (showBackButton()) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"onBack()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [testId]=\"backButtonTestId\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ headerTitle() }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\" [class.side-panel-content-fill]=\"fillHeight()\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n\n  @if (footerTemplate(); as footer) {\n    <div class=\"side-panel-footer\" [class.side-panel-footer-divided]=\"footerDivider()\">\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;height:100vh;height:100dvh;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel.side-panel-x-large{width:1200px}@media(max-width:1280px){.side-panel.side-panel-x-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;min-height:0;flex:1;padding-right:16px;margin-right:-16px}.side-panel-content-fill{position:relative;overflow:hidden;padding-right:0;margin-right:0}.side-panel-footer{display:flex;align-items:center;justify-content:flex-end;column-gap:16px;flex:0 0 auto;min-height:48px;margin:0 -32px -32px;padding:16px 32px;background-color:#fff}.side-panel-footer-divided{border-top:1px solid #e9e9e9}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { sidePanelContainer: [{ type: i0.ViewChild, args: ['sidePanelContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], sidePanel: [{ type: i0.ViewChild, args: ['sidePanel', { isSignal: true }] }], backdrop: [{ type: i0.ViewChild, args: ['sidePanelBackdrop', { isSignal: true }] }] } });
-
-/** Marks the `ng-template` inside a `ui-side-panel-view` that holds the view's footer. */
-class SidePanelFooterDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: SidePanelFooterDirective, isStandalone: true, selector: "ng-template[uiSidePanelFooter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[uiSidePanelFooter]',
-                    standalone: true,
-                }]
-        }] });
-
-// `undefined` has to survive so the panel can tell "not set by this view" apart from an
-// explicit `false` and fall back to `SidePanelConfig`.
+const sidePanelAnimation = [trigger("slideInOut", [
+	state(`${SidePanelAnimationState.Open}`, style({ transform: "translateX(0)" })),
+	state(`${SidePanelAnimationState.ClosedRight}`, style({ transform: "translateX(100%)" })),
+	state(`${SidePanelAnimationState.ClosedLeft}`, style({ transform: "translateX(-100%)" })),
+	transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedRight}`, [animate(`150ms ease-in-out`)]),
+	transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedLeft}`, [animate(`150ms ease-in-out`)])
+])];
+const backdropAnimation = [trigger("fadeInOut", [
+	state(`${SidePanelAnimationState.Open}`, style({ opacity: .25 })),
+	state(`${SidePanelAnimationState.Closed}`, style({ opacity: 0 })),
+	transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.Closed}`, [animate(`150ms ease-in-out`)])
+])];
+const SIDE_PANEL_DATA = new InjectionToken("SIDE_PANEL_DATA");
+var SidePanelService = class SidePanelService {
+	constructor() {
+		this.defaultSidePanelConfig = inject(SIDE_PANEL_CONFIG);
+		this.injector = inject(EnvironmentInjector);
+		this.appRef = inject(ApplicationRef);
+	}
+	open(content, config, parentInjector) {
+		const panelConfig = {
+			...this.defaultSidePanelConfig,
+			...config
+		};
+		const sidePanelRef = new SidePanelRef();
+		this.currentSidePanelRef = sidePanelRef;
+		sidePanelRef.close = (result) => {
+			this.close(result);
+		};
+		if (!this.SidePanelComponentRef) {
+			const injector = this.createSidePanelInjector(panelConfig, parentInjector);
+			const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);
+			this.SidePanelComponentRef = SidePanelComponentRef;
+		}
+		if (content instanceof TemplateRef) this.loadTemplate(content);
+		else this.loadComponent(content, sidePanelRef);
+		this.SidePanelComponentRef.instance.open();
+		return sidePanelRef;
+	}
+	close(result) {
+		if (this.SidePanelComponentRef) this.SidePanelComponentRef.instance.close(result);
+	}
+	destroyComponent(result) {
+		if (this.currentSidePanelRef) {
+			this.currentSidePanelRef._emitClose(result);
+			this.currentSidePanelRef = void 0;
+		}
+		if (this.SidePanelComponentRef) {
+			this.appRef.detachView(this.SidePanelComponentRef.hostView);
+			this.SidePanelComponentRef.destroy();
+			this.SidePanelComponentRef = void 0;
+		}
+		if (this.contentComponentRef) {
+			this.contentComponentRef.destroy();
+			this.contentComponentRef = void 0;
+		}
+	}
+	createSidePanelInjector(config, parentInjector) {
+		return Injector.create({
+			parent: parentInjector,
+			providers: [{
+				provide: SidePanelConfig,
+				useValue: config
+			}, {
+				provide: SIDE_PANEL_DATA,
+				useValue: config.data
+			}]
+		});
+	}
+	createSidePanelComponent(position, injector) {
+		const sidePanelComponentRef = createComponent(SidePanelComponent, {
+			environmentInjector: this.injector,
+			elementInjector: injector
+		});
+		this.appRef.attachView(sidePanelComponentRef.hostView);
+		const sidePanelEl = sidePanelComponentRef.hostView.rootNodes[0];
+		sidePanelEl.querySelector(".side-panel")?.classList.add(position);
+		document.body.appendChild(sidePanelEl);
+		return sidePanelComponentRef;
+	}
+	loadComponent(component, sidePanelRef) {
+		const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+		if (viewContainerRef) {
+			viewContainerRef().clear();
+			this.contentComponentRef = viewContainerRef().createComponent(component);
+			sidePanelRef.componentInstance = this.contentComponentRef.instance;
+		}
+	}
+	loadTemplate(template) {
+		const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+		if (viewContainerRef) {
+			viewContainerRef().clear();
+			this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SidePanelService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SidePanelService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SidePanelService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var SidePanelComponent = class SidePanelComponent {
+	constructor() {
+		this.sidePanelService = inject(SidePanelService);
+		this.sidePanelConfig = inject(SidePanelConfig);
+		this.sidePanelPosition = signal("right", ...ngDevMode ? [{ debugName: "sidePanelPosition" }] : /* istanbul ignore next */ []);
+		this.sidePanelContainer = viewChild.required("sidePanelContainer", {
+			...ngDevMode ? { debugName: "sidePanelContainer" } : /* istanbul ignore next */ {},
+			read: ViewContainerRef
+		});
+		this.sidePanel = viewChild.required("sidePanel", ...ngDevMode ? [{ debugName: "sidePanel" }] : /* istanbul ignore next */ []);
+		this.backdrop = viewChild.required("sidePanelBackdrop", ...ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []);
+		this.language = LanguageService.defaultLanguage;
+		this.isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+		this.size = signal(void 0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.isSmall = computed(() => this.size() === "small", ...ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []);
+		this.isLarge = computed(() => this.size() === "large", ...ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []);
+		this.isXLarge = computed(() => this.size() === "x-large", ...ngDevMode ? [{ debugName: "isXLarge" }] : /* istanbul ignore next */ []);
+		this.activeView = signal(null, ...ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []);
+		this.headerTitle = computed(() => this.activeView()?.title() ?? this.sidePanelConfig.title, ...ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []);
+		this.showBackButton = computed(() => this.activeView()?.showBackButton() ?? this.sidePanelConfig.showBackButton, ...ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []);
+		this.footerTemplate = computed(() => this.activeView()?.footerTemplate() ?? null, ...ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []);
+		this.viewOwnsBackButton = computed(() => this.activeView()?.showBackButton() !== void 0, ...ngDevMode ? [{ debugName: "viewOwnsBackButton" }] : /* istanbul ignore next */ []);
+		this.footerDivider = computed(() => this.activeView()?.footerDivider() ?? false, ...ngDevMode ? [{ debugName: "footerDivider" }] : /* istanbul ignore next */ []);
+		this.fillHeight = computed(() => this.activeView()?.fillHeight() ?? false, ...ngDevMode ? [{ debugName: "fillHeight" }] : /* istanbul ignore next */ []);
+		this.animation = computed(() => {
+			if (this.isOpen()) return SidePanelAnimationState.Open;
+			return this.sidePanelPosition() === "left" ? SidePanelAnimationState.ClosedLeft : SidePanelAnimationState.ClosedRight;
+		}, ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
+		this.closeButtonTestId = this.sidePanelConfig.testId ? `${this.sidePanelConfig.testId}-close` : null;
+		this.backButtonTestId = this.sidePanelConfig.testId ? `${this.sidePanelConfig.testId}-back` : null;
+		const { position, size } = this.sidePanelConfig;
+		this.sidePanelPosition.set(position);
+		this.size.set(size);
+	}
+	registerView(view) {
+		this.activeView.set(view);
+	}
+	unregisterView(view) {
+		if (this.activeView() === view) this.activeView.set(null);
+	}
+	onBack() {
+		const view = this.activeView();
+		if (view && this.viewOwnsBackButton()) {
+			view.back.emit();
+			return;
+		}
+		this.close();
+	}
+	open() {
+		setTimeout(() => {
+			this.isOpen.set(true);
+		});
+	}
+	close(result) {
+		this.isOpen.set(false);
+		setTimeout(() => {
+			this.sidePanelService.destroyComponent(result);
+		}, 150);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SidePanelComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: SidePanelComponent,
+			isStandalone: true,
+			selector: "ui-side-panel",
+			viewQueries: [
+				{
+					propertyName: "sidePanelContainer",
+					first: true,
+					predicate: ["sidePanelContainer"],
+					descendants: true,
+					read: ViewContainerRef,
+					isSignal: true
+				},
+				{
+					propertyName: "sidePanel",
+					first: true,
+					predicate: ["sidePanel"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "backdrop",
+					first: true,
+					predicate: ["sidePanelBackdrop"],
+					descendants: true,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  [class.side-panel-x-large]=\"isXLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n  [attr.data-testid]=\"sidePanelConfig.testId ?? null\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (showBackButton()) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"onBack()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [testId]=\"backButtonTestId\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ headerTitle() }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\" [class.side-panel-content-fill]=\"fillHeight()\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n\n  @if (footerTemplate(); as footer) {\n    <div class=\"side-panel-footer\" [class.side-panel-footer-divided]=\"footerDivider()\">\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;height:100vh;height:100dvh;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel.side-panel-x-large{width:1200px}@media(max-width:1280px){.side-panel.side-panel-x-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;min-height:0;flex:1;padding-right:16px;margin-right:-16px}.side-panel-content-fill{position:relative;overflow:hidden;padding-right:0;margin-right:0}.side-panel-footer{display:flex;align-items:center;justify-content:flex-end;column-gap:16px;flex:0 0 auto;min-height:48px;margin:0 -32px -32px;padding:16px 32px;background-color:#fff}.side-panel-footer-divided{border-top:1px solid #e9e9e9}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: TooltipComponentModule
+				},
+				{
+					kind: "ngmodule",
+					type: ButtonComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				}
+			],
+			animations: [sidePanelAnimation, backdropAnimation],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SidePanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-side-panel",
+			animations: [sidePanelAnimation, backdropAnimation],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				TooltipComponentModule,
+				ButtonComponentModule,
+				UiTranslatePipe,
+				AsyncPipe,
+				NgClass,
+				NgTemplateOutlet
+			],
+			template: "<div\n  class=\"side-panel-backdrop\"\n  #sidePanelBackdrop\n  tabindex=\"0\"\n  (click)=\"close()\"\n  (keydown.enter)=\"close()\"\n  [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  [class.side-panel-x-large]=\"isXLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n  [attr.data-testid]=\"sidePanelConfig.testId ?? null\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (showBackButton()) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"onBack()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            [testId]=\"backButtonTestId\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ headerTitle() }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\" [class.side-panel-content-fill]=\"fillHeight()\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n\n  @if (footerTemplate(); as footer) {\n    <div class=\"side-panel-footer\" [class.side-panel-footer-divided]=\"footerDivider()\">\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;height:100vh;height:100dvh;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media(max-width:600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media(max-width:600px){.side-panel.side-panel-large{width:100%}}@media(max-width:960px){.side-panel.side-panel-large{width:100%}}.side-panel.side-panel-x-large{width:1200px}@media(max-width:1280px){.side-panel.side-panel-x-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;min-height:0;flex:1;padding-right:16px;margin-right:-16px}.side-panel-content-fill{position:relative;overflow:hidden;padding-right:0;margin-right:0}.side-panel-footer{display:flex;align-items:center;justify-content:flex-end;column-gap:16px;flex:0 0 auto;min-height:48px;margin:0 -32px -32px;padding:16px 32px;background-color:#fff}.side-panel-footer-divided{border-top:1px solid #e9e9e9}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		sidePanelContainer: [{
+			type: i0.ViewChild,
+			args: ["sidePanelContainer", {
+				read: ViewContainerRef,
+				isSignal: true
+			}]
+		}],
+		sidePanel: [{
+			type: i0.ViewChild,
+			args: ["sidePanel", { isSignal: true }]
+		}],
+		backdrop: [{
+			type: i0.ViewChild,
+			args: ["sidePanelBackdrop", { isSignal: true }]
+		}]
+	}
+});
+var SidePanelFooterDirective = class SidePanelFooterDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SidePanelFooterDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: SidePanelFooterDirective,
+			isStandalone: true,
+			selector: "ng-template[uiSidePanelFooter]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SidePanelFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[uiSidePanelFooter]",
+			standalone: true
+		}]
+	}]
+});
 function optionalBooleanAttribute(value) {
-    return value === undefined ? undefined : booleanAttribute(value);
+	return value === void 0 ? void 0 : booleanAttribute(value);
 }
-/**
- * One view inside a side panel: its body, its header title and its footer. Render a different
- * one per step to switch views without reopening the panel.
- */
-class SidePanelViewComponent {
-    constructor() {
-        /** Left unset, the panel keeps the title from `SidePanelConfig`. */
-        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
-        /** Left unset, the panel falls back to `SidePanelConfig.showBackButton`. */
-        this.showBackButton = input(undefined, { ...(ngDevMode ? { debugName: "showBackButton" } : /* istanbul ignore next */ {}), transform: optionalBooleanAttribute });
-        /** Draws a rule above the footer, separating it from content that scrolls underneath. */
-        this.footerDivider = input(false, { ...(ngDevMode ? { debugName: "footerDivider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Makes the view fill the panel body instead of growing with its content, and stops the panel
-         * scrolling. Content then owns its own overflow — give the element that should scroll
-         * `flex: 1; min-height: 0; overflow: auto`, or `height: 100%`.
-         */
-        this.fillHeight = input(false, { ...(ngDevMode ? { debugName: "fillHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** The panel does not close itself — move to the previous view, or close it yourself. */
-        this.back = output();
-        this.footer = contentChild(SidePanelFooterDirective, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
-        this.footerTemplate = computed(() => this.footer()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
-        this.panel = inject(SidePanelComponent, { optional: true });
-        this.panel?.registerView(this);
-        inject(DestroyRef).onDestroy(() => this.panel?.unregisterView(this));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: SidePanelViewComponent, isStandalone: true, selector: "ui-side-panel-view", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, footerDivider: { classPropertyName: "footerDivider", publicName: "footerDivider", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { properties: { "class.side-panel-view-fill": "fillHeight()", "attr.title": "null" } }, queries: [{ propertyName: "footer", first: true, predicate: SidePanelFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host(.side-panel-view-fill){position:absolute;inset:0;display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SidePanelViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-side-panel-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
-                        '[class.side-panel-view-fill]': 'fillHeight()',
-                        // `title` is a global HTML attribute and Angular keeps a statically set one on the host, so
-                        // `<ui-side-panel-view title="...">` would hang a native tooltip over the whole view body.
-                        '[attr.title]': 'null',
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host(.side-panel-view-fill){position:absolute;inset:0;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], footerDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerDivider", required: false }] }], fillHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHeight", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SidePanelFooterDirective), { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SidePanelViewComponent = class SidePanelViewComponent {
+	constructor() {
+		this.title = input(...ngDevMode ? [void 0, { debugName: "title" }] : /* istanbul ignore next */ []);
+		this.showBackButton = input(void 0, {
+			...ngDevMode ? { debugName: "showBackButton" } : /* istanbul ignore next */ {},
+			transform: optionalBooleanAttribute
+		});
+		this.footerDivider = input(false, {
+			...ngDevMode ? { debugName: "footerDivider" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.fillHeight = input(false, {
+			...ngDevMode ? { debugName: "fillHeight" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.back = output();
+		this.footer = contentChild(SidePanelFooterDirective, ...ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []);
+		this.footerTemplate = computed(() => this.footer()?.templateRef ?? null, ...ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []);
+		this.panel = inject(SidePanelComponent, { optional: true });
+		this.panel?.registerView(this);
+		inject(DestroyRef).onDestroy(() => this.panel?.unregisterView(this));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SidePanelViewComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.4",
+			type: SidePanelViewComponent,
+			isStandalone: true,
+			selector: "ui-side-panel-view",
+			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showBackButton: {
+					classPropertyName: "showBackButton",
+					publicName: "showBackButton",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				footerDivider: {
+					classPropertyName: "footerDivider",
+					publicName: "footerDivider",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fillHeight: {
+					classPropertyName: "fillHeight",
+					publicName: "fillHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { back: "back" },
+			host: { properties: {
+				"class.side-panel-view-fill": "fillHeight()",
+				"attr.title": "null"
+			} },
+			queries: [{
+				propertyName: "footer",
+				first: true,
+				predicate: SidePanelFooterDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-content></ng-content>\n",
+			styles: [":host{display:block}:host(.side-panel-view-fill){position:absolute;inset:0;display:flex;flex-direction:column}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SidePanelViewComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-side-panel-view",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: true,
+			host: {
+				"[class.side-panel-view-fill]": "fillHeight()",
+				"[attr.title]": "null"
+			},
+			template: "<ng-content></ng-content>\n",
+			styles: [":host{display:block}:host(.side-panel-view-fill){position:absolute;inset:0;display:flex;flex-direction:column}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		showBackButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showBackButton",
+				required: false
+			}]
+		}],
+		footerDivider: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footerDivider",
+				required: false
+			}]
+		}],
+		fillHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillHeight",
+				required: false
+			}]
+		}],
+		back: [{
+			type: i0.Output,
+			args: ["back"]
+		}],
+		footer: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => SidePanelFooterDirective), { isSignal: true }]
+		}]
+	}
+});
 export { SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelFooterDirective, SidePanelRef, SidePanelService, SidePanelViewComponent, backdropAnimation, defaultSidePanelConfig, sidePanelAnimation, sidePanelAnimationDuration };
-//# sourceMappingURL=testgorilla-tgo-ui-components-side-panel.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-side-panel.mjs.map