cps-ui-kit 21.6.0 → 21.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cps-ui-kit",
-  "version": "21.6.0",
+  "version": "21.8.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,
     recalcVirtualListHeight(): void;
     isEmptyValue(): boolean;
     clearInput(): void;
+    get isRequired(): boolean;
     get computedLabel(): string | null;
     get isSelectAllVisible(): boolean;
     get optionsAriaSetSize(): number;
@@ -695,6 +696,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
     private _control;
     private document;
     private renderer;
+    private cdr;
     /**
      * Label of the button toggle component.
      * @group Props
@@ -775,7 +777,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
     valueChanged: EventEmitter<any>;
     largestButtonWidthRem: number;
     private _rootFontSizePx;
-    constructor(_control: NgControl, document: Document, renderer: Renderer2);
+    constructor(_control: NgControl, document: Document, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(): void;
     onChange: (event: any) => void;
@@ -788,7 +790,7 @@ declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit,
     private _updateValue;
     private _setEqualWidths;
     private _pxToRem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonToggleComponent, [{ optional: true; self: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonToggleComponent, [{ optional: true; self: true; }, null, null, null]>;
     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>;
 }
 
@@ -1399,21 +1401,25 @@ declare class CpsDividerComponent {
     /**
      * Determines whether the divider is vertically aligned.
      * @group Props
+     * @default false
      */
     vertical: i0.InputSignal<boolean>;
     /**
      * Color of the divider.
      * @group Props
+     * @default line-mid
      */
     color: i0.InputSignal<string>;
     /**
      * Type of the divider.
      * @group Props
+     * @default solid
      */
     type: i0.InputSignal<CpsDividerType>;
     /**
      * Thickness of the divider, a number denoting pixels or a string.
      * @group Props
+     * @default 1px
      */
     thickness: i0.InputSignal<string | number>;
     constructor(document: Document);
