@testgorilla/tgo-ui 11.14.0 → 11.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "11.14.0",
+  "version": "11.16.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-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 {