@testgorilla/tgo-ui 10.2.0 → 10.4.0

package/package.json

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

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

@@ -11,7 +11,7 @@ declare enum SidePanelAnimationState {
     ClosedRight = "closedRight",
     ClosedLeft = "closedLeft"
 }
-type SidePanelSize = 'small' | 'large';
+type SidePanelSize = 'small' | 'large' | 'x-large';
 declare class SidePanelConfig {
     title: string;
     position: SidePanelPosition;
@@ -59,6 +59,7 @@ declare class SidePanelComponent {
     size: _angular_core.WritableSignal<SidePanelSize | undefined>;
     isSmall: _angular_core.Signal<boolean>;
     isLarge: _angular_core.Signal<boolean>;
+    isXLarge: _angular_core.Signal<boolean>;
     animation: _angular_core.Signal<SidePanelAnimationState.Open | SidePanelAnimationState.ClosedRight | SidePanelAnimationState.ClosedLeft>;
     private readonly sidePanelService;
     sidePanelConfig: SidePanelConfig;

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

@@ -28,6 +28,7 @@ interface Tab {
     order?: number;
     skeletonTheme?: NgxSkeletonLoaderConfigTheme;
     isSkeletonAiTheme?: boolean;
+    isLabelLoading?: boolean;
 }
 type TabsType = 'underlined' | 'filled';
 declare const TAB_HEADER_SIZE: {
@@ -51,6 +52,7 @@ declare class TabDirective implements OnInit {
     order: _angular_core.InputSignal<number | undefined>;
     skeletonTheme: _angular_core.InputSignal<NgxSkeletonLoaderConfigTheme | undefined>;
     isSkeletonAiTheme: _angular_core.InputSignal<boolean | undefined>;
+    isLabelLoading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly tabsComponent;
     private readonly template;
     private readonly syncProps;
@@ -58,7 +60,7 @@ declare class TabDirective implements OnInit {
     ngOnInit(): void;
     private addTab;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabDirective, "ng-template[uiTab]", never, { "tabLabel": { "alias": "tabLabel"; "required": true; "isSignal": true; }; "tabName": { "alias": "tabName"; "required": true; "isSignal": true; }; "iconLeft": { "alias": "iconLeft"; "required": false; "isSignal": true; }; "iconRight": { "alias": "iconRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "canLeave": { "alias": "canLeave"; "required": false; "isSignal": true; }; "linkUrl": { "alias": "linkUrl"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "skeletonTheme": { "alias": "skeletonTheme"; "required": false; "isSignal": true; }; "isSkeletonAiTheme": { "alias": "isSkeletonAiTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabDirective, "ng-template[uiTab]", never, { "tabLabel": { "alias": "tabLabel"; "required": true; "isSignal": true; }; "tabName": { "alias": "tabName"; "required": true; "isSignal": true; }; "iconLeft": { "alias": "iconLeft"; "required": false; "isSignal": true; }; "iconRight": { "alias": "iconRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "canLeave": { "alias": "canLeave"; "required": false; "isSignal": true; }; "linkUrl": { "alias": "linkUrl"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "skeletonTheme": { "alias": "skeletonTheme"; "required": false; "isSignal": true; }; "isSkeletonAiTheme": { "alias": "isSkeletonAiTheme"; "required": false; "isSignal": true; }; "isLabelLoading": { "alias": "isLabelLoading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class TabsComponent implements AfterViewInit {
@@ -111,6 +113,23 @@ declare class TabsComponent implements AfterViewInit {
     applicationTheme: ApplicationTheme;
     tabHeaderSize: _angular_core.InputSignal<TabHeaderSize>;
     isLoading: _angular_core.InputSignal<boolean>;
+    /**
+     * Name of the tab to show. Applied as tabs register, so a tab requested before the
+     * projected `ng-template uiTab` children exist — a deep link, a query param — is still
+     * honoured on first paint, with no need to call `selectTab()` from a lifecycle hook.
+     *
+     * This is a request, not live state: it is applied when the value changes and once more as
+     * soon as the named tab registers, but a later click or a change to the tab list will not
+     * snap the selection back to it. An unknown name is a no-op — while tabs are still
+     * registering every name is unknown, so it cannot warn or throw. Bind a name the consumer
+     * has already validated.
+     *
+     * Applying it does not emit `selectedTab` / `selectedTabIndex` (the consumer supplied the
+     * value, so echoing it back would double-handle it) and does not consult the current tab's
+     * `canLeave` — declarative selection is the consumer's own decision, so it owns any
+     * guarding around the value it binds. User-driven switches still honour `canLeave`.
+     */
+    readonly selectedTabName: _angular_core.InputSignal<string | null>;
     selectedTabIndex: EventEmitter<number>;
     selectedTab: EventEmitter<Tab>;
     tabGroup: MatTabGroup;
@@ -119,11 +138,32 @@ declare class TabsComponent implements AfterViewInit {
     protected tabIndexMap: Record<string, number>;
     private insertionCounter;
     private tabTransitionInProgress;
+    private requestedTabName;
     constructor(defaultAppTheme: ApplicationTheme, isMobile$: Observable<boolean>, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     addTab(tab: Tab): void;
     private sortTabs;
     private updateTabIndexMap;
+    private get activeTabName();
+    /**
+     * `tabIndex` stores a position, but the selection it stands for is a tab identity, and
+     * adding, removing or re-ordering tabs shifts positions. Without re-resolving the index
+     * from the name, `tabIndex` keeps pointing at whatever tab now sits at that position —
+     * MatTabGroup re-derives its own selection from the active tab, so the body stays correct
+     * while this component's `aria-selected` and click gating silently drift onto a different
+     * tab. Falls back to clamping when the active tab is the one that went away.
+     */
+    private reconcileTabIndex;
+    /**
+     * Applies `selectedTabName` once the named tab is known, then clears the request so later
+     * clicks and tab list changes are not overridden by a stale value. Stays armed while the
+     * name is unresolved, because a requested tab can register after the input is set — either
+     * with the rest of a subtree that renders late, or later still if it is behind its own
+     * condition — so `addTab()` retries until it resolves.
+     *
+     * Silent by design — see the doc on `selectedTabName`.
+     */
+    private applyRequestedTabName;
     onTabChange(index: number): void;
     selectTab(tabName: string): void;
     indexOf(tabName: string): number;
@@ -131,7 +171,7 @@ declare class TabsComponent implements AfterViewInit {
     removeTab(tabName: string): void;
     updateTab(tabName: string, tab: Partial<Omit<Tab, 'tabName'>>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, [{ optional: true; }, null, null]>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ui-tabs", never, { "companyColor": { "alias": "companyColor"; "required": false; }; "type": { "alias": "type"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "headerContentPadding": { "alias": "headerContentPadding"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "tabHeaderSize": { "alias": "tabHeaderSize"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "selectedTabIndex": "selectedTabIndex"; "selectedTab": "selectedTab"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ui-tabs", never, { "companyColor": { "alias": "companyColor"; "required": false; }; "type": { "alias": "type"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "headerContentPadding": { "alias": "headerContentPadding"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "tabHeaderSize": { "alias": "tabHeaderSize"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "selectedTabName": { "alias": "selectedTabName"; "required": false; "isSignal": true; }; }, { "selectedTabIndex": "selectedTabIndex"; "selectedTab": "selectedTab"; }, never, never, true, never>;
     static ngAcceptInputType_headerContentPadding: number;
     static ngAcceptInputType_dynamicHeight: unknown;
 }