@testgorilla/tgo-ui 11.18.8 → 11.19.0

package/package.json

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

package/types/testgorilla-tgo-ui-components-segmented-toggle.d.ts

@@ -12,6 +12,11 @@ interface SegmentedToggleOption<T> {
      * provide `icon` and `iconAriaLabel` so the segment still has an accessible name.
      */
     label?: string;
+    /**
+     * Optional quantity shown to the right of the label (e.g. `Saved 12`). While
+     * the toggle is `loading`, a skeleton is shown in its place.
+     */
+    count?: number;
     /** Optional leading icon, typed to the Canopy icon set. */
     icon?: IconName;
     /**
@@ -41,11 +46,30 @@ declare class SegmentedToggleComponent<T> {
     readonly options: _angular_core.InputSignal<SegmentedToggleOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows a small skeleton to the right of each option's content, in place of
+     * its `count`, while the quantities are being fetched. Segments stay selectable.
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly testId: _angular_core.InputSignal<string | null>;
     readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme | undefined>;
     private readonly defaultAppTheme;
     readonly theme: _angular_core.Signal<ApplicationTheme>;
+    /**
+     * Pill-shaped placeholder sized to a short count next to a 16px icon/label.
+     * Tinted from the segment's text colour so it follows every state (unselected,
+     * selected, brand, disabled); the library's fixed light grey vanishes on white
+     * and glares on the black pill.
+     */
+    protected readonly skeletonTheme: {
+        'background-color': string;
+        width: string;
+        height: string;
+        margin: string;
+        'border-radius': string;
+        'vertical-align': string;
+    };
     /** One ElementRef per segment button; used to measure the active pill geometry. */
     private readonly optionButtons;
     /** Index of the selected option; -1 when value() matches no option. */
@@ -66,7 +90,9 @@ declare class SegmentedToggleComponent<T> {
      * Last-resort accessible name for a segment. Used only for an icon-only option
      * that provides neither a visible `label` nor an `iconAriaLabel`, so the button
      * is never a nameless control. When a label or icon label is present those name
-     * the button and this returns `null` (no `aria-label` attribute).
+     * the button and this returns `null` (no `aria-label` attribute). The `aria-label`
+     * replaces the button's content as its name, so a visible `count` is appended
+     * here or it would never be announced.
      */
     protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null;
     protected optionTestId(option: SegmentedToggleOption<T>): string | null;
@@ -75,7 +101,7 @@ declare class SegmentedToggleComponent<T> {
     /** Reads the active button's box and writes it to the indicator signals. */
     private measureIndicator;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedToggleComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedToggleComponent<any>, "ui-segmented-toggle", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedToggleComponent<any>, "ui-segmented-toggle", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { SegmentedToggleComponent };