cps-ui-kit 21.7.0 → 21.9.0

package/package.json

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

package/styles/_cps-tooltip-style.scss

@@ -1,16 +1,22 @@
+@use './mixins' as *;
+
 .cps-tooltip {
   position: absolute;
   top: 0;
   cursor: default;
-  font-size: 14px;
-  background: #f9f5f6;
+  font-size: 0.875rem;
+  background: var(--cps-color-bg-light);
   color: var(--cps-color-text-darkest);
   font-family: 'Source Sans Pro', sans-serif;
-  border: 1px solid var(--cps-color-calm);
+  border: 0.0625rem solid var(--cps-color-calm);
   overflow-wrap: break-word;
-  border-radius: 3px;
-  padding: 3px;
+  border-radius: 0.1875rem;
+  padding: 0.1875rem;
   transition: opacity 0.2s;
   opacity: 0;
   z-index: 2000;
+
+  *:focus-visible {
+    @include focus-ring(0.125rem, 0.25rem, inherit);
+  }
 }

package/styles/styles.scss

@@ -43,3 +43,16 @@ body {
     color var(--cps-motion-base) var(--cps-motion-easing),
     box-shadow var(--cps-motion-base) var(--cps-motion-easing) !important;
 }
+
+// Visually hidden but accessible to screen readers
+.cps-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, InjectionToken, PipeTransform, OnDestroy, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, EventEmitter, NgZone, SimpleChanges, OnInit, QueryList, TemplateRef, AfterContentInit, AfterViewChecked, ComponentRef, ViewContainerRef, Type, ApplicationRef, EnvironmentInjector, Injector } from '@angular/core';
+import { OnChanges, InjectionToken, PipeTransform, OnInit, OnDestroy, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, EventEmitter, NgZone, SimpleChanges, QueryList, TemplateRef, AfterContentInit, AfterViewChecked, ComponentRef, ViewContainerRef, Type, ApplicationRef, EnvironmentInjector, Injector } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormGroup } from '@angular/forms';
 import { AnimationEvent, AnimationBuilder } from '@angular/animations';
 import { OverlayService, SortEvent, FilterMetadata, SelectItem, TreeNode } from 'primeng/api';
@@ -80,80 +80,105 @@ type CpsTooltipOpenOn = 'hover' | 'click' | 'focus';
  * CpsTooltipDirective provides advisory information for a target element.
  * @group Components
  */
