cps-ui-kit 21.20.0 → 21.22.0

package/package.json

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

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

@@ -646,6 +646,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     cvtWidth: string;
     isOpened: boolean;
     isActive: boolean;
+    isKeyboardFocused: boolean;
     inputText: string;
     inputTextDebounced: string;
     filteredOptions: any[];
@@ -660,10 +661,14 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     isTimePickerField: boolean;
     readonly optionsListId: string;
     readonly selectAllOptionId: string;
+    readonly hintId: string;
+    readonly errorId: string;
+    get describedBy(): string | null;
     private readonly _optionIdPrefix;
     private readonly _cpsRootFontSizeService;
     private _inputChangeSubject$;
     private _destroy$;
+    private _mouseActivated;
     private _options;
     private _optionIds;
     constructor(_control: NgControl, cdRef: ChangeDetectorRef, _labelByValue: LabelByValuePipe);
@@ -685,7 +690,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     onBlur(): void;
     onFocus(): void;
     onBeforeOptionsHidden(reason: CpsMenuHideReason): void;
-    onBoxClick(): void;
+    onBoxClick(fromKeyboard?: boolean): void;
     onContainerKeyDown(event: any): void;
     onInputKeyDown(event: any): void;
     onChevronClick(event: any): void;
@@ -695,7 +700,6 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     hasSelectedValue(): boolean;
     clearInput(): void;
     get isRequired(): boolean;
-    get computedLabel(): string | null;
     get isSelectAllVisible(): boolean;
     get optionsAriaSetSize(): number;
     get activeDescendantId(): string | null;
@@ -1088,15 +1092,19 @@ type CpsInputAppearanceType = 'outlined' | 'underlined' | 'borderless';
  * CpsInputComponent is used to enter values in a certain formats such as numeric, text or password.
  * @group Components
  */
-declare class CpsInputComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
+declare class CpsInputComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     private _control;
     elementRef: ElementRef<HTMLElement>;
-    private cdRef;
     /**
      * Label of the input element.
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the input component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Bottom hint text for the input field.
      * @group Props
@@ -1117,6 +1125,16 @@ declare class CpsInputComponent implements ControlValueAccessor, OnInit, AfterVi
      * @group Props
      */
     readonly: boolean;
+    /**
+     * Determines whether the value of the input can be automatically completed by the browser.
+     * @group Props
+     */
+    autocomplete: string;
+    /**
+     * Determines whether the value of the input may be checked for spelling errors.
+     * @group Props
+     */
+    spellcheck: boolean;
     /**
      * Width of the input field, of type number denoting pixels or string.
      * @group Props
@@ -1152,6 +1170,11 @@ declare class CpsInputComponent implements ControlValueAccessor, OnInit, AfterVi
      * @group Props
      */
     prefixIconSize: iconSizeType;
+    /**
+     * Aria label for the clickable prefix icon, required when prefixIconClickable is true.
+     * @group Props
+     */
+    prefixIconAriaLabel: string;
     /**
      * Text before input value.
      * @group Props
@@ -1250,15 +1273,18 @@ declare class CpsInputComponent implements ControlValueAccessor, OnInit, AfterVi
      * @group Emits
      */
     enterClicked: EventEmitter<any>;
-    prefixTextSpan: ElementRef | undefined;
     currentType: string;
-    prefixWidth: string;
     cvtWidth: string;
+    isKeyboardFocused: boolean;
+    readonly hintId: string;
+    readonly errorId: string;
+    get describedBy(): string | null;
+    private _mouseActivated;
     private _statusChangesSubscription?;
     private _value;
-    constructor(_control: NgControl, elementRef: ElementRef<HTMLElement>, cdRef: ChangeDetectorRef);
+    constructor(_control: NgControl, elementRef: ElementRef<HTMLElement>);
     ngOnInit(): void;
-    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     private _checkErrors;
     onChange: (_event: any) => void;
@@ -1273,12 +1299,14 @@ declare class CpsInputComponent implements ControlValueAccessor, OnInit, AfterVi
     clear(): void;
     togglePassword(): void;
     setDisabledState(_disabled: boolean): void;
+    get isRequired(): boolean;
     onClickPrefixIcon(): void;
     onBlur(): void;
     onFocus(): void;