@@ -1511,7 +1517,7 @@ declare class CpsExpansionPanelComponent implements OnInit, AfterViewInit {
  * CpsFileUploadComponent is an advanced uploader with dragdrop support.
  * @group Components
  */
-declare class CpsFileUploadComponent implements OnInit, OnChanges {
+declare class CpsFileUploadComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * Expected extensions of a file to be uploaded. E.g. 'doc or .doc'.
      * @group Props
@@ -1523,15 +1529,20 @@ declare class CpsFileUploadComponent implements OnInit, OnChanges {
      */
     fileDesc: string;
     /**
-     * Width of the component, a number denoting pixels or a string.
+     * Aria label for the component, used for accessibility.
      * @group Props
      */
-    width: number | string;
+    ariaLabel: string;
     /**
      * Expected file info block, explaining some extra stuff about file.
      * @group Props
      */
     fileInfo: string;
+    /**
+     * Whether the component is disabled.
+     * @group Props
+     */
+    disabled: boolean;
     /**
      * Callback for uploaded file processing.
      * @group Props
@@ -1547,6 +1558,12 @@ declare class CpsFileUploadComponent implements OnInit, OnChanges {
      * @group Props
      */
     fileNameTooltipOffset: number;
+    /**
+     * Width of the component, a number denoting pixels or a string.
+     * @group Props
+     * @default 100%
+     */
+    width: i0.InputSignal<string | number>;
     /**
      * Callback to invoke when file is uploaded.
      * @param {File} File
@@ -1559,6 +1576,24 @@ declare class CpsFileUploadComponent implements OnInit, OnChanges {
      * @group Emits
      */
     fileUploadFailed: EventEmitter<string>;
+    /**
+     * Callback to invoke when file is processed.
+     * @param {File} File
+     * @group Emits
+     */
+    fileProcessed: EventEmitter<File>;
+    /**
+     * Callback to invoke when file processing fails.
+     * @param {string} - file name
+     * @group Emits
+     */
+    fileProcessingFailed: EventEmitter<string>;
+    /**
+     * Callback to invoke when file processing is cancelled.
+     * @param {string} - file name
+     * @group Emits
+     */
+    fileProcessingCancelled: EventEmitter<string>;
     /**
      * Callback to invoke when uploaded file is removed.
      * @param {string} - file name
@@ -1566,20 +1601,36 @@ declare class CpsFileUploadComponent implements OnInit, OnChanges {
      */
     uploadedFileRemoved: EventEmitter<string>;
     fileInput?: ElementRef<HTMLInputElement>;
+    dropzoneButton?: ElementRef<HTMLButtonElement>;
     isDragoverFile: boolean;
     uploadedFile?: File;
     extensionsString: string;
     extensionsStringAsterisks: string;
-    cvtWidth: string;
+    cvtWidth: i0.Signal<string>;
     isProcessingFile: boolean;
+    errorMessage: string;
+    private dragCounter;
+    private readonly cancelProcessing$;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    resetState(): void;
+    openFilePicker(): void;
+    onDragEnter(): void;
+    onDragLeave(): void;
+    onDragEnd(): void;
+    onDragOver(event: DragEvent): void;
+    onDrop(event: Event): void;
     updateExtensionsString(): void;
     tryUploadFile(event: Event): void;
+    onRemoveUploadedFile(event: Event): void;
+    onCancelFileProcessing(event: Event): void;
+    cancelFileProcessing(): void;
     removeUploadedFile(): void;
     private _isFileExtensionValid;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsFileUploadComponent, "cps-file-upload", never, { "extensions": { "alias": "extensions"; "required": false; }; "fileDesc": { "alias": "fileDesc"; "required": false; }; "width": { "alias": "width"; "required": false; }; "fileInfo": { "alias": "fileInfo"; "required": false; }; "fileProcessingCallback": { "alias": "fileProcessingCallback"; "required": false; }; "fileNameTooltipPosition": { "alias": "fileNameTooltipPosition"; "required": false; }; "fileNameTooltipOffset": { "alias": "fileNameTooltipOffset"; "required": false; }; }, { "fileUploaded": "fileUploaded"; "fileUploadFailed": "fileUploadFailed"; "uploadedFileRemoved": "uploadedFileRemoved"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsFileUploadComponent, "cps-file-upload", never, { "extensions": { "alias": "extensions"; "required": false; }; "fileDesc": { "alias": "fileDesc"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "fileInfo": { "alias": "fileInfo"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fileProcessingCallback": { "alias": "fileProcessingCallback"; "required": false; }; "fileNameTooltipPosition": { "alias": "fileNameTooltipPosition"; "required": false; }; "fileNameTooltipOffset": { "alias": "fileNameTooltipOffset"; "required": false; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "fileUploaded": "fileUploaded"; "fileUploadFailed": "fileUploadFailed"; "fileProcessed": "fileProcessed"; "fileProcessingFailed": "fileProcessingFailed"; "fileProcessingCancelled": "fileProcessingCancelled"; "uploadedFileRemoved": "uploadedFileRemoved"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_fileNameTooltipOffset: unknown;
 }
 
@@ -1759,42 +1810,51 @@ declare class CpsProgressCircularComponent implements OnInit {
  * CpsProgressLinearComponent is a process status indicator of a rectangular form.
  * @group Components
  */
-declare class CpsProgressLinearComponent implements OnInit {
-    private document;
+declare class CpsProgressLinearComponent {
     /**
      * Width of the progress bar, of type number denoting pixels or string.
      * @group Props
+     * @default 100%
      */
-    width: number | string;
+    width: i0.InputSignal<string | number>;
     /**
      * Height of the progress bar, of type number denoting pixels or string.
      * @group Props
+     * @default 0.5rem
      */
-    height: number | string;
+    height: i0.InputSignal<string | number>;
     /**
      * Color of the progress bar.
      * @group Props
+     * @default var(--cps-accent-primary)
      */
-    color: string;
+    color: i0.InputSignal<string>;
     /**
      * Background color of the progress bar.
      * @group Props
+     * @default white
      */
-    bgColor: string;
+    bgColor: i0.InputSignal<string>;
     /**
      * Option to control the opacity of the progress bar.
      * @group Props
+     * @default 1
      */
-    opacity: number | string;
+    opacity: i0.InputSignal<string | number>;
     /**
      * Border radius of the progress bar, of type number denoting pixels or string.
      * @group Props
+     * @default 0
      */
-    radius: number | string;
-    constructor(document: Document);
-    ngOnInit(): void;
+    radius: i0.InputSignal<string | number>;
+    private readonly document;
+    cvtWidth: i0.Signal<string>;
+    cvtHeight: i0.Signal<string>;
+    cvtRadius: i0.Signal<string>;
+    cssColor: i0.Signal<string>;
+    cssBgColor: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsProgressLinearComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsProgressLinearComponent, "cps-progress-linear", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "color": { "alias": "color"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "radius": { "alias": "radius"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsProgressLinearComponent, "cps-progress-linear", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -1804,6 +1864,7 @@ declare class CpsProgressLinearComponent implements OnInit {
 type CpsRadioOption = {
     value: any;
     label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     tooltip?: string;
 };
@@ -1812,7 +1873,7 @@ declare const CPS_RADIO_GROUP: InjectionToken<CpsRadioGroupComponent>;
  * CpsRadioGroupComponent is a radio buttons group.
  * @group Components
  */
-declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     private _control;
     /**
      * An array of options.
@@ -1824,6 +1885,11 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
      * @group Props
      */
     groupLabel: string;
+    /**
+     * Aria label for the radio group, used for accessibility, it takes precedence over groupLabel.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Determines whether the radio group should be vertical.
      * @group Props
@@ -1893,11 +1959,13 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
      * @group Emits
      */
     focused: EventEmitter<any>;
+    readonly groupName: string;
     private _statusChangesSubscription?;
     private _value;
     error: string;
     constructor(_control: NgControl);
     ngOnInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     onChange: (event: any) => void;
     onTouched: () => void;
@@ -1909,9 +1977,11 @@ declare class CpsRadioGroupComponent implements ControlValueAccessor, OnInit, On
     setDisabledState(disabled: boolean): void;
     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; }; "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>;
+    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>;
 }
 
 /**