@testgorilla/tgo-ui 11.15.0 → 11.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "11.15.0",
+  "version": "11.17.0",
   "license": "proprietary-license",
   "lint-staged": {
     "{projects,components}/**/*.ts": [

package/types/testgorilla-tgo-ui-components-side-panel.d.ts

@@ -1,6 +1,6 @@
 import * as _testgorilla_tgo_ui_components_core from '@testgorilla/tgo-ui/components/core';
 import * as _angular_core from '@angular/core';
-import { InjectionToken, ViewContainerRef, ElementRef, Type, TemplateRef, Injector } from '@angular/core';
+import { InjectionToken, Signal, TemplateRef, OutputEmitterRef, ViewContainerRef, ElementRef, Type, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as _angular_animations from '@angular/animations';
 
@@ -12,6 +12,19 @@ declare enum SidePanelAnimationState {
     ClosedLeft = "closedLeft"
 }
 type SidePanelSize = 'small' | 'large' | 'x-large';
+/**
+ * What a `ui-side-panel-view` registers with the surrounding `SidePanelComponent`. The panel
+ * types its registration against this rather than importing the view component, which keeps
+ * the two files free of a runtime import cycle. `undefined` means "falls back to the config".
+ */
+interface SidePanelViewRef {
+    readonly title: Signal<string | undefined>;
+    readonly showBackButton: Signal<boolean | undefined>;
+    readonly footerTemplate: Signal<TemplateRef<unknown> | null>;
+    readonly footerDivider: Signal<boolean>;
+    readonly fillHeight: Signal<boolean>;
+    readonly back: OutputEmitterRef<void>;
+}
 declare class SidePanelConfig {
     title: string;
     position: SidePanelPosition;
@@ -51,6 +64,8 @@ declare class SidePanelRef<T = any, R = any> {
 }
 
 declare class SidePanelComponent {
+    private readonly sidePanelService;
+    sidePanelConfig: SidePanelConfig;
     sidePanelPosition: _angular_core.WritableSignal<SidePanelPosition>;
     sidePanelContainer: _angular_core.Signal<ViewContainerRef>;
     sidePanel: _angular_core.Signal<ElementRef<HTMLDivElement>>;
@@ -61,18 +76,67 @@ declare class SidePanelComponent {
     isSmall: _angular_core.Signal<boolean>;
     isLarge: _angular_core.Signal<boolean>;
     isXLarge: _angular_core.Signal<boolean>;
+    private readonly activeView;
+    protected readonly headerTitle: _angular_core.Signal<string>;
+    protected readonly showBackButton: _angular_core.Signal<boolean>;
+    protected readonly footerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    /** A view owns the back button only when it asked for one; otherwise the config did. */
+    private readonly viewOwnsBackButton;
+    protected readonly footerDivider: _angular_core.Signal<boolean>;
+    protected readonly fillHeight: _angular_core.Signal<boolean>;
     animation: _angular_core.Signal<SidePanelAnimationState.Open | SidePanelAnimationState.ClosedRight | SidePanelAnimationState.ClosedLeft>;
-    private readonly sidePanelService;
-    sidePanelConfig: SidePanelConfig;
     protected readonly closeButtonTestId: string | null;
     protected readonly backButtonTestId: string | null;
     constructor();
+    /** The last view to register wins, so a control-flow swap in either order ends up correct. */
+    registerView(view: SidePanelViewRef): void;
+    /** Guarded by identity so a view destroyed after its successor was created cannot unseat it. */
+    unregisterView(view: SidePanelViewRef): void;
+    /**
+     * 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.
+     */
+    protected onBack(): void;
     open(): void;
     close(result?: unknown): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidePanelComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidePanelComponent, "ui-side-panel", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * 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.
+ */
+declare class SidePanelViewComponent implements SidePanelViewRef {
+    /** Left unset, the panel keeps the title from `SidePanelConfig`. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Left unset, the panel falls back to `SidePanelConfig.showBackButton`. */
+    readonly showBackButton: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Draws a rule above the footer, separating it from content that scrolls underneath. */
+    readonly footerDivider: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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%`.
+     */
+    readonly fillHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The panel does not close itself — move to the previous view, or close it yourself. */
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    private readonly footer;
+    readonly footerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    private readonly panel;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidePanelViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidePanelViewComponent, "ui-side-panel-view", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "footerDivider": { "alias": "footerDivider"; "required": false; "isSignal": true; }; "fillHeight": { "alias": "fillHeight"; "required": false; "isSignal": true; }; }, { "back": "back"; }, ["footer"], ["*"], true, never>;
+}
+
+/** Marks the `ng-template` inside a `ui-side-panel-view` that holds the view's footer. */
+declare class SidePanelFooterDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidePanelFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidePanelFooterDirective, "ng-template[uiSidePanelFooter]", never, {}, {}, never, never, true, never>;
+}
+
 declare class SidePanelService {
     private SidePanelComponentRef?;
     private contentComponentRef?;
@@ -99,5 +163,5 @@ declare const backdropAnimation: _angular_animations.AnimationTriggerMetadata[];
 
 declare const SIDE_PANEL_DATA: InjectionToken<unknown>;
 
-export { SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelRef, SidePanelService, backdropAnimation, defaultSidePanelConfig, sidePanelAnimation, sidePanelAnimationDuration };
-export type { SidePanelPosition, SidePanelSize };
+export { SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelFooterDirective, SidePanelRef, SidePanelService, SidePanelViewComponent, backdropAnimation, defaultSidePanelConfig, sidePanelAnimation, sidePanelAnimationDuration };
+export type { SidePanelPosition, SidePanelSize, SidePanelViewRef };

package/types/testgorilla-tgo-ui-components-slider.d.ts

@@ -132,6 +132,13 @@ declare class SliderComponent implements Validator {
      * Basic variant only. See {@link dragStart}.
      */
     dragEnd: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Emitted with the thumb's current value on every move while the user is dragging it.
+     * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never
+     * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.
+     */
+    dragMove: _angular_core.OutputEmitterRef<number>;
+    private isDragging;
     /**
      * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.
      * Starts true to keep the at-rest markup identical to what the component shipped before
@@ -157,6 +164,7 @@ declare class SliderComponent implements Validator {
     protected onValueChange(ev?: number): void;
     protected onSliderHover(isHovered: boolean): void;
     protected onDragStart(event: MatSliderDragEvent): void;
+    protected onDragMove(value: number): void;
     protected onDragEnd(event: MatSliderDragEvent): void;
     protected onInputBlur(inputName: string): void;
     protected onInputFocus(): void;
@@ -166,7 +174,7 @@ declare class SliderComponent implements Validator {
     formatLabel(value: number): string;
     validate(control: AbstractControl): ValidationErrors | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, [{ optional: true; }]>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "ui-slider", never, { "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "sliderStart": { "alias": "sliderStart"; "required": false; }; "sliderEnd": { "alias": "sliderEnd"; "required": false; }; "label": { "alias": "label"; "required": false; }; "showInputs": { "alias": "showInputs"; "required": false; }; "step": { "alias": "step"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; "useDecimal": { "alias": "useDecimal"; "required": false; "isSignal": true; }; "useThousandsSeparator": { "alias": "useThousandsSeparator"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "showValueBubble": { "alias": "showValueBubble"; "required": false; "isSignal": true; }; }, { "sliderValueChange": "sliderValueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "ui-slider", never, { "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "sliderStart": { "alias": "sliderStart"; "required": false; }; "sliderEnd": { "alias": "sliderEnd"; "required": false; }; "label": { "alias": "label"; "required": false; }; "showInputs": { "alias": "showInputs"; "required": false; }; "step": { "alias": "step"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; "useDecimal": { "alias": "useDecimal"; "required": false; "isSignal": true; }; "useThousandsSeparator": { "alias": "useThousandsSeparator"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "showValueBubble": { "alias": "showValueBubble"; "required": false; "isSignal": true; }; }, { "sliderValueChange": "sliderValueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; "dragMove": "dragMove"; }, never, never, true, never>;
 }
 
 declare class SliderComponentModule {