cps-ui-kit 21.2.0 → 21.4.0

package/package.json

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

package/styles/_colors.scss

@@ -259,6 +259,8 @@
   --cps-color-bg-light: #f9f8f8;
   --cps-color-bg-mid: #f4f3f3;
   --cps-color-bg-dark: #eeeded;
+  --cps-color-bg-disabled: #f7f7f7;
+  --cps-color-bg-disabled-selected: #d7d5d5;
 
   //Lines
   --cps-color-line-light: #e3e2e2;
@@ -270,7 +272,7 @@
   --cps-color-text-lightest: #b5b2b2;
   --cps-color-text-light: #9a9595;
   --cps-color-text-mild: #6a6565;
-  --cps-color-text-medium: #5e5858;
-  --cps-color-text-dark: #524a4a;
+  --cps-color-text-medium: #5a5555;
+  --cps-color-text-dark: #4a4444;
   --cps-color-text-darkest: #2d2323;
 }

package/styles/_mixins.scss

@@ -5,13 +5,14 @@
  * to ensure visibility on light and dark backgrounds and meet accessibility requirements.
  */
 @mixin focus-ring(
-  $radius: 0.375rem,
   $inner-offset: 0.125rem,
   $outer-offset: 0.25rem,
+  $radius: 0.375rem,
   $inner-width: 0.0625rem,
   $outer-width: 0.0625rem
 ) {
   &:focus-visible {
+    outline: none;
     position: relative;
   }
 

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

@@ -1066,6 +1066,11 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the autocomplete component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Placeholder text.
      * @group Props
@@ -1319,14 +1324,15 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     backspaceClickedOnce: boolean;
     activeSingle: boolean;
     optionHighlightedIndex: number;
-    virtualListHeight: number;
-    virtualScrollItemSize: number;
-    autocompleteBoxWidth: number;
+    virtualScrollItemSizePx: number;
+    virtualListHeightRem: number;
+    autocompleteBoxWidthRem: number;
     resizeObserver: ResizeObserver;
     isTimePickerField: boolean;
-    optionsListId: string;
-    selectAllOptionId: string;
-    private _optionIdPrefix;
+    readonly optionsListId: string;
+    readonly selectAllOptionId: string;
+    private readonly _optionIdPrefix;
+    private _rootFontSizePx;
     private _inputChangeSubject$;
     private _destroy$;
     private _options;
@@ -1359,7 +1365,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     recalcVirtualListHeight(): void;
     isEmptyValue(): boolean;
     clearInput(): void;
-    get computedLabel(): string;
+    get computedLabel(): string | null;
     get isSelectAllVisible(): boolean;
     get optionsAriaSetSize(): number;
     get activeDescendantId(): string | null;
@@ -1383,8 +1389,9 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     private _scrollVirtualListToIndex;
     private _confirmInput;
     private _removeLastValue;
+    private _pxToRem;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsAutocompleteComponent, [{ optional: true; self: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsAutocompleteComponent, "cps-autocomplete", 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; }; "showChevron": { "alias": "showChevron"; "required": false; }; "withOptionsAliases": { "alias": "withOptionsAliases"; "required": false; }; "useOptionsAliasesWhenNoMatch": { "alias": "useOptionsAliasesWhenNoMatch"; "required": false; }; "optionAlias": { "alias": "optionAlias"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "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; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showLoadingMessage": { "alias": "showLoadingMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "externalError": { "alias": "externalError"; "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; }; "emptyOptionIndex": { "alias": "emptyOptionIndex"; "required": false; }; "inputChangeDebounceTime": { "alias": "inputChangeDebounceTime"; "required": false; }; "validating": { "alias": "validating"; "required": false; }; "_value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "valueChanged": "valueChanged"; "inputChanged": "inputChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsAutocompleteComponent, "cps-autocomplete", 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; }; "showChevron": { "alias": "showChevron"; "required": false; }; "withOptionsAliases": { "alias": "withOptionsAliases"; "required": false; }; "useOptionsAliasesWhenNoMatch": { "alias": "useOptionsAliasesWhenNoMatch"; "required": false; }; "optionAlias": { "alias": "optionAlias"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "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; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showLoadingMessage": { "alias": "showLoadingMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "externalError": { "alias": "externalError"; "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; }; "emptyOptionIndex": { "alias": "emptyOptionIndex"; "required": false; }; "inputChangeDebounceTime": { "alias": "inputChangeDebounceTime"; "required": false; }; "validating": { "alias": "validating"; "required": false; }; "_value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "valueChanged": "valueChanged"; "inputChanged": "inputChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -1517,6 +1524,11 @@ declare class CpsButtonComponent implements OnChanges {
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the button, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Name of the icon on the button.
      * @group Props
@@ -1565,12 +1577,16 @@ declare class CpsButtonComponent implements OnChanges {
     cvtFontSize: string;
     cvtIconSize: string;
     classesList: string[];
+    enterActive: boolean;
     constructor(document: Document);
     ngOnChanges(): void;
     setClasses(): void;
     onClick(event: Event): void;
+    onEnterKeydown(): void;
+    onEnterKeyup(): void;
+    onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonComponent, "cps-button", never, { "color": { "alias": "color"; "required": false; }; "contentColor": { "alias": "contentColor"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "type": { "alias": "type"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "size": { "alias": "size"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonComponent, "cps-button", never, { "color": { "alias": "color"; "required": false; }; "contentColor": { "alias": "contentColor"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "type": { "alias": "type"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "size": { "alias": "size"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 /**
@@ -2449,6 +2465,7 @@ type CpsColumnFilterType = 'text' | 'number' | 'date' | 'boolean' | 'category';
 type CpsButtonToggleOption = {
     value: any;
     label?: string;
+    ariaLabel?: string;
     icon?: string;
     disabled?: boolean;
     tooltip?: string;
@@ -2457,15 +2474,20 @@ type CpsButtonToggleOption = {
  * CpsButtonToggleComponent is used to select values using buttons.
  * @group Components
  */
-declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
+declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit, OnChanges {
     private _control;
     private document;
     private renderer;
     /**
-     * Label of the toggle buttons.
+     * Label of the button toggle component.
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the button toggle component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * An array of options.
      * @group Props
@@ -2534,20 +2556,23 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
      * @group Emits
      */
     valueChanged: EventEmitter<any>;
-    largestButtonWidth: number;
+    largestButtonWidthRem: number;
+    private _rootFontSizePx;
     constructor(_control: NgControl, document: Document, renderer: Renderer2);
     ngOnInit(): void;
+    ngOnChanges(): void;
     onChange: (event: any) => void;
     onTouched: () => void;
+    setDisabledState(disabled: boolean): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     writeValue(value: any): void;
-    updateValueEvent(event: any, val: any): void;
+    updateValueOnClick(val: any): void;
     private _updateValue;
     private _setEqualWidths;
-    setDisabledState(disabled: boolean): void;
+    private _pxToRem;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonToggleComponent, [{ optional: true; self: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonToggleComponent, "cps-button-toggle", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "mandatory": { "alias": "mandatory"; "required": false; }; "equalWidths": { "alias": "equalWidths"; "required": false; }; "optionTooltipPosition": { "alias": "optionTooltipPosition"; "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; }; "_value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonToggleComponent, "cps-button-toggle", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "mandatory": { "alias": "mandatory"; "required": false; }; "equalWidths": { "alias": "equalWidths"; "required": false; }; "optionTooltipPosition": { "alias": "optionTooltipPosition"; "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; }; "_value": { "alias": "value"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
 }
 
 /**