@testgorilla/tgo-ui 11.19.1 → 11.20.0

package/package.json

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

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

@@ -5,10 +5,10 @@ import { ConnectedPosition } from '@angular/cdk/overlay';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i2 from '@testgorilla/tgo-ui/components/field';
 import { FieldComponent } from '@testgorilla/tgo-ui/components/field';
-import * as i4 from '@testgorilla/tgo-ui/components/overflow-menu';
-import { OverflowMenuButtonsType } from '@testgorilla/tgo-ui/components/overflow-menu';
 import * as i13 from '@testgorilla/tgo-ui/components/icon';
 import { IconName } from '@testgorilla/tgo-ui/components/icon';
+import * as i4 from '@testgorilla/tgo-ui/components/overflow-menu';
+import { OverflowMenuButtonsType } from '@testgorilla/tgo-ui/components/overflow-menu';
 import * as i1 from '@angular/common';
 import * as i3 from '@testgorilla/tgo-ui/components/button';
 import * as i5 from '@testgorilla/tgo-ui/components/tag';
@@ -32,11 +32,33 @@ interface PromptData {
 }
 interface PromptActionTag {
     label: string;
-    icon?: IconName;
+    /**
+     * Leading icon, on the tag and on its menu item when `collapseActionTags` is set. Omitted, the
+     * action tag shows `Plus` and the menu item shows none; `null` shows no icon anywhere.
+     */
+    icon?: IconName | null;
+    /**
+     * Trailing icon on the menu item when `collapseActionTags` is set. Omitted, it defaults to `Plus`
+     * for the action tag and `Arrow-chevron-right-in-line` for the secondary action tag; `null` hides it.
+     */
+    menuTrailingIcon?: IconName | null;
+    /**
+     * Position of the menu item when `collapseActionTags` is set; lower comes first. Items without one
+     * go after those that have one, in the default order: secondary action tag, then action tag.
+     */
+    menuOrder?: number;
     ariaLabel?: string;
     disabled?: boolean;
     acceptedFileTypes?: string;
 }
