@testgorilla/tgo-ui 11.13.1 → 11.15.0

package/package.json

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

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

@@ -74,6 +74,20 @@ declare class ButtonComponent implements OnInit, AfterViewInit {
      * @memberof ButtonComponent
      */
     iconName: IconName | undefined;
+    /**
+     * Name of a second ui-icon rendered after the label, in addition to `iconName`.
+     * Pair it with `iconPosition="left"` to show a leading and a trailing icon at once.
+     *
+     * @type {IconName}
+     * @memberof ButtonComponent
+     */
+    trailingIconName: IconName | undefined;
+    /**
+     * Renders the trailing icon filled, independently of `iconFilled`.
+     *
+     * @memberof ButtonComponent
+     */
+    trailingIconFilled: boolean;
     /**
      * Indicator if the button should be disabled
      *
@@ -260,6 +274,7 @@ declare class ButtonComponent implements OnInit, AfterViewInit {
     coloredIcons: string[];
     labelEllipsis: boolean;
     icon: IconName;
+    trailingIcon: IconName;
     private static nextAriaLabelledId;
     ariaLabelledbyId: string;
     get typeIncluded(): boolean;
@@ -289,6 +304,11 @@ declare class ButtonComponent implements OnInit, AfterViewInit {
     focus(origin?: FocusOrigin): void;
     get getCompanyColor(): string;
     get shouldChangeFilledStatus(): boolean;
+    /**
+     * Whether this specific icon may be swapped to its filled variant on hover. Takes the icon as an
+     * argument because a button can render two, and a brand icon in one slot must not freeze the other.
+     */
+    canToggleFilled(icon: IconName): boolean;
     onKeydown(event: KeyboardEvent): void;
     onKeyup(event: KeyboardEvent): void;
     onLabelEllipsisChange(state: boolean): void;
@@ -296,7 +316,7 @@ declare class ButtonComponent implements OnInit, AfterViewInit {
     private isKnownIconName;
     private createAriaLabelledById;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "justIcon": { "alias": "justIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingWithLabel": { "alias": "loadingWithLabel"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "url": { "alias": "url"; "required": false; }; "urlTarget": { "alias": "urlTarget"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "isPremium": { "alias": "isPremium"; "required": false; }; "type": { "alias": "type"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "buttonBadgeConfig": { "alias": "buttonBadgeConfig"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "disabledScaleOnClick": { "alias": "disabledScaleOnClick"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "preventDefault": { "alias": "preventDefault"; "required": false; }; "hasBackground": { "alias": "hasBackground"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "role": { "alias": "role"; "required": false; }; "iconFilled": { "alias": "iconFilled"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; }, { "buttonClickEvent": "buttonClickEvent"; "buttonHoverEvent": "buttonHoverEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "justIcon": { "alias": "justIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "trailingIconName": { "alias": "trailingIconName"; "required": false; }; "trailingIconFilled": { "alias": "trailingIconFilled"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingWithLabel": { "alias": "loadingWithLabel"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "url": { "alias": "url"; "required": false; }; "urlTarget": { "alias": "urlTarget"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "isPremium": { "alias": "isPremium"; "required": false; }; "type": { "alias": "type"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "buttonBadgeConfig": { "alias": "buttonBadgeConfig"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "disabledScaleOnClick": { "alias": "disabledScaleOnClick"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "preventDefault": { "alias": "preventDefault"; "required": false; }; "hasBackground": { "alias": "hasBackground"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "role": { "alias": "role"; "required": false; }; "iconFilled": { "alias": "iconFilled"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; }, { "buttonClickEvent": "buttonClickEvent"; "buttonHoverEvent": "buttonHoverEvent"; }, never, never, true, never>;
     static ngAcceptInputType_preventDefault: unknown;
     static ngAcceptInputType_hasBackground: unknown;
 }

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

@@ -3,6 +3,9 @@ import { OnInit, OnDestroy, TemplateRef } from '@angular/core';
 import { HorizontalConnectionPos } from '@angular/cdk/overlay';
 import { CardSize } from '@testgorilla/tgo-ui/components/card';
 
+/** How the popover is opened: on hover of the anchor, or on click. */
+type PopoverTrigger = 'hover' | 'click';
+
 declare class PopoverDirective implements OnInit, OnDestroy {
     uiPopover: _angular_core.InputSignal<TemplateRef<unknown>>;
     popoverOffset: _angular_core.InputSignal<number>;
@@ -10,7 +13,12 @@ declare class PopoverDirective implements OnInit, OnDestroy {
     popoverOpen: _angular_core.InputSignal<boolean>;
     popoverCard: _angular_core.InputSignal<boolean>;
     popoverCardSize: _angular_core.InputSignal<CardSize>;
+    popoverTrigger: _angular_core.InputSignal<PopoverTrigger>;
+    popoverAriaLabel: _angular_core.InputSignal<string>;
     uiPopoverDisabled: _angular_core.InputSignal<boolean>;
+    private readonly openState;
+    /** Whether the popover is currently showing. Read it via `#ref="uiPopover"` or `viewChild(PopoverDirective)`. */
+    readonly isOpen: _angular_core.Signal<boolean>;
     private readonly overlay;
     private readonly elementRef;
     private readonly injector;
@@ -19,19 +27,28 @@ declare class PopoverDirective implements OnInit, OnDestroy {
     private openTimeout;
     private closeTimeout;
     private overlayListeners;
+    private dismissSubscriptions;
     onMouseEnter(): void;
     onMouseLeave(): void;
-    private open;
+    onClick(): void;
+    /** Opens the popover. No-op while `uiPopoverDisabled` is `true` or it is already open. */
+    open(): void;
+    /** Closes the popover. Safe to call when it is already closed. */
+    close(): void;
+    /** Opens the popover when closed, closes it when open. */
+    toggle(): void;
     private createOverlay;
+    /** Click-triggered popovers dismiss on an outside pointer event or on Escape. */
+    private listenForDismiss;
     private scheduleOpen;
     private cancelOpen;
     private scheduleClose;
     private cancelClose;
-    private close;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[uiPopover]", never, { "uiPopover": { "alias": "uiPopover"; "required": true; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverAlign": { "alias": "popoverAlign"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverCard": { "alias": "popoverCard"; "required": false; "isSignal": true; }; "popoverCardSize": { "alias": "popoverCardSize"; "required": false; "isSignal": true; }; "uiPopoverDisabled": { "alias": "uiPopoverDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[uiPopover]", ["uiPopover"], { "uiPopover": { "alias": "uiPopover"; "required": true; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverAlign": { "alias": "popoverAlign"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverCard": { "alias": "popoverCard"; "required": false; "isSignal": true; }; "popoverCardSize": { "alias": "popoverCardSize"; "required": false; "isSignal": true; }; "popoverTrigger": { "alias": "popoverTrigger"; "required": false; "isSignal": true; }; "popoverAriaLabel": { "alias": "popoverAriaLabel"; "required": false; "isSignal": true; }; "uiPopoverDisabled": { "alias": "uiPopoverDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { PopoverDirective };
+export type { PopoverTrigger };

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

@@ -70,6 +70,19 @@ declare class TagComponent {
      * @memberof TagComponent
      */
     pinnedBackground: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Clamps the tag to its parent's width, truncating the label, instead of overflowing it.
+     *
+     * Opt-in: enabling it gives the host a real layout box, so `width`, `height` and vertical
+     * margins set on `ui-tag` start applying, bare sibling tags flow inline instead of stacking,
+     * and a tag in an `overflow-x` strip shrinks rather than scrolls (`flex: 0 0 auto` opts out).
+     * Becomes the default in the next major.
+     *
+     * @type {boolean}
+     * @default false
+     * @memberof TagComponent
+     */
+    constrainWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Specifies whether the element is disabled.
      *
@@ -155,6 +168,8 @@ declare class TagComponent {
     protected iconColor: IconColor;
     protected closeBtnFocused: _angular_core.WritableSignal<boolean>;
     protected readonly labelElement: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly containerElement: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    private readonly ngZone;
     constructor();
     onPress(): void;
     setHoverState(state: boolean): void;
@@ -165,7 +180,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; }; "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; }; "testId": { "alias": "testId"; "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; }; "constrainWidth": { "alias": "constrainWidth"; "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; }; "testId": { "alias": "testId"; "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 {