@testgorilla/tgo-ui 11.6.0 → 11.8.0

package/package.json

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

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

@@ -91,21 +91,63 @@ declare class AccordionComponent {
     noBackgroundColor: boolean;
     /**
      *
-     * Defines the toggle icon position
+     * Defines the toggle icon position. `right` keeps the icon at the trailing edge of the
+     * header, `left` moves it in front of the label. The `table` variant is the exception:
+     * its chevron is part of the row layout and always sits in front of the label.
      *
      * @type {boolean}
      * @memberof AccordionComponent
      */
     toggleIconPosition: ToggleIconPosition;
+    /**
+     *
+     * Replaces the default expansion chevron with the given icon, placed according to
+     * `toggleIconPosition`.
+     *
+     * @type {IconName}
+     * @memberof AccordionComponent
+     */
+    toggleIcon: IconName;
+    /**
+     *
+     * Icon shown while the accordion is open. Requires `toggleIcon`.
+     * When omitted, `toggleIcon` rotates 180° instead of being swapped.
+     *
+     * @type {IconName}
+     * @memberof AccordionComponent
+     */
+    toggleIconExpanded: IconName;
+    /**
+     *
+     * Renders the label in bold. Don`t work on Classic theme
+     *
+     * @type {boolean}
+     * @default false
+     * @memberof AccordionComponent
+     */
+    boldLabel: boolean;
     closed: EventEmitter<void>;
     opened: EventEmitter<void>;
     constructor(defaultAppTheme: ApplicationTheme);
+    protected get isTableVariant(): boolean;
+    /** Whether the component renders the toggle icon itself instead of Material's indicator. */
+    protected get hasToggleIcon(): boolean;
+    /**
+     * The `table` variant renders its chevron as part of the row layout, so it stays in front
+     * of the label whatever `toggleIconPosition` says — unless a custom icon replaces it.
+     */
+    protected get isToggleIconLeading(): boolean;
+    protected get hasLeadingToggleIcon(): boolean;
+    protected get hasTrailingToggleIcon(): boolean;
+    protected get resolvedToggleIcon(): IconName;
+    protected get rotatesToggleIcon(): boolean;
     protected toggle(open: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ui-accordion", never, { "label": { "alias": "label"; "required": true; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showPremiumIcon": { "alias": "showPremiumIcon"; "required": false; }; "premiumTooltipText": { "alias": "premiumTooltipText"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "labelIcon": { "alias": "labelIcon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "allowCustomHeader": { "alias": "allowCustomHeader"; "required": false; }; "noBackgroundColor": { "alias": "noBackgroundColor"; "required": false; }; "toggleIconPosition": { "alias": "toggleIconPosition"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[subHeader]", "[customHeader]", "[actions]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ui-accordion", never, { "label": { "alias": "label"; "required": true; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showPremiumIcon": { "alias": "showPremiumIcon"; "required": false; }; "premiumTooltipText": { "alias": "premiumTooltipText"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "labelIcon": { "alias": "labelIcon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "allowCustomHeader": { "alias": "allowCustomHeader"; "required": false; }; "noBackgroundColor": { "alias": "noBackgroundColor"; "required": false; }; "toggleIconPosition": { "alias": "toggleIconPosition"; "required": false; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; }; "toggleIconExpanded": { "alias": "toggleIconExpanded"; "required": false; }; "boldLabel": { "alias": "boldLabel"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[subHeader]", "[customHeader]", "[actions]", "*"], true, never>;
     static ngAcceptInputType_open: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_showPremiumIcon: unknown;
+    static ngAcceptInputType_boldLabel: unknown;
 }
 
 declare class AccordionComponentModule {

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

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 import { Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { MatSliderDragEvent } from '@angular/material/slider';
 import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 
@@ -108,7 +109,33 @@ declare class SliderComponent implements Validator {
     minLabel: _angular_core.InputSignal<string | undefined>;
     maxLabel: _angular_core.InputSignal<string | undefined>;
     inputWidth: _angular_core.InputSignal<number>;
+    /**
+     * Controls whether the value bubble pops above the thumb on hover and while dragging.
+     * Set it to false for scrubber-style sliders whose designs do not show one.
+     * Applies to both the basic and the range variant.
+     */
+    showValueBubble: _angular_core.InputSignalWithTransform<boolean, unknown>;
     sliderValueChange: EventEmitter<SliderValue>;
+    /**
+     * Emitted with the current value when the user starts dragging the thumb.
+     * Basic variant only, and never emitted for programmatic value writes, so a consumer
+     * that also drives the slider on a timer can tell a user drag apart from its own write.
+     */
+    dragStart: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Emitted with the released value when the user stops dragging the thumb.
+     * Basic variant only. See {@link dragStart}.
+     */
+    dragEnd: _angular_core.OutputEmitterRef<number>;
+    /**
+     * 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
+     * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and
+     * unmounting it changes how the disabled slider's opacity layer rasterises its text.
+     */
+    private readonly isHovered;
+    /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */
+    protected readonly isDiscrete: _angular_core.Signal<boolean>;
     cdr: ChangeDetectorRef;
     decimalPipe: DecimalPipe;
     private control?;
@@ -123,6 +150,9 @@ declare class SliderComponent implements Validator {
     setDisabledState(isDisabled: boolean): void;
     writeValue(value: SliderValue): void;
     protected onValueChange(ev?: number): void;
+    protected onSliderHover(isHovered: boolean): void;
+    protected onDragStart(event: MatSliderDragEvent): void;
+    protected onDragEnd(event: MatSliderDragEvent): void;
     protected onInputBlur(inputName: string): void;
     protected onInputFocus(): void;
     private isValueChanged;
@@ -131,7 +161,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; }; "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; }; }, { "sliderValueChange": "sliderValueChange"; }, 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; }; "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>;
 }
 
 declare class SliderComponentModule {