+/** A tag rendered next to the action tag that only emits a press; it never opens a file picker. */
+type PromptSecondaryActionTag = Omit<PromptActionTag, 'acceptedFileTypes'>;
+/** One item of the collapsed actions menu. */
+interface PromptActionsMenuEntry {
+    kind: 'action' | 'secondary';
+    tag: PromptSecondaryActionTag;
+    trailingIcon: IconName;
+}
 interface PromptDropdownItem {
     /** Unique id; used as the dropdown @for track key. */
     id: number;
@@ -48,6 +70,13 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     private readonly disabledState;
     tags: _angular_core.InputSignal<PromptTag[]>;
     actionTag: _angular_core.InputSignal<PromptActionTag | null>;
+    /** Tag rendered next to the action tag or file upload button, e.g. "Find similar profile". */
+    secondaryActionTag: _angular_core.InputSignal<PromptSecondaryActionTag | null>;
+    /**
+     * Collapses `actionTag` and `secondaryActionTag` behind a Plus button that opens a menu listing
+     * them; the button turns into a Close button while the menu is open.
+     */
+    collapseActionTags: _angular_core.InputSignalWithTransform<boolean, unknown>;
     maxCharacters: _angular_core.InputSignal<number>;
     supportedFileTypes: _angular_core.InputSignal<string>;
     autoClear: _angular_core.InputSignal<boolean>;
@@ -80,6 +109,7 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     set disabled(value: boolean);
     promptData: _angular_core.OutputEmitterRef<PromptData>;
     actionTagFileSelected: _angular_core.OutputEmitterRef<File>;
+    secondaryActionTagPress: _angular_core.OutputEmitterRef<void>;
     dropdownItemSelected: _angular_core.OutputEmitterRef<PromptDropdownItem>;
     dropdownClosed: _angular_core.OutputEmitterRef<void>;
     promptFilesList: _angular_core.WritableSignal<File[]>;
@@ -89,6 +119,7 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     tagsInDropdown: _angular_core.WritableSignal<PromptTag[]>;
     autocompleteSuggestion: _angular_core.WritableSignal<string>;
     isDropdownOpened: _angular_core.WritableSignal<boolean>;
+    readonly actionsMenuId: string;
     private readonly keepDropdownClosed;
     isFieldHovered: _angular_core.WritableSignal<boolean>;
     isFieldFocused: _angular_core.WritableSignal<boolean>;
@@ -103,6 +134,13 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     readonly showFocusRing: _angular_core.Signal<boolean>;
     fileInputAccept: _angular_core.Signal<string>;
     isLocked: _angular_core.Signal<boolean>;
+    readonly actionTagIcon: _angular_core.Signal<IconName>;
+    readonly actionTagMenuTrailingIcon: _angular_core.Signal<IconName>;
+    readonly secondaryActionTagMenuTrailingIcon: _angular_core.Signal<IconName>;
+    /** Menu items sorted by `menuOrder`; a stable sort keeps the default order for ties and omissions. */
+    readonly actionsMenuEntries: _angular_core.Signal<PromptActionsMenuEntry[]>;
+    readonly isActionsMenuOpen: _angular_core.Signal<boolean>;
+    readonly showActionsMenuTrigger: _angular_core.Signal<boolean>;
     private readonly hasContent;
     /**
      * Shared by the Send button's disabled state and the Enter shortcut, so they cannot disagree.
@@ -125,6 +163,8 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     tagDropdown: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     fieldComponentRef: _angular_core.Signal<FieldComponent>;
     private readonly promptContainer;
+    private readonly actionsPopover;
+    private readonly actionsMenu;
     readonly dropdownPositions: ConnectedPosition[];
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -156,10 +196,18 @@ declare class PromptComponent implements ControlValueAccessor, OnInit, AfterView
     setDisabledState(isDisabled: boolean): void;
     onFileSelected(event: Event): Promise<void>;
     onActionTagPress(): void;
+    onSecondaryActionTagPress(): void;
+    /** The popover's focus trap hands focus back to the Plus button when the menu closes. */
+    closeActionsMenu(): void;
+    onActionsMenuKeydown(event: KeyboardEvent): void;
+    selectActionsMenuEntry(entry: PromptActionsMenuEntry, event: Event): void;
+    private selectActionTagFromMenu;
+    private selectSecondaryActionTagFromMenu;
+    private actionsMenuItems;
     private handleActionTagFile;
     private emitValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PromptComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PromptComponent, "ui-prompt", never, { "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "actionTag": { "alias": "actionTag"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "supportedFileTypes": { "alias": "supportedFileTypes"; "required": false; "isSignal": true; }; "autoClear": { "alias": "autoClear"; "required": false; "isSignal": true; }; "showSendButton": { "alias": "showSendButton"; "required": false; "isSignal": true; }; "sendButtonDisabled": { "alias": "sendButtonDisabled"; "required": false; "isSignal": true; }; "enableFileUpload": { "alias": "enableFileUpload"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "dropdownItems": { "alias": "dropdownItems"; "required": false; "isSignal": true; }; "dropdownHeading": { "alias": "dropdownHeading"; "required": false; "isSignal": true; }; "showDropdownClose": { "alias": "showDropdownClose"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "promptData": "promptData"; "actionTagFileSelected": "actionTagFileSelected"; "dropdownItemSelected": "dropdownItemSelected"; "dropdownClosed": "dropdownClosed"; }, never, ["[promptFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PromptComponent, "ui-prompt", never, { "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "actionTag": { "alias": "actionTag"; "required": false; "isSignal": true; }; "secondaryActionTag": { "alias": "secondaryActionTag"; "required": false; "isSignal": true; }; "collapseActionTags": { "alias": "collapseActionTags"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "supportedFileTypes": { "alias": "supportedFileTypes"; "required": false; "isSignal": true; }; "autoClear": { "alias": "autoClear"; "required": false; "isSignal": true; }; "showSendButton": { "alias": "showSendButton"; "required": false; "isSignal": true; }; "sendButtonDisabled": { "alias": "sendButtonDisabled"; "required": false; "isSignal": true; }; "enableFileUpload": { "alias": "enableFileUpload"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "dropdownItems": { "alias": "dropdownItems"; "required": false; "isSignal": true; }; "dropdownHeading": { "alias": "dropdownHeading"; "required": false; "isSignal": true; }; "showDropdownClose": { "alias": "showDropdownClose"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "promptData": "promptData"; "actionTagFileSelected": "actionTagFileSelected"; "secondaryActionTagPress": "secondaryActionTagPress"; "dropdownItemSelected": "dropdownItemSelected"; "dropdownClosed": "dropdownClosed"; }, never, ["[promptFooter]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
 
@@ -170,4 +218,4 @@ declare class PromptModule {
 }
 
 export { PromptComponent, PromptModule };
-export type { PromptActionTag, PromptData, PromptDropdownItem, PromptTag };
+export type { PromptActionTag, PromptActionsMenuEntry, PromptData, PromptDropdownItem, PromptSecondaryActionTag, PromptTag };

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

@@ -151,7 +151,21 @@ declare class SliderComponent implements Validator {
     cdr: ChangeDetectorRef;
     decimalPipe: DecimalPipe;
     private control?;
+    private readonly destroyRef;
+    private readonly ngZone;
+    private readonly matSlider;
+    private readonly matSliderElement;
     constructor(defaultAppTheme: ApplicationTheme);
+    /**
+     * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`
+     * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit
+     * left of the start thumb's position — which at that point is still the pre-resize one. When the
+     * slider shrinks to under about half its width, the end thumb is clamped to that stale position
+     * and stays there, because nothing repositions it afterwards. Running the resize step once more,
+     * after Material's own observer, places the end thumb against the start thumb's new position.
+     * Growing the slider never clamps, so the extra pass is a no-op there.
+     */
+    private observeRangeResize;
     private value;
     protected translationContext: string;
     protected touchedControlName: string;