@testgorilla/tgo-ui 12.2.0 → 12.3.0

package/package.json

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

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

@@ -19,6 +19,8 @@ export type ButtonColor = 'primary' | 'secondary' | 'secondary-inverted' | 'ghos
 export type ButtonSize = 'big' | 'medium' | 'small';
 export type LinkUrlTarget = '' | '_self' | '_blank' | '_parent' | '_top';
 export type IconButtonSize = '24' | '32' | '40';
+export type IconButtonShape = 'round' | 'square';
+export type ButtonAriaHasPopup = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonState = 'hover' | 'pressed' | 'disabled' | 'default';
 export interface ButtonBadgeConfig {
@@ -213,6 +215,11 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
    * @memberof ButtonComponent
    */
   ariaPressed?: boolean;
+  /**
+   * The kind of popup the button opens, as `aria-haspopup`. Leave undefined when it opens none.
+   * @memberof ButtonComponent
+   */
+  ariaHasPopup?: ButtonAriaHasPopup;
   /**
    * A string representing the ARIA requirement for accessibility.
    * This attribute is used to indicate whether an input field is required for form submission.
@@ -253,6 +260,18 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
    * @memberof ButtonComponent
    */
   circular: boolean;
+  /**
+   * Keeps the label on one line with an ellipsis; a label that gets cut off is shown as the tooltip.
+   * @type {boolean}
+   * @memberof ButtonComponent
+   */
+  isSingleLineLabel: boolean;
+  /**
+   * `square` gives an `icon-button` rounded corners instead of a circle. Has no effect on other variants.
+   * @type {IconButtonShape}
+   * @memberof ButtonComponent
+   */
+  iconButtonShape: IconButtonShape;
   /**
    * Sets tooltip position
    *
@@ -429,6 +448,10 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
       "alias": "ariaPressed";
       "required": false;
     };
+    "ariaHasPopup": {
+      "alias": "ariaHasPopup";
+      "required": false;
+    };
     "ariaRequired": {
       "alias": "ariaRequired";
       "required": false;
@@ -453,6 +476,14 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
       "alias": "circular";
       "required": false;
     };
+    "isSingleLineLabel": {
+      "alias": "isSingleLineLabel";
+      "required": false;
+    };
+    "iconButtonShape": {
+      "alias": "iconButtonShape";
+      "required": false;
+    };
     "tooltipPosition": {
       "alias": "tooltipPosition";
       "required": false;
@@ -476,6 +507,7 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
   static ngAcceptInputType_preventDefault: unknown;
   static ngAcceptInputType_hasBackground: unknown;
   static ngAcceptInputType_circular: unknown;
+  static ngAcceptInputType_isSingleLineLabel: unknown;
 }
 export declare class ButtonComponentModule {
   static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponentModule, never>;

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

@@ -50,6 +50,7 @@ export declare class EllipseTextDirective implements OnInit {
   onChangeTextState: EventEmitter<boolean>;
   resize(): void;
   private readonly destroyRef;
+  private readonly document;
   constructor(el: ElementRef);
   ngOnInit(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<EllipseTextDirective, never>;

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

@@ -1,13 +1,30 @@
-import { HorizontalConnectionPos } from "@angular/cdk/overlay";
+import { HorizontalConnectionPos, OverlayRef } from "@angular/cdk/overlay";
 import * as i0 from "@angular/core";
-import { OnDestroy, OnInit, TemplateRef } from "@angular/core";
+import { DestroyRef, OnDestroy, OnInit, TemplateRef } from "@angular/core";
 import { CardSize } from "@testgorilla/tgo-ui/components/card";
+import { Observable } from "rxjs";
 /** How the popover is opened: on hover of the anchor, or on click. */
 export type PopoverTrigger = 'hover' | 'click';
+/** `end` opens beside the anchor (right in LTR), top-aligned, flipping to the other side when it does not fit. */
+export type PopoverPlacement = 'below' | 'end';
+export interface PopoverConfig {
+  placement?: PopoverPlacement;
+  /** Applies to `below` only. */
+  align?: HorizontalConnectionPos;
+  offset?: number;
+  isCard?: boolean;
+  cardSize?: CardSize;
+  ariaLabel?: string;
+}
+export interface PopoverOpenConfig extends PopoverConfig {
+  /** Closes the popover when it is destroyed; pass the `DestroyRef` of the view that owns the template. */
+  destroyRef?: DestroyRef;
+}
 export declare class PopoverDirective implements OnInit, OnDestroy {
   uiPopover: import("@angular/core").InputSignal<TemplateRef<unknown>>;
   popoverOffset: import("@angular/core").InputSignal<number>;
   popoverAlign: import("@angular/core").InputSignal<HorizontalConnectionPos>;
+  popoverPlacement: import("@angular/core").InputSignal<PopoverPlacement>;
   popoverOpen: import("@angular/core").InputSignal<boolean>;
   popoverCard: import("@angular/core").InputSignal<boolean>;
   popoverCardSize: import("@angular/core").InputSignal<CardSize>;
@@ -17,7 +34,7 @@ export declare class PopoverDirective implements OnInit, OnDestroy {
   private readonly openState;
   /** Whether the popover is currently showing. Read it via `#ref="uiPopover"` or `viewChild(PopoverDirective)`. */
   readonly isOpen: import("@angular/core").Signal<boolean>;
-  private readonly overlay;
+  private readonly popoverOverlay;
   private readonly elementRef;
   private readonly injector;
   private readonly ngZone;
@@ -35,9 +52,8 @@ export declare class PopoverDirective implements OnInit, OnDestroy {
   close(): void;
   /** Opens the popover when closed, closes it when open. */
   toggle(): void;
+  private config;
   private createOverlay;
-  /** Click-triggered popovers dismiss on an outside pointer event or on Escape. */
-  private listenForDismiss;
   private scheduleOpen;
   private cancelOpen;
   private scheduleClose;
@@ -61,6 +77,11 @@ export declare class PopoverDirective implements OnInit, OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "popoverPlacement": {
+      "alias": "popoverPlacement";
+      "required": false;
+      "isSignal": true;
+    };
     "popoverOpen": {
       "alias": "popoverOpen";
       "required": false;
@@ -92,4 +113,29 @@ export declare class PopoverDirective implements OnInit, OnDestroy {
       "isSignal": true;
     };
   }, {}, never, never, true, never>;
+}
+export declare class PopoverRef {
+  readonly anchor: HTMLElement;
+  private readonly overlayRef;
+  private readonly openState;
+  private readonly closedSubject$;
+  readonly isOpen: import("@angular/core").Signal<boolean>;
+  /** Emits once, however the popover closed. */
+  readonly closed$: Observable<void>;
+  private stopClosingOnDestroy?;
+  constructor(anchor: HTMLElement, overlayRef: OverlayRef, destroyRef?: DestroyRef);
+  close(): void;
+}
+/** Opens a popover against an anchor you do not own, with the same semantics as `popoverTrigger="click"`. */
+export declare class PopoverService {
+  private readonly popoverOverlay;
+  private readonly injector;
+  private active;
+  /** Returns the open popover when `anchor` already has one; any other popover opened here closes first. */
+  open(anchor: HTMLElement, template: TemplateRef<unknown>, config?: PopoverOpenConfig): PopoverRef;
+  /** Closes the popover when `anchor` has one open (returning `null`), opens it otherwise. */
+  toggle(anchor: HTMLElement, template: TemplateRef<unknown>, config?: PopoverOpenConfig): PopoverRef | null;
+  private openRefFor;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PopoverService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }

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

@@ -25,12 +25,47 @@ export interface NavigationItem {
   text: string;
   url: string;
   badgeOptions?: ButtonBadgeConfig;
+  children?: NavigationChildItem[];
+  /** Controlled by the consumer: update it from `expandedChange`. */
+  isExpanded?: boolean;
+  /** Takes the chevron slot instead of the expand toggle, and a click on the row runs it instead of `navigate`. */
+  trailingAction?: NavigationTrailingAction;
+  /** Shows a blue dot at the end of the row and adds "New" to its accessible name. Defaults to `false`. */
+  isNew?: boolean;
+}
+export interface NavigationChildItem extends Omit<NavigationItem, 'icon'> {
+  icon?: IconName;
+  /** Takes the icon's place. */
+  status?: NavigationItemStatus;
+}
+export type NavigationStatusColor = 'success' | 'warning' | 'error' | 'neutral';
+export interface NavigationItemStatus {
+  color: NavigationStatusColor;
+  /** Appended to the row's accessible name, so the status is not conveyed by colour alone. */
+  label: string;
+}
+export interface NavigationTrailingAction {
+  icon: IconName;
+  ariaLabel: string;
+  /** Set while the action's popover is open: drives `aria-expanded` and highlights the row. */
+  isExpanded?: boolean;
+}
+export interface NavigationExpandedChange {
+  id: string;
+  isExpanded: boolean;
+}
+export interface NavigationTrailingActionClick {
+  id: string;
+  anchor: HTMLElement;
+  /** `offset` for a `placement: 'end'` popover on `anchor` that opens just past the rail's edge. */
+  popoverOffset: number;
 }
 export interface NavigationAccount {
   name: string;
   email: string;
   menu: OverflowMenuButtonsType[];
 }
+type NavigationNode = NavigationItem | NavigationChildItem;
 export declare const COLLAPSE_ANIMATION_MS = 180;
 export declare class SideNavigationComponent implements OnInit, OnDestroy {
   protected readonly avatarSize: typeof AvatarSize;
@@ -44,6 +79,8 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
     readonly NAV: "SIDE_NAVIGATION.NAV_ARIA_LABEL";
     readonly ANNOUNCE_COLLAPSED: "SIDE_NAVIGATION.ANNOUNCE_COLLAPSED";
     readonly ANNOUNCE_EXPANDED: "SIDE_NAVIGATION.ANNOUNCE_EXPANDED";
+    readonly SUBMENU: "SIDE_NAVIGATION.SUBMENU_LABEL";
+    readonly NEW: "SIDE_NAVIGATION.NEW_LABEL";
   };
   private readonly breakpointObserver;
   private readonly liveAnnouncer;
@@ -68,9 +105,13 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
   mobileCloseLabel: import("@angular/core").InputSignal<string | undefined>;
   /** Optional override; falls back to `SIDE_NAVIGATION.NAV_ARIA_LABEL` translation. */
   navAriaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Shows each chevron's label, such as "Switch job", as a tooltip on hover. */
+  hasChevronTooltips: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   isCollapsed: import("@angular/core").ModelSignal<boolean>;
   mainCtaClicked: import("@angular/core").OutputEmitterRef<void>;
   navigate: import("@angular/core").OutputEmitterRef<string>;
+  expandedChange: import("@angular/core").OutputEmitterRef<NavigationExpandedChange>;
+  trailingActionClicked: import("@angular/core").OutputEmitterRef<NavigationTrailingActionClick>;
   accountMenuSelected: import("@angular/core").OutputEmitterRef<string>;
   logoClicked: import("@angular/core").OutputEmitterRef<void>;
   isExpandingOrCollapsing: import("@angular/core").WritableSignal<boolean>;
@@ -78,6 +119,12 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
   protected readonly trapFocus: import("@angular/core").Signal<boolean>;
   private collapseTimer;
   activeRoutesMap: import("@angular/core").Signal<Map<string, boolean>>;
+  /**
+   * Within a branch only the child holding the longest matching URL is followed, and the deepest match is the
+   * current page; top-level items stay independent so flat lists behave as before.
+   */
+  protected readonly highlightStates: import("@angular/core").Signal<Map<string, "active" | "ancestor">>;
+  protected readonly shouldShowLabels: import("@angular/core").Signal<boolean>;
   overflowMenuConfig: import("@angular/core").Signal<MenuConfig>;
   protected readonly toggleAriaLabelOverride: import("@angular/core").Signal<string | undefined>;
   protected readonly toggleAriaKey: import("@angular/core").Signal<"SIDE_NAVIGATION.COLLAPSE_LABEL" | "SIDE_NAVIGATION.EXPAND_LABEL">;
@@ -89,8 +136,11 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
     announce?: boolean;
   }): void;
   onNavigateClick(id: string): void;
+  emitExpandedChange(item: NavigationNode): void;
+  emitTrailingAction(item: NavigationNode, event: Event): void;
   onSelectMenuItem($event: string): void;
   onEscapeKey(): void;
+  private allNavigation;
   private autoCloseDrawer;
   private observeViewportBreakpoint;
   private announceCollapseState;
@@ -168,6 +218,11 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "hasChevronTooltips": {
+      "alias": "hasChevronTooltips";
+      "required": false;
+      "isSignal": true;
+    };
     "isCollapsed": {
       "alias": "isCollapsed";
       "required": false;
@@ -177,6 +232,8 @@ export declare class SideNavigationComponent implements OnInit, OnDestroy {
     "isCollapsed": "isCollapsedChange";
     "mainCtaClicked": "mainCtaClicked";
     "navigate": "navigate";
+    "expandedChange": "expandedChange";
+    "trailingActionClicked": "trailingActionClicked";
     "accountMenuSelected": "accountMenuSelected";
     "logoClicked": "logoClicked";
   }, never, never, true, never>;
@@ -185,4 +242,5 @@ export declare class SideNavigationComponentModule {
   static ɵfac: i0.ɵɵFactoryDeclaration<SideNavigationComponentModule, never>;
   static ɵmod: i0.ɵɵNgModuleDeclaration<SideNavigationComponentModule, never, [typeof i1.A11yModule, typeof i2.CommonModule, typeof i3.UiTranslatePipe, typeof i4.ButtonComponentModule, typeof i5.AvatarComponentModule, typeof i6.IconComponentModule, typeof i7.LogoComponentModule, typeof i8.OverflowMenuComponentModule, typeof SideNavigationComponent], [typeof SideNavigationComponent]>;
   static ɵinj: i0.ɵɵInjectorDeclaration<SideNavigationComponentModule>;
-}
+}
+export {};