-declare class CpsTooltipDirective implements OnDestroy {
+declare class CpsTooltipDirective implements OnInit, OnDestroy {
     /**
      * Tooltip text or html to show.
      * @group Props
      */
-    tooltip: string;
+    readonly tooltip: i0.InputSignal<string>;
     /**
      * Delay to show the tooltip in milliseconds, it can be of type string or number.
      * @group Props
+     * @default 300
      */
-    tooltipOpenDelay: string | number;
+    readonly tooltipOpenDelay: i0.InputSignal<string | number>;
     /**
      * Delay to hide the tooltip in milliseconds, it can be of type string or number.
      * @group Props
+     * @default 300
      */
-    tooltipCloseDelay: string | number;
+    readonly tooltipCloseDelay: i0.InputSignal<string | number>;
     /**
      * Determines whether the tooltip should open on hover, click or focus.
      * @group Props
+     * @default hover
      */
-    tooltipOpenOn: CpsTooltipOpenOn;
+    readonly tooltipOpenOn: i0.InputSignal<CpsTooltipOpenOn>;
     /**
      * Position of the tooltip, it can be 'top', 'bottom', 'left' or 'right'.
      * @group Props
+     * @default top
      */
-    tooltipPosition: CpsTooltipPosition;
+    readonly tooltipPosition: i0.InputSignal<CpsTooltipPosition>;
     /**
      * Determines whether the tooltip is persistent.
      * @group Props
+     * @default false
      */
-    tooltipPersistent: boolean;
+    readonly tooltipPersistent: i0.InputSignal<boolean>;
     /**
      * When present, it specifies that the tooltip should be disabled.
      * @group Props
+     * @default false
      */
-    tooltipDisabled: boolean;
+    readonly tooltipDisabled: i0.InputSignal<boolean>;
     /**
      * Max width of the tooltip of type number denoting pixels or string.
      * @group Props
+     * @default 100%
      */
-    tooltipMaxWidth: number | string;
+    readonly tooltipMaxWidth: i0.InputSignal<string | number>;
     /**
      * Tooltip content class for styling.
      * @group Props
+     * @default cps-tooltip-content
      */
-    tooltipContentClass: string;
+    readonly tooltipContentClass: i0.InputSignal<string>;
     /**
-     * Tooltip offset for styling.
+     * Tooltip offset, a number denoting pixels or a string.
      * @group Props
+     * @default 0.5rem
      */
-    tooltipOffset: number;
+    readonly tooltipOffset: i0.InputSignal<string | number>;
+    readonly cvtTooltipOffset: i0.Signal<string>;
     private _popup?;
     private _showTimeout?;
     private _hideTimeout?;
+    private _ariaTarget?;
+    private readonly _tooltipId;
+    private _rootFontSizePx;
     private window;
     private _elementRef;
     private _document;
     private _domSanitizer;
     constructor();
+    ngOnInit(): void;
     ngOnDestroy(): void;
-    private _createTooltip;
-    private _destroyTooltip;
-    private _constructElement;
-    private _getCoords;
-    private _getCoordsForPosition;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onFocus(): void;
-    onBlur(): void;
+    onFocusOut(event: FocusEvent): void;
+    onTabFromTrigger(event: Event): void;
     onClick(): void;
-    onDocumentClick(target: any): void;
-    onPageResize(event: Event): void;
+    onDocumentClick(target: EventTarget | null): void;
+    onPageResize(): void;
+    private _onScrollDestroy;
+    private _onPopupKeydown;
+    private _onPopupFocusOut;
+    private _createTooltip;
+    private _positionAndShow;
+    private _destroyTooltip;
+    private _isInsideScreen;
+    private _pxToRem;
+    private _getOffsetPx;
+    private _getCoords;
+    private _getCoordsForPosition;
+    private _focusableIn;
+    private _getNextFocusableAfterTrigger;
+    private _resolveAriaTarget;
+    private _announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsTooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CpsTooltipDirective, "[cpsTooltip]", never, { "tooltip": { "alias": "cpsTooltip"; "required": false; }; "tooltipOpenDelay": { "alias": "tooltipOpenDelay"; "required": false; }; "tooltipCloseDelay": { "alias": "tooltipCloseDelay"; "required": false; }; "tooltipOpenOn": { "alias": "tooltipOpenOn"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "tooltipPersistent": { "alias": "tooltipPersistent"; "required": false; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; }; "tooltipMaxWidth": { "alias": "tooltipMaxWidth"; "required": false; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; }; "tooltipOffset": { "alias": "tooltipOffset"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CpsTooltipDirective, "[cpsTooltip]", never, { "tooltip": { "alias": "cpsTooltip"; "required": true; "isSignal": true; }; "tooltipOpenDelay": { "alias": "tooltipOpenDelay"; "required": false; "isSignal": true; }; "tooltipCloseDelay": { "alias": "tooltipCloseDelay"; "required": false; "isSignal": true; }; "tooltipOpenOn": { "alias": "tooltipOpenOn"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipPersistent": { "alias": "tooltipPersistent"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; "tooltipMaxWidth": { "alias": "tooltipMaxWidth"; "required": false; "isSignal": true; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; "isSignal": true; }; "tooltipOffset": { "alias": "tooltipOffset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type Nullable$1<T = void> = T | null | undefined;
@@ -1401,21 +1426,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);
@@ -1513,7 +1542,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
@@ -1525,15 +1554,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
@@ -1545,10 +1579,16 @@ declare class CpsFileUploadComponent implements OnInit, OnChanges {
      */
     fileNameTooltipPosition: CpsTooltipPosition;
     /**
-     * File name tooltip offset for styling.
+     * File name tooltip offset, a number denoting pixels or a string.
      * @group Props
      */
-    fileNameTooltipOffset: number;
+    fileNameTooltipOffset: number | string;
+    /**
+     * 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
@@ -1561,6 +1601,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
@@ -1568,21 +1626,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 ngAcceptInputType_fileNameTooltipOffset: unknown;
+    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;
 }
 
 /**
@@ -1761,42 +1834,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>;
 }
 
 /**