@testgorilla/tgo-ui 10.3.0 → 10.5.0

package/package.json

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

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;
 }

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

@@ -57,6 +57,19 @@ declare class TagComponent {
      * @memberof TagComponent
      */
     showIconWhenSelected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Pins the tag to its filled background at rest, without tying that background
+     * to the selected state — pressing the tag never flips its fill. Interactive
+     * states (hover, focus ring, press scale) and the `press` output are unaffected,
+     * so the tag stays clickable; use `readOnly` when it should not be.
+     *
+     * The fill follows the theme: grayscale in `light` / `dark`, petrol in `classic`.
+     *
+     * @type {boolean}
+     * @default false
+     * @memberof TagComponent
+     */
+    pinnedBackground: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Specifies whether the element is disabled.
      *
@@ -151,7 +164,7 @@ declare class TagComponent {
     readonly filled: _angular_core.Signal<boolean>;
     onKeydown($event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ui-tag", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "allowClose": { "alias": "allowClose"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; "showIconWhenSelected": { "alias": "showIconWhenSelected"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "notificationsAmount": { "alias": "notificationsAmount"; "required": false; "isSignal": true; }; }, { "isSelected": "isSelectedChange"; "close": "close"; "press": "press"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ui-tag", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "allowClose": { "alias": "allowClose"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; "showIconWhenSelected": { "alias": "showIconWhenSelected"; "required": false; "isSignal": true; }; "pinnedBackground": { "alias": "pinnedBackground"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "notificationsAmount": { "alias": "notificationsAmount"; "required": false; "isSignal": true; }; }, { "isSelected": "isSelectedChange"; "close": "close"; "press": "press"; }, never, never, true, never>;
 }
 
 declare class TagComponentModule {