+    onInputMousedown(): void;
     focus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CpsInputComponent, [{ optional: true; self: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsInputComponent, "cps-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "width": { "alias": "width"; "required": false; }; "type": { "alias": "type"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconClickable": { "alias": "prefixIconClickable"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "prefixText": { "alias": "prefixText"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "error": { "alias": "error"; "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; }; "appearance": { "alias": "appearance"; "required": false; }; "valueToDisplay": { "alias": "valueToDisplay"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "prefixIconClicked": "prefixIconClicked"; "blurred": "blurred"; "cleared": "cleared"; "enterClicked": "enterClicked"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CpsInputComponent, [{ optional: true; self: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsInputComponent, "cps-input", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "width": { "alias": "width"; "required": false; }; "type": { "alias": "type"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconClickable": { "alias": "prefixIconClickable"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "prefixIconAriaLabel": { "alias": "prefixIconAriaLabel"; "required": false; }; "prefixText": { "alias": "prefixText"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "error": { "alias": "error"; "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; }; "appearance": { "alias": "appearance"; "required": false; }; "valueToDisplay": { "alias": "valueToDisplay"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "focused": "focused"; "prefixIconClicked": "prefixIconClicked"; "blurred": "blurred"; "cleared": "cleared"; "enterClicked": "enterClicked"; }, never, never, true, never>;
 }
 
 /**
@@ -1290,13 +1318,18 @@ type CpsDatepickerAppearanceType = 'outlined' | 'underlined' | 'borderless';
  * CpsDatepickerComponent is an input component to provide date input.
  * @group Components
  */
-declare class CpsDatepickerComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class CpsDatepickerComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     private _control;
     /**
      * Label of the datepicker element.
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the datepicker component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Determines whether datepicker is disabled.
      * @group Props
@@ -1405,6 +1438,7 @@ declare class CpsDatepickerComponent implements ControlValueAccessor, OnInit, On
     private _value;
     constructor(_control: NgControl);
     ngOnInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     onChange: (_event: any) => void;
     onTouched: () => void;
@@ -1431,7 +1465,7 @@ declare class CpsDatepickerComponent implements ControlValueAccessor, OnInit, On
     focusInput(): void;
     toggleCalendar(show?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsDatepickerComponent, [{ optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsDatepickerComponent, "cps-datepicker", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "openOnInputFocus": { "alias": "openOnInputFocus"; "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; }; "appearance": { "alias": "appearance"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsDatepickerComponent, "cps-datepicker", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "openOnInputFocus": { "alias": "openOnInputFocus"; "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; }; "appearance": { "alias": "appearance"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
 }
 
 /**
@@ -2006,6 +2040,9 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
      */
     focused: EventEmitter<any>;
     readonly groupName: string;
+    readonly hintId: string;
+    readonly errorId: string;
+    get describedBy(): string | null;
     private _statusChangesSubscription?;
     private _value;
     error: string;
@@ -2024,7 +2061,6 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
     onBlur(): void;
     onFocus(): void;
     get isRequired(): boolean;
-    get computedLabel(): string | null;
     private _checkErrors;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsRadioGroupComponent, [{ optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsRadioGroupComponent, "cps-radio-group", never, { "options": { "alias": "options"; "required": false; }; "groupLabel": { "alias": "groupLabel"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "disabled": { "alias": "disabled"; "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; }; "hint": { "alias": "hint"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; "blurred": "blurred"; "focused": "focused"; }, never, ["*"], true, never>;
@@ -2171,6 +2207,9 @@ declare class CpsTimepickerComponent implements OnInit, OnChanges, AfterViewInit
         value: string;
     }[];
     private _statusChangesSubscription?;
+    readonly hintId: string;
+    readonly errorId: string;
+    get describedBy(): string | null;
     error: string;
     hoursError: string;
     minutesError: string;
@@ -2608,6 +2647,9 @@ declare class CpsSelectComponent implements ControlValueAccessor, OnInit, OnChan
     private readonly _cpsRootFontSizeService;
     readonly optionsListId: string;
     readonly selectAllOptionId: string;
+    readonly hintId: string;
+    readonly errorId: string;
+    get describedBy(): string | null;
     private readonly _optionIdPrefix;
     private _optionIds;
     constructor(_control: NgControl);
@@ -2642,7 +2684,6 @@ declare class CpsSelectComponent implements ControlValueAccessor, OnInit, OnChan
     onFocus(): void;
     focus(): void;
     get isRequired(): boolean;
-    get computedLabel(): string | null;
     get isSelectAllVisible(): boolean;
     get optionsAriaSetSize(): number;
     get activeDescendantId(): string | null;