cps-ui-kit 21.18.0 → 21.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cps-ui-kit",
-  "version": "21.18.0",
+  "version": "21.20.0",
   "peerDependencies": {
     "@angular/common": "^21.2.6",
     "@angular/core": "^21.2.6",

package/types/cps-ui-kit.d.ts

@@ -652,6 +652,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     backspaceClickedOnce: boolean;
     activeSingle: boolean;
     optionHighlightedIndex: number;
+    isArrowNavigating: boolean;
     readonly virtualScrollItemSizePx: i0.Signal<number>;
     virtualListHeightRem: number;
     autocompleteBoxWidthPx: number;
@@ -691,7 +692,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     focusInput(): void;
     focus(): void;
     recalcVirtualListHeight(): void;
-    isEmptyValue(): boolean;
+    hasSelectedValue(): boolean;
     clearInput(): void;
     get isRequired(): boolean;
     get computedLabel(): string | null;
@@ -709,6 +710,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     private _getValueLabel;
     private _closeAndClear;
     private _dehighlightOption;
+    private _syncHighlightToValue;
     private _getHighlightedOptionId;
     private _highlightOption;
     private _navigateOptionsByArrows;
@@ -842,7 +844,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
  * CpsButtonComponent is a button element.
  * @group Components
  */
-declare class CpsButtonComponent implements OnChanges {
+declare class CpsButtonComponent implements OnInit, OnChanges {
     private document;
     /**
      * Color of the button.
@@ -924,7 +926,8 @@ declare class CpsButtonComponent implements OnChanges {
     classesList: string[];
     enterActive: boolean;
     constructor(document: Document);
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnChanges(): void;
     setClasses(): void;
     onClick(event: Event): void;
     onEnterKeydown(): void;
@@ -1008,7 +1011,7 @@ declare class CpsCheckboxComponent implements OnInit, OnChanges, ControlValueAcc
     private _value;
     constructor(_control: NgControl, document: Document, _elementRef: ElementRef<HTMLElement>);
     ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(): void;
     onChange: (_event: any) => void;
     onTouched: () => void;
     registerOnChange(fn: any): void;
@@ -2008,7 +2011,7 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
     error: string;
     constructor(_control: NgControl);
     ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     onChange: (_event: any) => void;
     onTouched: () => void;
@@ -2060,13 +2063,18 @@ interface CpsTime {
  * CpsTimepickerComponent allows to pick a specific time from a set of available options or input it manually.
  * @group Components
  */
-declare class CpsTimepickerComponent implements OnInit, AfterViewInit, OnDestroy {
+declare class CpsTimepickerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private _control;
     /**
      * Label of the timepicker.
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the timepicker component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Determines whether the timepicker is disabled.
      * @group Props
@@ -2171,6 +2179,7 @@ declare class CpsTimepickerComponent implements OnInit, AfterViewInit, OnDestroy
     constructor(_control: NgControl);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     onChange: (_event: any) => void;
     onTouched: () => void;
@@ -2194,7 +2203,7 @@ declare class CpsTimepickerComponent implements OnInit, AfterViewInit, OnDestroy
     private _updateValue;
     private _getRange;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsTimepickerComponent, [{ optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsTimepickerComponent, "cps-timepicker", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "use24HourTime": { "alias": "use24HourTime"; "required": false; }; "withSeconds": { "alias": "withSeconds"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "mandatoryValue": { "alias": "mandatoryValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsTimepickerComponent, "cps-timepicker", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "use24HourTime": { "alias": "use24HourTime"; "required": false; }; "withSeconds": { "alias": "withSeconds"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "mandatoryValue": { "alias": "mandatoryValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -2378,13 +2387,18 @@ type CpsSelectAppearanceType = 'outlined' | 'underlined' | 'borderless';
  * CpsSelectComponent is used to select items from a collection.
  * @group Components
  */
-declare class CpsSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
+declare class CpsSelectComponent implements ControlValueAccessor, OnInit, OnChanges, AfterViewInit, OnDestroy {
     private _control;
     /**
      * Label of the select component.
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the select component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Placeholder text for the select component.
      * @group Props
@@ -2584,27 +2598,36 @@ declare class CpsSelectComponent implements ControlValueAccessor, OnInit, AfterV
     error: string;
     cvtWidth: string;
     isOpened: boolean;
+    isActive: boolean;
     optionHighlightedIndex: number;
-    virtualListHeight: number;
-    virtualScrollItemSize: number;
-    selectBoxWidth: number;
+    isArrowNavigating: boolean;
+    readonly virtualScrollItemSizePx: i0.Signal<number>;
+    virtualListHeightRem: number;
+    selectBoxWidthPx: number;
     resizeObserver: ResizeObserver;
+    private readonly _cpsRootFontSizeService;
+    readonly optionsListId: string;
+    readonly selectAllOptionId: string;
+    private readonly _optionIdPrefix;
+    private _optionIds;
     constructor(_control: NgControl);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private _toggleOptions;
-    private _recalcVirtualListHeight;
+    recalcVirtualListHeight(): void;
     select(option: any, byValue: boolean): void;
     onOptionClick(option: any): void;
     private _clickOption;
-    private _getHTMLOptions;
     private _dehighlightOption;
+    private _syncHighlightToValue;
     private _highlightOption;
     private _navigateOptionsByArrows;
-    onBeforeOptionsHidden(): void;
+    onBeforeOptionsHidden(reason: CpsMenuHideReason): void;
     onBoxClick(): void;
-    onKeyDown(event: any): void;
+    onChevronClick(event: any): void;
+    onContainerKeyDown(event: any): void;
     toggleAll(): void;
     private _checkErrors;
     onChange: (_event: any) => void;
@@ -2618,9 +2641,21 @@ declare class CpsSelectComponent implements ControlValueAccessor, OnInit, AfterV
     onBlur(): void;
     onFocus(): void;
     focus(): void;
-    isEmptyValue(): boolean;
+    get isRequired(): boolean;
+    get computedLabel(): string | null;
+    get isSelectAllVisible(): boolean;
+    get optionsAriaSetSize(): number;
+    get activeDescendantId(): string | null;
+    getOptionAriaPosInSet(itemIndex: number): number;
+    getOptionId(option: any, index: number): string;
+    private _buildOptionId;
+    private _getHighlightedOptionId;
+    hasSelectedValue(): boolean;
+    private _navigateVirtualOptionsByArrows;
+    private _nextHighlightIndex;
+    private _scrollVirtualListToIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsSelectComponent, [{ optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsSelectComponent, "cps-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "returnObject": { "alias": "returnObject"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "options": { "alias": "options"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIconColor": { "alias": "optionIconColor"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "optionsClass": { "alias": "optionsClass"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "_value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsSelectComponent, "cps-select", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "returnObject": { "alias": "returnObject"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "options": { "alias": "options"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIconColor": { "alias": "optionIconColor"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "optionsClass": { "alias": "optionsClass"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "_value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -2754,7 +2789,7 @@ declare class CpsSwitchComponent implements ControlValueAccessor {
  * CpsTabComponent is a tab within a tab-group.
  * @group Components
  */
-declare class CpsTabComponent implements OnChanges {
+declare class CpsTabComponent implements OnInit, OnChanges {
     /**
      * Label of the tab.
      * @group Props
@@ -2807,7 +2842,8 @@ declare class CpsTabComponent implements OnChanges {
     badgeTooltip: string;
     content: TemplateRef<any>;
     active: boolean;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsTabComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsTabComponent, "cps-tab", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tooltipText": { "alias": "tooltipText"; "required": false; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; }; "tooltipMaxWidth": { "alias": "tooltipMaxWidth"; "required": false; }; "tooltipPersistent": { "alias": "tooltipPersistent"; "required": false; }; "badgeValue": { "alias": "badgeValue"; "required": false; }; "badgeTooltip": { "alias": "badgeTooltip"; "required": false; }; }, {}, never, ["*"], true, never>;
 }