cps-ui-kit 0.140.0 → 0.141.0

package/fesm2020/cps-ui-kit.mjs

@@ -225,10 +225,26 @@ const iconNames = [
     'widget-button-icon',
     'xls'
 ];
+/**
+ * CpsIconComponent is a component that is used for icons.
+ * @group Components
+ */
 class CpsIconComponent {
     constructor() {
+        /**
+         * Name of the icon.
+         * @group Props
+         */
         this.icon = '';
+        /**
+         * Size of the icon, it can be of type number denoting pixels, string or 'fill', 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.size = 'small';
+        /**
+         * Color of the icon.
+         * @group Props
+         */
         this.color = 'currentColor';
         this.iconColor = 'currentColor';
         this.url = '../../../../assets/';
@@ -280,13 +296,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsProgressLinearComponent is a process status indicator of a rectangular form.
+ * @group Components
+ */
 class CpsProgressLinearComponent {
     constructor() {
+        /**
+         * Width of the progress bar, of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * Height of the progress bar, of type number denoting pixels or string.
+         * @group Props
+         */
         this.height = '0.5rem';
+        /**
+         * Color of the progress bar.
+         * @group Props
+         */
         this.color = 'calm';
+        /**
+         * Background color of the progress bar.
+         * @group Props
+         */
         this.bgColor = 'white';
+        /**
+         * Option to control the transparency of the progress bar, of type number or string.
+         * @group Props
+         */
         this.opacity = 1;
+        /**
+         * Border radius of the progress bar, of type number or string.
+         * @group Props
+         */
         this.radius = 0;
     }
     ngOnInit() {
@@ -316,17 +360,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsTooltipDirective provides advisory information for a target element.
+ * @group Directives
+ */
 class CpsTooltipDirective {
     // eslint-disable-next-line no-useless-constructor
     constructor(_elementRef) {
         this._elementRef = _elementRef;
+        /**
+         * Delay to show the tooltip in milliseconds, it can be of type string or number.
+         * @group Props
+         */
         this.tooltipOpenDelay = 300;
+        /**
+         * Delay to hide the tooltip in milliseconds, it can be of type string or number.
+         * @group Props
+         */
         this.tooltipCloseDelay = 300;
+        /**
+         * Whether the tooltip should open on hover, click or focus.
+         * @group Props
+         */
         this.tooltipOpenOn = 'hover';
+        /**
+         * Position of the tooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.tooltipPosition = 'top';
+        /**
+         * Whether the tooltip is persistent.
+         * @group Props
+         */
         this.tooltipPersistent = false;
+        /**
+         * When present, it specifies that the tooltip should be disabled.
+         * @group Props
+         */
         this.tooltipDisabled = false;
+        /**
+         * Max width of the tooltip of type number denoting pixels or string.
+         * @group Props
+         */
         this.tooltipMaxWidth = '100%';
+        /**
+         * Tooltip content class for styling.
+         * @group Props
+         */
         this.tooltipContentClass = 'cps-tooltip-content';
         this._createTooltip = () => {
             if (this._popup)
@@ -534,13 +614,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+/**
+ * CpsInfoCircleComponent is a component that provides information by means of the info icon with the tooltip on hover.
+ * @group Components
+ */
 class CpsInfoCircleComponent {
     constructor() {
+        /**
+         * Size of the icon, it can be of type number denoting pixels, string or 'fill', 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.size = 'small';
+        /**
+         * Tooltip text to provide more info.
+         * @group Props
+         */
         this.tooltipText = '';
+        /**
+         * Position of the tooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.tooltipPosition = 'top';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
         this.tooltipContentClass = 'cps-tooltip-content';
+        /**
+         * Max width of the tooltip of type number denoting pixels or string.
+         * @group Props
+         */
         this.tooltipMaxWidth = '100%';
+        /**
+         * Whether the tooltip is persistent.
+         * @group Props
+         */
         this.tooltipPersistent = false;
     }
 }
@@ -563,7 +671,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsInputComponent is used to enter values in a certain formats such as numeric, text or password.
+ * @group Components
+ */
 class CpsInputComponent {
+    /**
+     * Value of the input.
+     * @group Props
+     */
     set value(value) {
         if (!value)
             value = '';
@@ -577,34 +693,156 @@ class CpsInputComponent {
         this._control = _control;
         this.elementRef = elementRef;
         this.cdRef = cdRef;
+        /**
+         * Label of the input element.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Bottom hint text for the input field.
+         * @group Props
+         */
         this.hint = '';
+        /**
+         * Placeholder text for the input field.
+         * @group Props
+         */
         this.placeholder = 'Please enter';
+        /**
+         * Whether input is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Whether input is readonly.
+         * @group Props
+         */
         this.readonly = false;
+        /**
+         * Width of the input field, of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * Type of the input of type 'text', 'number' or 'password'.
+         * @group Props
+         */
         this.type = 'text';
+        /**
+         * When enabled, a loading bar is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Icon before input value.
+         * @group Props
+         */
         this.prefixIcon = '';
+        /**
+         * When enabled, prefixIcon is clickable.
+         * @group Props
+         */
         this.prefixIconClickable = false;
+        /**
+         * Size of icon before input value, of type number or string or it can be a value 'fill', 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.prefixIconSize = '18px';
+        /**
+         * Text before input value.
+         * @group Props
+         */
         this.prefixText = '';
+        /**
+         * Hides hint and validation errors.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the component should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Error message.
+         * @group Props
+         */
         this.error = '';
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * InfoTooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Max width of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Styling appearance of input field, it can be "outlined" or "underlined" or "borderless".
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Readonly value to display inside of input field.
+         * @group Props
+         */
         this.valueToDisplay = '';
+        /**
+         * Callback to invoke on value change.
+         * @param {string} string - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
+        /**
+         * Callback to invoke when the component receives focus.
+         * @param {any}
+         * @group Emits
+         */
         this.focused = new EventEmitter();
+        /**
+         * Callback to invoke when the prefix icon is clicked.
+         * @param {any}
+         * @group Emits
+         */
         this.prefixIconClicked = new EventEmitter();
+        /**
+         * Callback to invoke when the component loses focus.
+         * @param {any}
+         * @group Emits
+         */
         this.blurred = new EventEmitter();
+        /**
+         * Callback to invoke when x icon is clicked.
+         * @param {any}
+         * @group Emits
+         */
         this.cleared = new EventEmitter();
+        /**
+         * Callback to invoke when enter is clicked.
+         * @param {any}
+         * @group Emits
+         */
         this.enterClicked = new EventEmitter();
         this.currentType = '';
         this.prefixWidth = '';
@@ -809,14 +1047,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['prefixTextSpan']
             }] } });
 
+/**
+ * CpsChipComponent represents a chip element.
+ * @group Components
+ */
 class CpsChipComponent {
     constructor() {
+        /**
+         * Label of the chip element.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Name of the icon.
+         * @group Props
+         */
         this.icon = '';
+        /**
+         * Color of the icon.
+         * @group Props
+         */
         this.iconColor = 'text-darkest';
+        /**
+         * Position of the icon, it can be 'before' or 'after'. Defaults to 'before'.
+         * @group Props
+         */
         this.iconPosition = 'before';
+        /**
+         * Option for closing a chip element.
+         * @group Props
+         */
         this.closable = false;
+        /**
+         * Whether chip is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Callback to invoke on chip close.
+         * @param {string} string - Chip closed.
+         * @group Emits
+         */
         this.closed = new EventEmitter();
         this.classesList = ['cps-chip'];
     }
@@ -921,6 +1192,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{ standalone: true, name: 'checkOptionSelected' }]
         }] });
 
+/**
+ * CpsMenuComponent is a popup element, that contains menu items or arbitrary content.
+ * @group Components
+ */
 class CpsMenuComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(document, platformId, el, renderer, cd, zone, config, overlayService) {
@@ -932,18 +1207,70 @@ class CpsMenuComponent {
         this.zone = zone;
         this.config = config;
         this.overlayService = overlayService;
+        /**
+         * Header title of the menu.
+         * @group Props
+         */
         this.header = '';
+        /**
+         * An array of menu items.
+         * @group Props
+         */
         this.items = [];
+        /**
+         * Whether to include top pointing arrow on the menu.
+         * @group Props
+         */
         this.withArrow = true;
-        this.compressed = false; // prepared-colored, without header and items description
+        /**
+         * Menu with prepared-colored items, without header and items description.
+         * @group Props
+         */
+        this.compressed = false;
+        /**
+         * Whether the menu should show on target element focus.
+         * @group Props
+         */
         this.focusOnShow = true;
+        /**
+         * Whether the menu should be persistent.
+         * @group Props
+         */
         this.persistent = false;
+        /**
+         * Styling class of the menu container.
+         * @group Props
+         */
         this.containerClass = '';
+        /**
+         * Transition options of the show animation.
+         * @group Props
+         */
         this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+        /**
+         * Transition options of the hide animation.
+         * @group Props
+         */
         this.hideTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+        /**
+         * Callback to invoke when menu is shown.
+         * @group Emits
+         */
         this.menuShown = new EventEmitter();
+        /**
+         * Callback to invoke when menu is hidden.
+         * @group Emits
+         */
         this.menuHidden = new EventEmitter();
+        /**
+         * Callback to invoke before menu is hidden.
+         * @group Emits
+         */
         this.beforeMenuHidden = new EventEmitter();
+        /**
+         * Callback to invoke when content is clicked.
+         * @group Emits
+         */
         this.contentClicked = new EventEmitter();
         this.withIcons = true;
         this.autoZIndex = true;
@@ -1396,6 +1723,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CpsSelectComponent is used to select items from a collection.
+ * @group Components
+ */
 class CpsSelectComponent {
     set value(value) {
         this._value = value;
@@ -1406,37 +1737,166 @@ class CpsSelectComponent {
     }
     constructor(_control) {
         this._control = _control;
+        /**
+         * The label of the select component.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Placeholder text for the select component.
+         * @group Props
+         */
         this.placeholder = 'Please select';
+        /**
+         * Bottom hint text for the select component.
+         * @group Props
+         */
         this.hint = '';
-        this.returnObject = true; // if false, value will be option[optionValue]
+        /**
+         * Returns the object directly rather than the value specified with optionValue.
+         * @group Props
+         */
+        this.returnObject = true;
+        /**
+         * Specifies if multiple values can be selected.
+         * @group Props
+         */
         this.multiple = false;
+        /**
+         * Specifies whether the component is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Width of the select component, of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
-        this.selectAll = true; // doesn't work with virtual scroll
-        this.chips = true;
+        /**
+         * Option for selecting all elements. Doesn't work with virtual scroll.
+         * @group Props
+         */
+        this.selectAll = true;
+        /**
+         * When selecting elements, they will appear in a form of a chip.
+         * @group Props
+         */
+        this.chips = true;
+        /**
+         * Whether the chips can be directly removed.
+         * @group Props
+         */
         this.closableChips = true;
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Whether the dropdown list should open on clear.
+         * @group Props
+         */
         this.openOnClear = true;
+        /**
+         * An array of options.
+         * @group Props
+         */
         this.options = [];
+        /**
+         * Name of the label field of an option.
+         * @group Props
+         */
         this.optionLabel = 'label';
-        this.optionValue = 'value'; // needed only if returnObject === false
+        /**
+         * Name of the value field of an option. Needed only if returnObject prop is false.
+         * @group Props
+         */
+        this.optionValue = 'value';
+        /**
+         * Name of the info field of an option, shows the additional information text.
+         * @group Props
+         */
         this.optionInfo = 'info';
+        /**
+         * Hides hint and validation errors.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the component should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Icon before input value.
+         * @group Props
+         */
         this.prefixIcon = '';
+        /**
+         * Size of icon before input value, of type number or string or value 'fill', 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.prefixIconSize = '18px';
+        /**
+         * When enabled, a loading bar is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Whether only the elements within scrollable area should be added into the DOM.
+         * @group Props
+         */
         this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
         this.numToleratedItems = 10;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * InfoTooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Max width of infoTooltip of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Class for additional styling of the dropdown list.
+         * @group Props
+         */
         this.optionsClass = '';
+        /**
+         * Styling appearance of select input, it can be 'outlined', 'underlined' or 'borderless'.
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Value of the select component.
+         * @group Props
+         */
         this._value = undefined;
+        /**
+         * Callback to invoke on value change.
+         * @param {any} any - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this._statusChangesSubscription = new Subscription();
         this.error = '';
@@ -1831,7 +2291,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['optionsList']
             }] } });
 
+/**
+ * BaseTreeDropdownComponent is an internal base component to support hierarchical data dropdown.
+ * @group Components
+ */
 class CpsBaseTreeDropdownComponent {
+    /**
+     * An array of objects to display as the available options.
+     * @group Props
+     */
     set options(options) {
         if (options?.some((o) => o.inner)) {
             this._options = options;
@@ -1852,32 +2320,141 @@ class CpsBaseTreeDropdownComponent {
     constructor(control, cdRef) {
         this.control = control;
         this.cdRef = cdRef;
+        /**
+         * Label of the component.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Bottom hint text.
+         * @group Props
+         */
         this.hint = '';
+        /**
+         * Specifies if multiple values can be selected.
+         * @group Props
+         */
         this.multiple = false;
+        /**
+         * Whether the component is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Width of the component, of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * When selecting an element, it will appear in a form of a chip.
+         * @group Props
+         */
         this.chips = true;
+        /**
+         * Whether the chips can be directly removed.
+         * @group Props
+         */
         this.closableChips = true;
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Whether the dropdown should open on clear.
+         * @group Props
+         */
         this.openOnClear = true;
+        /**
+         * Name of the label field of an option.
+         * @group Props
+         */
         this.optionLabel = 'label';
+        /**
+         * Name of the info field of an option, shows the additional information text.
+         * @group Props
+         */
         this.optionInfo = 'info';
+        /**
+         * Options for hiding details.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the component should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Icon before input value.
+         * @group Props
+         */
         this.prefixIcon = '';
+        /**
+         * Size of icon before input value, of type number, string, 'fill', 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.prefixIconSize = '18px';
+        /**
+         * When enabled, a loading bar is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Whether only the elements within scrollable area should be added into the DOM.
+         * @group Props
+         */
         this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
         this.numToleratedItems = 10;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Max width of infoTooltip of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * When set, it expands all directiories initially.
+         * @group Props
+         */
         this.initialExpandDirectories = false;
+        /**
+         * When set, it expands all options initially.
+         * @group Props
+         */
         this.initialExpandAll = false;
+        /**
+         * Value of the component.
+         * @group Props
+         */
         this._value = undefined;
+        /**
+         * Callback to invoke on value change.
+         * @param {any} any - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this._statusChangesSubscription = new Subscription();
         this._options = [];
@@ -2324,12 +2901,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['boxEl']
             }] } });
 
+/**
+ * CpsTreeSelectComponent allows to select items from hierarchical data dropdown.
+ * @group Components
+ */
 class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
     constructor(control, cdRef) {
         super(control, cdRef);
         this.control = control;
         this.cdRef = cdRef;
+        /**
+         * Styling appearance of tree select, it can be "outlined", "underlined" or "borderless".
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Placeholder text.
+         * @group Props
+         */
         this.placeholder = 'Please select';
     }
     ngOnInit() {
@@ -2383,6 +2972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
+ * @group Components
+ */
 class CpsAutocompleteComponent {
     get value() {
         return this._value;
@@ -2394,37 +2987,166 @@ class CpsAutocompleteComponent {
     constructor(_control, _labelByValue) {
         this._control = _control;
         this._labelByValue = _labelByValue;
+        /**
+         * Label of the input element.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Placeholder text.
+         * @group Props
+         */
         this.placeholder = 'Please enter';
+        /**
+         * Bottom hint text.
+         * @group Props
+         */
         this.hint = '';
-        this.returnObject = true; // if false, value will be option[optionValue]
+        /**
+         * Returns the object directly rather than the value specified with optionValue.
+         * @group Props
+         */
+        this.returnObject = true;
+        /**
+         * Specifies if multiple values can be selected.
+         * @group Props
+         */
         this.multiple = false;
+        /**
+         * Whether autocomplete is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Width of the input field, a number denoting pixels or a string.
+         * @group Props
+         */
         this.width = '100%';
-        this.selectAll = true; // doesn't work with virtual scroll
+        /**
+         * Option for selecting all elements. Doesn't work with virtual scroll.
+         * @group Props
+         */
+        this.selectAll = true;
+        /**
+         * When selecting elements, they will appear in a form of a chip.
+         * @group Props
+         */
         this.chips = true;
+        /**
+         * Whether the chips can be directly removed.
+         * @group Props
+         */
         this.closableChips = true;
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Whether the dropdown list should open on clear.
+         * @group Props
+         */
         this.openOnClear = true;
+        /**
+         * An array of options.
+         * @group Props
+         */
         this.options = [];
+        /**
+         * Name of the label field of an option.
+         * @group Props
+         */
         this.optionLabel = 'label';
-        this.optionValue = 'value'; // needed only if returnObject === false
+        /**
+         * Name of the value field of an option. Needed only if returnObject prop is false.
+         * @group Props
+         */
+        this.optionValue = 'value';
+        /**
+         * Name of the info field of an option, shows the additional information text.
+         * @group Props
+         */
         this.optionInfo = 'info';
+        /**
+         * Hides hint and validation errors.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the component should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Icon before input value.
+         * @group Props
+         */
         this.prefixIcon = '';
+        /**
+         * Size of icon before input value, of type number or string or 'fill' or 'xsmall' or 'small' or 'normal' or 'large'.
+         * @group Props
+         */
         this.prefixIconSize = '18px';
+        /**
+         * When enabled, a loading bar is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Text to display when there is no data. Defaults to 'No results found'.
+         * @group Props
+         */
         this.emptyMessage = 'No results found';
+        /**
+         * Whether only the elements within scrollable area should be added into the DOM.
+         * @group Props
+         */
         this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
         this.numToleratedItems = 10;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Max width of infoTooltip of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
-        this.infoTooltipPosition = 'top';
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
+        this.infoTooltipPosition = 'top';
+        /**
+         * Styling appearance of autocomplete input, it could be 'outlined', 'underlined' or 'borderless'.
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Value of the autocomplete.
+         * @group Props
+         */
         this._value = undefined;
+        /**
+         * Callback to invoke on value change.
+         * @param {any} any - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this._statusChangesSubscription = new Subscription();
         this.error = '';
@@ -2949,13 +3671,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['optionsList']
             }] } });
 
+/**
+ * CpsTreeAutocompleteComponent allows to choose items from hierarchical data dropdown and provides real-time suggestions when being typed.
+ * @group Components
+ */
 class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
     constructor(control, cdRef) {
         super(control, cdRef);
         this.control = control;
         this.cdRef = cdRef;
+        /**
+         * Message if array of items is empty.
+         * @group Props
+         */
         this.emptyMessage = 'No results found';
+        /**
+         * Styling appearance of tree autocomplete, it can be 'outlined', 'underlined' or 'borderless'.
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Placeholder text.
+         * @group Props
+         */
         this.placeholder = 'Please enter';
         this.inputText = '';
         this.backspaceClickedOnce = false;
@@ -3167,10 +3905,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsProgressCircularComponent is a process status indicator in a form of a spinner.
+ * @group Components
+ */
 class CpsProgressCircularComponent {
     constructor() {
+        /**
+         * Diameter of the progress bar, of type number denoting pixels or string.
+         * @group Props
+         */
         this.diameter = 40;
+        /**
+         * Thickness of the progress bar, of type number denoting pixels or string.
+         * @group Props
+         */
         this.strokeWidth = 4;
+        /**
+         * Color of the progress bar.
+         * @group Props
+         */
         this.color = 'calm';
     }
     ngOnInit() {
@@ -3192,19 +3946,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsButtonComponent is a button element.
+ * @group Components
+ */
 class CpsButtonComponent {
     constructor() {
+        /**
+         * Color of the button.
+         * @group Props
+         */
         this.color = 'calm';
-        this.contentColor = 'white'; // works only with solid type
+        /**
+         * Color of content on the button. Works only with 'solid' type.
+         * @group Props
+         */
+        this.contentColor = 'white';
+        /**
+         * Type of the button in terms of appearance, it can be 'solid' or 'outlined' or 'borderless'.
+         * @group Props
+         */
         this.type = 'solid';
+        /**
+         * Label or text on the button.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Name of the icon on the button.
+         * @group Props
+         */
         this.icon = '';
+        /**
+         * Position of the icon on the button, it can be 'before' or 'after'.
+         * @group Props
+         */
         this.iconPosition = 'before';
+        /**
+         * Size on the button, it can be 'xsmall', 'small', 'normal' or 'large'.
+         * @group Props
+         */
         this.size = 'normal';
+        /**
+         * Width on the button, of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = 0;
+        /**
+         * Height on the button, of type number denoting pixels or string.
+         * @group Props
+         */
         this.height = 0;
+        /**
+         * When present, it specifies that the component should be disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * When enabled, a cps-progress-circular bar is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Callback to execute when button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.clicked = new EventEmitter();
         this.buttonColor = '';
         this.textColor = '';
@@ -3321,7 +4128,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['style.width']
             }] } });
 
+/**
+ * CpsCheckboxComponent is a checkbox element.
+ * @group Components
+ */
 class CpsCheckboxComponent {
+    /**
+     * Value of the checkbox.
+     * @group Props
+     */
     set value(value) {
         this._value = value;
         this.onChange(value);
@@ -3332,15 +4147,56 @@ class CpsCheckboxComponent {
     constructor(_control, _elementRef) {
         this._control = _control;
         this._elementRef = _elementRef;
+        /**
+         * Label of the checkbox.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Whether checkbox is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * InfoTooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Size of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Name of the icon.
+         * @group Props
+         */
         this.icon = '';
+        /**
+         * Color of the icon.
+         * @group Props
+         */
         this.iconColor = 'text-dark';
+        /**
+         * Callback to invoke on value change.
+         * @param {boolean} boolean - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this._value = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -3414,11 +4270,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 let nextUniqueId = 0;
+/**
+ * CpsRadioButtonComponent is an internal radio button component.
+ * @group Components
+ */
 class CpsRadioButtonComponent {
     constructor() {
         this._uniqueId = `cps-radio-button-${++nextUniqueId}`;
+        /**
+         * Whether the radio button is checked.
+         * @group Props
+         */
         this.checked = false;
+        /**
+         * Whether the radio button is disabled.
+         * @group Props
+         */
         this.groupDisabled = false;
+        /**
+         * Callback to invoke on value update.
+         * @param {Event} event - Custom update value event.
+         * @group Emits
+         */
         this.updateValueEvent = new EventEmitter();
     }
     get inputId() {
@@ -3448,7 +4321,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 /* eslint-disable no-use-before-define */
 const CPS_RADIO_GROUP = new InjectionToken('CpsRadioGroupComponent');
+/**
+ * CpsRadioGroupComponent is a radio buttons group.
+ * @group Components
+ */
 class CpsRadioGroupComponent {
+    /**
+     * Value of the radio group.
+     * @group Props
+     */
     set value(value) {
         this._value = value;
         this.onChange(value);
@@ -3458,15 +4339,56 @@ class CpsRadioGroupComponent {
     }
     constructor(_control) {
         this._control = _control;
+        /**
+         * An array of options.
+         * @group Props
+         */
         this.options = [];
+        /**
+         * Label of the radio group.
+         * @group Props
+         */
         this.groupLabel = '';
+        /**
+         * Whether the radio group should be vertical.
+         * @group Props
+         */
         this.vertical = false;
+        /**
+         * Whether the radio group is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * InfoTooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Size of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Callback to invoke on value change.
+         * @param {boolean} boolean - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this._value = undefined;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -3547,6 +4469,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CpsRadioComponent is a radio button with arbitrary content.
+ * @group Components
+ */
 class CpsRadioComponent {
     constructor(radioGroup) {
         this.groupDisabled = false;
@@ -3578,11 +4504,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsLoaderComponent is a fetch data indicator.
+ * @group Components
+ */
 class CpsLoaderComponent {
     constructor() {
+        /**
+         * Option for loader component to take up the whole screen.
+         * @group Props
+         */
         this.fullScreen = false;
+        /**
+         * Option to control the transparency of the loader component, of type number or string.
+         * @group Props
+         */
         this.opacity = 0.1;
+        /**
+         * Color of the label.
+         * @group Props
+         */
         this.labelColor = 'depth';
+        /**
+         * Whether to show 'Loading...' label.
+         * @group Props
+         */
         this.showLabel = true;
         this.backgroundColor = 'rgba(0, 0, 0, 0.1)';
     }
@@ -3606,9 +4552,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * TableRowMenuComponent is an internal component which applies the menu to each row.
+ * @group Components
+ */
 class TableRowMenuComponent {
     constructor() {
+        /**
+         * Callback to invoke when edit-row button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.editRowBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when remove-row button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.removeRowBtnClicked = new EventEmitter();
         this.items = [
             {
@@ -3712,12 +4672,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsTableColumnSortableDirective is a sorting directive used to sort single or multiple columns in table.
+ * @group Directives
+ */
 class CpsTableColumnSortableDirective extends SortableColumn {
     constructor(elementRef, viewContainerRef, dt) {
         super(dt);
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
         this.dt = dt;
+        /**
+         * Name of the column to be sorted.
+         * @group Props
+         */
         this.field = '';
         this.sortIconRef =
             this.viewContainerRef.createComponent(CpsSortIconComponent);
@@ -3833,81 +4801,385 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 function tableFactory(tableComponent) {
     return tableComponent.primengTable;
 }
+/**
+ * CpsTableComponent displays data in tabular format.
+ * @group Components
+ */
 class CpsTableComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(cdRef) {
         this.cdRef = cdRef;
+        /**
+         * An array of objects to display.
+         * @group Props
+         */
         this.data = [];
+        /**
+         * An array of objects to represent dynamic columns.
+         * @group Props
+         */
         this.columns = [];
+        /**
+         * A key used to retrieve the header from columns.
+         * @group Props
+         */
         this.colHeaderName = 'header';
+        /**
+         * A key used to retrieve the field from columns.
+         * @group Props
+         */
         this.colFieldName = 'field';
+        /**
+         * Whether the table should have alternating stripes.
+         * @group Props
+         */
         this.striped = true;
+        /**
+         * Whether the table should have borders.
+         * @group Props
+         */
         this.bordered = true;
+        /**
+         * Size of table cells, it can be "small", "normal" or "large".
+         * @group Props
+         */
         this.size = 'normal';
+        /**
+         * Whether the table should have row selection.
+         * @group Props
+         */
         this.selectable = false;
+        /**
+         * Whether the table should have rows highlighting on hover.
+         * @group Props
+         */
         this.rowHover = true;
-        this.dataKey = ''; // field, that uniquely identifies a record in data (needed for expandable rows)
+        /**
+         * Field, that uniquely identifies a record in data (needed for expandable rows).
+         * @group Props
+         */
+        this.dataKey = '';
+        /**
+         * Whether the table should show row menu.
+         * @group Props
+         */
         this.showRowMenu = false;
+        /**
+         * Whether the table should have re-orderable rows.
+         * @group Props
+         */
         this.reorderableRows = false;
+        /**
+         * When enabled, a loader component is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Inline style of the table.
+         * @group Props
+         */
         this.tableStyle = undefined;
+        /**
+         * Style class of the table.
+         * @group Props
+         */
         this.tableStyleClass = '';
-        this.sortable = false; // makes all sortable if columns are provided
+        /**
+         * Makes all columns sortable if columns prop is provided.
+         * @group Props
+         */
+        this.sortable = false;
+        /**
+         * Defines whether sorting works on single column or on multiple columns.
+         * @group Props
+         */
         this.sortMode = 'single';
+        /**
+         * Whether to use the default sorting or a custom one using sortFunction.
+         * @group Props
+         */
         this.customSort = false;
+        /**
+         * Whether the table has toolbar.
+         * @group Props
+         */
         this.hasToolbar = true;
+        /**
+         * Toolbar size, it can be "small" or "normal".
+         * @group Props
+         */
         this.toolbarSize = 'normal';
+        /**
+         * Toolbar title.
+         * @group Props
+         */
         this.toolbarTitle = '';
+        /**
+         * Toolbar icon name.
+         * @group Props
+         */
         this.toolbarIcon = '';
+        /**
+         * Toolbar icon color.
+         * @group Props
+         */
         this.toolbarIconColor = '';
+        /**
+         * Makes table scrollable.
+         * @group Props
+         */
         this.scrollable = true;
-        this.scrollHeight = ''; // 'flex' or value+'px'
-        this.virtualScroll = false; // works only if scrollable is true
-        this.numToleratedItems = 10;
+        /**
+         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * @group Props
+         */
+        this.scrollHeight = '';
+        /**
+         * Whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * @group Props
+         */
+        this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
+        this.numToleratedItems = 10;
+        /**
+         * Whether the table should have paginator.
+         * @group Props
+         */
         this.paginator = false;
+        /**
+         * Whether to show paginator even if there is only one page.
+         * @group Props
+         */
         this.alwaysShowPaginator = true;
+        /**
+         * Array of integer values to display inside rows per page dropdown of paginator.
+         * @group Props
+         */
         this.rowsPerPageOptions = [];
+        /**
+         * Index of the first row to be displayed.
+         * @group Props
+         */
         this.first = 0;
+        /**
+         * Number of rows to display per page.
+         * @group Props
+         */
         this.rows = 0;
+        /**
+         * Whether to reset page on rows change.
+         * @group Props
+         */
         this.resetPageOnRowsChange = false;
+        /**
+         * Whether to reset page on table data sorting.
+         * @group Props
+         */
         this.resetPageOnSort = true;
+        /**
+         * Number of total records.
+         * @group Props
+         */
         this.totalRecords = 0;
+        /**
+         * Text to display when there is no data.
+         * @group Props
+         */
         this.emptyMessage = 'No data';
+        /**
+         * Height of table's body when there is no data, of type number denoting pixels or string.
+         * @group Props
+         */
         this.emptyBodyHeight = '';
+        /**
+         * Defines if data is loaded and interacted with in lazy manner.
+         * @group Props
+         */
         this.lazy = false;
+        /**
+         * Whether to call lazy loading on initialization.
+         * @group Props
+         */
         this.lazyLoadOnInit = true;
+        /**
+         * Whether to show global filter in the toolbar.
+         * @group Props
+         */
         this.showGlobalFilter = false;
+        /**
+         * Global filter placeholder.
+         * @group Props
+         */
         this.globalFilterPlaceholder = 'Search';
+        /**
+         * An array of fields to use in global filtering.
+         * @group Props
+         */
         this.globalFilterFields = [];
+        /**
+         * Whether to clear global filter on data loading.
+         * @group Props
+         */
         this.clearGlobalFilterOnLoading = false;
+        /**
+         * Whether to show remove button in the toolbar when rows are selected.
+         * @group Props
+         */
         this.showRemoveBtnOnSelect = true;
+        /**
+         * Whether removeBtnOnSelect is disabled.
+         * @group Props
+         */
         this.removeBtnOnSelectDisabled = false;
+        /**
+         * Whether to show additional button in the toolbar when rows are selected.
+         * @group Props
+         */
         this.showAdditionalBtnOnSelect = false;
+        /**
+         * AdditionalBtnOnSelect title.
+         * @group Props
+         */
         this.additionalBtnOnSelectTitle = 'Select action';
+        /**
+         * Whether additionalBtnOnSelect is disabled.
+         * @group Props
+         */
         this.additionalBtnOnSelectDisabled = false;
+        /**
+         * Whether to show action button in the toolbar.
+         * @group Props
+         */
         this.showActionBtn = false;
+        /**
+         * Action button title.
+         * @group Props
+         */
         this.actionBtnTitle = 'Action';
+        /**
+         * Whether actionBtn is disabled.
+         * @group Props
+         */
         this.actionBtnDisabled = false;
+        /**
+         * Whether to show export button in the toolbar.
+         * @group Props
+         */
         this.showExportBtn = false;
+        /**
+         * Whether exportBtn is disabled.
+         * @group Props
+         */
         this.exportBtnDisabled = false;
+        /**
+         * Name of the exported file.
+         * @group Props
+         */
         this.exportFilename = 'download';
+        /**
+         * Character to use as the csv separator.
+         * @group Props
+         */
         this.csvSeparator = ',';
+        /**
+         * Whether to show data reload button in the toolbar.
+         * @group Props
+         */
         this.showDataReloadBtn = false;
+        /**
+         * Whether dataReloadBtn is disabled.
+         * @group Props
+         */
         this.dataReloadBtnDisabled = false;
-        this.showColumnsToggleBtn = false; // if external body template is provided, use columnsSelected event emitter
+        /**
+         * Whether the table should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
+         * @group Props
+         */
+        this.showColumnsToggleBtn = false;
+        /**
+         * Whether columnsToggle button is disabled.
+         * @group Props
+         */
         this.columnsToggleBtnDisabled = false;
-        this.initialColumns = []; // if not provided, all columns are initially visible
+        /**
+         * Array of initial columns to show in the table. If not provided, all columns are initially visible.
+         * @group Props
+         */
+        this.initialColumns = [];
+        /**
+         * Callback to invoke on selection changed.
+         * @param {any[]} value - selected data.
+         * @group Emits
+         */
         this.selectionChanged = new EventEmitter();
+        /**
+         * Callback to invoke when action button is clicked.
+         * @param {void} void - button clicked.
+         * @group Emits
+         */
         this.actionBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when edit-row button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.editRowBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke on rows removal.
+         * @param {any[]} any[] - array of rows removed.
+         * @group Emits
+         */
         this.rowsRemoved = new EventEmitter();
+        /**
+         * Callback to invoke on page changed.
+         * @param {any} any - page changed.
+         * @group Emits
+         */
         this.pageChanged = new EventEmitter();
+        /**
+         * Callback to invoke when data is sorted.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
         this.sorted = new EventEmitter();
+        /**
+         * Callback to invoke when data is filtered.
+         * @param {any} any - custom filtering event.
+         * @group Emits
+         */
         this.filtered = new EventEmitter();
+        /**
+         * Callback to invoke when rows are reordered.
+         * @param {any} any - rows reordered.
+         * @group Emits
+         */
         this.rowsReordered = new EventEmitter();
+        /**
+         * Callback to invoke on columns selection.
+         * @param {object} object - selected column.
+         * @group Emits
+         */
         this.columnsSelected = new EventEmitter();
+        /**
+         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+         * @param {any} any - custom lazy loading event.
+         * @group Emits
+         */
         this.lazyLoaded = new EventEmitter();
+        /**
+         * Callback to invoke when data-reload button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.dataReloadBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when additional button on select is clicked.
+         * @param {any[]} any[] - selected data.
+         * @group Emits
+         */
         this.additionalBtnOnSelectClicked = new EventEmitter();
         /**
          * A function to implement custom sorting. customSort must be true.
@@ -4419,7 +5691,15 @@ var CpsColumnFilterMatchMode;
     CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
 })(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
 
+/**
+ * CpsDatepickerComponent is an input component to provide date input.
+ * @group Components
+ */
 class CpsDatepickerComponent {
+    /**
+     * Value of the datepicker.
+     * @group Props
+     */
     set value(value) {
         this._value = value;
         this.stringDate = this._dateToString(value);
@@ -4430,22 +5710,91 @@ class CpsDatepickerComponent {
     }
     constructor(_control) {
         this._control = _control;
+        /**
+         * Label of the datepicker element.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Whether datepicker is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Width of the datepicker of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * Placeholder text.
+         * @group Props
+         */
         this.placeholder = 'MM/DD/YYYY';
+        /**
+         * Bottom hint text for the input field.
+         * @group Props
+         */
         this.hint = '';
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Hides hint and validation errors.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the component should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Whether to show button to be able to select today's date.
+         * @group Props
+         */
         this.showTodayButton = true;
+        /**
+         * Whether the datepicker dropdown should open on input focus.
+         * @group Props
+         */
         this.openOnInputFocus = false;
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * InfoTooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Size of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
+         * @group Props
+         */
         this.appearance = 'outlined';
+        /**
+         * Callback to invoke on value change.
+         * @param {Date | null} value - value change.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this.stringDate = '';
         this.isOpened = false;
@@ -4712,6 +6061,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['calendarMenu']
             }] } });
 
+/**
+ * CpsButtonToggleComponent is used to select values using buttons.
+ * @group Components
+ */
 class CpsButtonToggleComponent {
     set value(value) {
         this._value = value;
@@ -4723,19 +6076,76 @@ class CpsButtonToggleComponent {
     constructor(_control, renderer) {
         this._control = _control;
         this.renderer = renderer;
+        /**
+         * Label of the toggle buttons.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * An array of options.
+         * @group Props
+         */
         this.options = [];
+        /**
+         * Specifies if multiple values can be selected.
+         * @group Props
+         */
         this.multiple = false;
+        /**
+         * Specifies that the component should be disabled.
+         * @group Props
+         */
         this.disabled = false;
-        this.mandatory = true; // at least one of the options is mandatory
+        /**
+         * Whether at least one of the options is mandatory.
+         * @group Props
+         */
+        this.mandatory = true;
+        /**
+         * Whether all buttons should have equal widths.
+         * @group Props
+         */
         this.equalWidths = true;
+        /**
+         * Position of the option tooltip, can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.optionTooltipPosition = 'bottom';
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Size of infoTooltip, of type number or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Value of the component.
+         * @group Props
+         */
         this._value = undefined;
+        /**
+         * Callback to invoke on value change.
+         * @param {any} any - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this.largestButtonWidth = 0;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4877,6 +6287,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * TableColumnFilterConstraintComponent is an internal filtering constraint component in table and treetable.
+ * @group Components
+ */
 class TableColumnFilterConstraintComponent {
     get isCategoryDropdownOpened() {
         return this.categoryAutocompleteComponent?.isOpened || false;
@@ -4884,12 +6298,36 @@ class TableColumnFilterConstraintComponent {
     constructor(dt, tt) {
         this.dt = dt;
         this.tt = tt;
+        /**
+         * Type of filter constraint.
+         * @group Props
+         */
         this.type = 'text';
+        /**
+         * An array of category options.
+         * @group Props
+         */
         this.categoryOptions = [];
-        this.asButtonToggle = false; // for category type only
-        this.singleSelection = false; // for category type only
-        this.placeholder = '';
-        this.hasApplyButton = true;
+        /**
+         * Whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.asButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.singleSelection = false;
+        /**
+         * Placeholder for input field.
+         * @group Props
+         */
+        this.placeholder = '';
+        /**
+         * Whether the filter should have an apply button.
+         * @group Props
+         */
+        this.hasApplyButton = true;
         this.booleanOptions = [
             { label: 'True', value: 'true' },
             { label: 'False', value: 'false' }
@@ -4985,6 +6423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['categoryAutocompleteComponent']
             }] } });
 
+/**
+ * TableColumnFilterComponent is an internal filter component in table and treetable.
+ * @group Components
+ */
 class TableColumnFilterComponent {
     get isCategoryDropdownOpened() {
         if (this.type !== 'category')
@@ -4995,20 +6437,80 @@ class TableColumnFilterComponent {
         this.elementRef = elementRef;
         this.dt = dt;
         this.tt = tt;
+        /**
+         * Type of filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * @group Props
+         */
         this.type = 'text';
+        /**
+         * Whether the filter menu should be persistent.
+         * @group Props
+         */
         this.persistent = false;
+        /**
+         * Whether the filter should have clear button.
+         * @group Props
+         */
         this.showClearButton = true;
+        /**
+         * Whether the filter should have apply button.
+         * @group Props
+         */
         this.showApplyButton = true;
+        /**
+         * Whether the filter should have close button.
+         * @group Props
+         */
         this.showCloseButton = false;
+        /**
+         * Whether the filter should have match modes.
+         * @group Props
+         */
         this.showMatchModes = true;
+        /**
+         * Match modes for filter.
+         * @group Props
+         */
         this.matchModes = [];
+        /**
+         * Whether the filter should have operator.
+         * @group Props
+         */
         this.showOperator = true;
+        /**
+         * Maximum number of constraints.
+         * @group Props
+         */
         this.maxConstraints = 2;
+        /**
+         * Title of the filter.
+         * @group Props
+         */
         this.headerTitle = '';
+        /**
+         * Whether the filter should hide on clear.
+         * @group Props
+         */
         this.hideOnClear = false;
+        /**
+         * Options for category filter.
+         * @group Props
+         */
         this.categoryOptions = [];
-        this.asButtonToggle = false; // for category type only
-        this.singleSelection = false; // for category type only
+        /**
+         * Whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.asButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.singleSelection = false;
+        /**
+         * Placeholder for filter constraints.
+         * @group Props
+         */
         this.placeholder = '';
         this.operator = FilterOperator.AND;
         this.operatorOptions = [
@@ -5313,24 +6815,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['mouseleave']
             }] } });
 
+/**
+ * CpsTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in table.
+ * @group Directives
+ */
 class CpsTableColumnFilterDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
+        /**
+         * Type of a filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * @group Props
+         */
         this.filterType = 'text';
+        /**
+         * Whether the filter menu should be persistent.
+         * @group Props
+         */
         this.filterPersistent = false;
+        /**
+         * Whether the filter should have clear button.
+         * @group Props
+         */
         this.filterShowClearButton = true;
+        /**
+         * Whether the filter should have apply button.
+         * @group Props
+         */
         this.filterShowApplyButton = true;
+        /**
+         * Whether the filter should have close button.
+         * @group Props
+         */
         this.filterShowCloseButton = false;
+        /**
+         * Whether the filter should have match modes.
+         * @group Props
+         */
         this.filterShowMatchModes = true;
+        /**
+         * Match modes for filter.
+         * @group Props
+         */
         this.filterMatchModes = [];
+        /**
+         * Whether the filter should have operator.
+         * @group Props
+         */
         this.filterShowOperator = true;
+        /**
+         * Maximum number of constraints.
+         * @group Props
+         */
         this.filterMaxConstraints = 2;
+        /**
+         * Title of the filter.
+         * @group Props
+         */
         this.filterHeaderTitle = '';
+        /**
+         * Whether the filter should hide on clear.
+         * @group Props
+         */
         this.filterHideOnClear = false;
+        /**
+         * Options for category filter.
+         * @group Props
+         */
         this.filterCategoryOptions = [];
-        this.filterAsButtonToggle = false; // for category filterType only
-        this.filterSingleSelection = false; // for category filterType only
+        /**
+         * Whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.filterAsButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.filterSingleSelection = false;
+        /**
+         * Placeholder for filter constraints.
+         * @group Props
+         */
         this.filterPlaceholder = '';
         this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
     }
@@ -5427,6 +6993,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsTableHeaderSelectableDirective is a directive used to apply a checkbox to a header cell.
+ * @group Directives
+ */
 class CpsTableHeaderSelectableDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -5452,6 +7022,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
 
+/**
+ * CpsTableRowSelectableDirective is a directive used to apply a checkbox to a body cell.
+ * @group Directives
+ */
 class CpsTableRowSelectableDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -5480,12 +7054,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['cpsTRowSelectable']
             }] } });
 
+/**
+ * CpsTreeTableColumnSortableDirective is a sorting directive used to sort single or multiple columns in treetable.
+ * @group Directives
+ */
 class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
     constructor(elementRef, viewContainerRef, tt) {
         super(tt);
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
         this.tt = tt;
+        /**
+         * Name of the column to be sorted.
+         * @group Props
+         */
         this.field = '';
         this.sortIconRef =
             this.viewContainerRef.createComponent(CpsSortIconComponent);
@@ -5667,6 +7249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     type: Optional
                 }] }]; } });
 
+/**
+ * CpsTreeTableHeaderSelectableDirective is a directive used to apply a checkbox to a header cell.
+ * @group Directives
+ */
 class CpsTreeTableHeaderSelectableDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -5693,6 +7279,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
 
+/**
+ * CpsTreeTableRowSelectableDirective is a directive used to apply a checkbox to a body cell.
+ * @group Directives
+ */
 class CpsTreeTableRowSelectableDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -5722,6 +7312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['cpsTTRowSelectable']
             }] } });
 
+/**
+ * CpsTreetableRowTogglerDirective is a directive used to apply a chevron toggler icon to a body cell.
+ * @group Directives
+ */
 class CpsTreetableRowTogglerDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -5761,88 +7355,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 function treeTableFactory(tableComponent) {
     return tableComponent.primengTreeTable;
 }
+/**
+ * CpsTreeTableComponent is used to display hierarchical data in tabular format.
+ * @group Components
+ */
 class CpsTreeTableComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(cdRef, renderer, ngZone) {
         this.cdRef = cdRef;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        /**
+         * An array of objects to display.
+         * @group Props
+         */
         this.data = [];
+        /**
+         * An array of objects to represent dynamic columns.
+         * @group Props
+         */
         this.columns = [];
+        /**
+         * A key used to retrieve the header from columns.
+         * @group Props
+         */
         this.colHeaderName = 'header';
+        /**
+         * A key used to retrieve the field from columns.
+         * @group Props
+         */
         this.colFieldName = 'field';
+        /**
+         * Treetable min width of type number denoting pixels or string.
+         * @group Props
+         */
         this.minWidth = '';
+        /**
+         * Whether minWidth prop is used for treetable body only, excluding toolbar and paginator.
+         * @group Props
+         */
         this.minWidthForBodyOnly = true;
         /**
          * Whether the cell widths scale according to their content or not.
          * @group Props
          */
         this.autoLayout = true;
+        /**
+         * Whether the treetable should have alternating stripes.
+         * @group Props
+         */
         this.striped = true;
+        /**
+         * Whether the treetable should have borders.
+         * @group Props
+         */
         this.bordered = true;
+        /**
+         * Size of treetable cells, it can be "small", "normal" or "large".
+         * @group Props
+         */
         this.size = 'normal';
+        /**
+         * Whether the treetable should have row selection.
+         * @group Props
+         */
         this.selectable = false;
+        /**
+         * Whether the treetable should have rows highlighting on hover.
+         * @group Props
+         */
         this.rowHover = true;
+        /**
+         * Whether the treetable should show row menu.
+         * @group Props
+         */
         this.showRowMenu = false;
+        /**
+         * When enabled, a loader component is displayed.
+         * @group Props
+         */
         this.loading = false;
+        /**
+         * Inline style of the treetable.
+         * @group Props
+         */
         this.tableStyle = undefined;
+        /**
+         * Style class of the treetable.
+         * @group Props
+         */
         this.tableStyleClass = '';
-        this.sortable = false; // makes all sortable if columns are provided
+        /**
+         * Makes all columns sortable if columns prop is provided.
+         * @group Props
+         */
+        this.sortable = false;
+        /**
+         * Defines whether sorting works on single column or on multiple columns.
+         * @group Props
+         */
         this.sortMode = 'single';
+        /**
+         * Whether to use the default sorting or a custom one using sortFunction.
+         * @group Props
+         */
         this.customSort = false;
+        /**
+         * Whether the treetable has toolbar.
+         * @group Props
+         */
         this.hasToolbar = true;
+        /**
+         * Toolbar size, it can be "small" or "normal".
+         * @group Props
+         */
         this.toolbarSize = 'normal';
+        /**
+         * Toolbar title.
+         * @group Props
+         */
         this.toolbarTitle = '';
+        /**
+         * Toolbar icon name.
+         * @group Props
+         */
         this.toolbarIcon = '';
+        /**
+         * Toolbar icon color.
+         * @group Props
+         */
         this.toolbarIconColor = '';
+        /**
+         * Makes treetable scrollable.
+         * @group Props
+         */
         this.scrollable = true;
-        this.scrollHeight = ''; // 'flex' or value+'px'
-        this.virtualScroll = false; // works only if scrollable is true
+        /**
+         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * @group Props
+         */
+        this.scrollHeight = '';
+        /**
+         * Whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * @group Props
+         */
+        this.virtualScroll = false;
+        /**
+         * Height of a virtual scroll item in fixed pixels.
+         * @group Props
+         */
         this.virtualScrollItemHeight = 0;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
         this.numToleratedItems = 10;
+        /**
+         * Whether the treetable should have paginator.
+         * @group Props
+         */
         this.paginator = false;
+        /**
+         * Whether to show paginator even there is only one page.
+         * @group Props
+         */
         this.alwaysShowPaginator = true;
+        /**
+         * Array of integer values to display inside rows per page dropdown of paginator.
+         * @group Props
+         */
         this.rowsPerPageOptions = [];
+        /**
+         * Index of the first row to be displayed.
+         * @group Props
+         */
         this.first = 0;
+        /**
+         * Number of rows to display per page.
+         * @group Props
+         */
         this.rows = 0;
+        /**
+         * Whether to reset page on rows change.
+         * @group Props
+         */
         this.resetPageOnRowsChange = false;
+        /**
+         * Whether to reset page on treetable data sorting.
+         * @group Props
+         */
         this.resetPageOnSort = true;
+        /**
+         * Number of total records.
+         * @group Props
+         */
         this.totalRecords = 0;
+        /**
+         * Text to display when there is no data.
+         * @group Props
+         */
         this.emptyMessage = 'No data';
+        /**
+         * Height of treetable's body when there is no data, of type number denoting pixels or string.
+         * @group Props
+         */
         this.emptyBodyHeight = '';
+        /**
+         * Defines if data is loaded and interacted with in lazy manner.
+         * @group Props
+         */
         this.lazy = false;
+        /**
+         * Whether to call lazy loading on initialization.
+         * @group Props
+         */
         this.lazyLoadOnInit = true;
+        /**
+         * Whether to show global filter in the toolbar.
+         * @group Props
+         */
         this.showGlobalFilter = false;
+        /**
+         * Global filter placeholder.
+         * @group Props
+         */
         this.globalFilterPlaceholder = 'Search';
+        /**
+         * An array of fields to use in global filtering.
+         * @group Props
+         */
         this.globalFilterFields = [];
-        this.clearGlobalFilterOnLoading = false;
+        /**
+         * Whether to clear global filter on data loading.
+         * @group Props
+         */
+        this.clearGlobalFilterOnLoading = false;
+        /**
+         * Whether to show remove button in the toolbar when rows are selected.
+         * @group Props
+         */
         this.showRemoveBtnOnSelect = true;
+        /**
+         * Whether removeBtnOnSelect is disabled.
+         * @group Props
+         */
         this.removeBtnOnSelectDisabled = false;
+        /**
+         * Whether to show additional button in the toolbar when rows are selected.
+         * @group Props
+         */
         this.showAdditionalBtnOnSelect = false;
+        /**
+         * AdditionalBtnOnSelect title.
+         * @group Props
+         */
         this.additionalBtnOnSelectTitle = 'Select action';
+        /**
+         * Whether additionalBtnOnSelect is disabled.
+         * @group Props
+         */
         this.additionalBtnOnSelectDisabled = false;
+        /**
+         * Whether to show action button in the toolbar.
+         * @group Props
+         */
         this.showActionBtn = false;
+        /**
+         * Action button title.
+         * @group Props
+         */
         this.actionBtnTitle = 'Action';
+        /**
+         * Whether actionBtn is disabled.
+         * @group Props
+         */
         this.actionBtnDisabled = false;
+        /**
+         * Whether to show data reload button in the toolbar.
+         * @group Props
+         */
         this.showDataReloadBtn = false;
+        /**
+         * Whether dataReloadBtn is disabled.
+         * @group Props
+         */
         this.dataReloadBtnDisabled = false;
-        this.showColumnsToggleBtn = false; // if external body template is provided, use columnsSelected event emitter
+        /**
+         * Whether the treetable should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
+         * @group Props
+         */
+        this.showColumnsToggleBtn = false;
+        /**
+         * Whether columnsToggle button is disabled.
+         * @group Props
+         */
         this.columnsToggleBtnDisabled = false;
-        this.initialColumns = []; // if not provided, all columns are initially visible
+        /**
+         * Array of initial columns to show in the treetable. If not provided, all columns are initially visible.
+         * @group Props
+         */
+        this.initialColumns = [];
+        /**
+         * Callback to invoke on selected node change.
+         * @param {any[]} array - selection changed.
+         * @group Emits
+         */
         this.selectionChanged = new EventEmitter();
+        /**
+         * Callback to invoke when action button is clicked.
+         * @param {void} void - action button clicked.
+         * @group Emits
+         */
         this.actionBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when additional button on select is clicked.
+         * @param {any[]} any[] - selected data.
+         * @group Emits
+         */
         this.additionalBtnOnSelectClicked = new EventEmitter();
+        /**
+         * Callback to invoke when edit-row button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
         this.editRowBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when rows are removed.
+         * @param {any} any - rows removed.
+         * @group Emits
+         */
         this.rowsRemoved = new EventEmitter();
+        /**
+         * Callback to invoke when page is changed.
+         * @param {any} any - page changed.
+         * @group Emits
+         */
         this.pageChanged = new EventEmitter();
+        /**
+         * Callback to invoke when data is sorted.
+         * @param {any} any - Sort data.
+         * @group Emits
+         */
         this.sorted = new EventEmitter();
+        /**
+         * Callback to invoke when data is filtered.
+         * @param {any} any - Custom filter event.
+         * @group Emits
+         */
         this.filtered = new EventEmitter();
+        /**
+         * Callback to invoke on selected columns.
+         * @param {any[]} object[] - selection changed.
+         * @group Emits
+         */
         this.columnsSelected = new EventEmitter();
+        /**
+         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+         * @param {any} any - Custom lazy load event.
+         * @group Emits
+         */
         this.lazyLoaded = new EventEmitter();
+        /**
+         * Callback to invoke when data reload button is clicked.
+         * @param {any} any - data reload button clicked.
+         * @group Emits
+         */
         this.dataReloadBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when a node is expanded.
+         * @param {any} any - Node instance.
+         * @group Emits
+         */
         this.nodeExpanded = new EventEmitter();
+        /**
+         * Callback to invoke when a node is collapsed.
+         * @param {any} any - Node collapse event.
+         * @group Emits
+         */
         this.nodeCollapsed = new EventEmitter();
+        /**
+         * Callback to invoke when a node is selected.
+         * @param {any} any - Node instance.
+         * @group Emits
+         */
         this.nodeSelected = new EventEmitter();
+        /**
+         * Callback to invoke when a node is unselected.
+         * @param {any} any - Custom node unselect event.
+         * @group Emits
+         */
         this.nodeUnselected = new EventEmitter();
         /**
          * A function to implement custom sorting. customSort must be true.
@@ -6644,23 +8545,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['colToggleMenu']
             }] } });
 
+/**
+ * CpsTreeTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in treetable.
+ * @group Directives
+ */
 class CpsTreeTableColumnFilterDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
+        /**
+         * Type of filter in treetable, it can be of type "number", "boolean", "text", "date" or "category".
+         * @group Props
+         */
         this.filterType = 'text';
+        /**
+         * Whether the filter menu should be persistent.
+         * @group Props
+         */
         this.filterPersistent = false;
+        /**
+         * Whether the filter should have clear button.
+         * @group Props
+         */
         this.filterShowClearButton = true;
+        /**
+         * Whether the filter should have apply button.
+         * @group Props
+         */
         this.filterShowApplyButton = true;
+        /**
+         * Whether the filter should have close button.
+         * @group Props
+         */
         this.filterShowCloseButton = false;
+        /**
+         * Whether the filter should have match modes.
+         * @group Props
+         */
         this.filterShowMatchModes = true;
+        /**
+         * Match modes for filter.
+         * @group Props
+         */
         this.filterMatchModes = [];
+        /**
+         * Whether the filter should have operator.
+         * @group Props
+         */
         this.filterShowOperator = true;
+        /**
+         * Title of the filter.
+         * @group Props
+         */
         this.filterHeaderTitle = '';
+        /**
+         * Whether the filter should hide on clear.
+         * @group Props
+         */
         this.filterHideOnClear = false;
+        /**
+         * Options for category filter.
+         * @group Props
+         */
         this.filterCategoryOptions = [];
-        this.filterAsButtonToggle = false; // for category filterType only
-        this.filterSingleSelection = false; // for category filterType only
+        /**
+         * Whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.filterAsButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.filterSingleSelection = false;
+        /**
+         * Placeholder for filter constraints.
+         * @group Props
+         */
         this.filterPlaceholder = '';
         this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
     }
@@ -6755,7 +8716,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * CpsTagComponent is used to categorize content.
+ * @group Components
+ */
 class CpsTagComponent {
+    /**
+     * Tag value.
+     * @group Props
+     */
     set value(value) {
         this._value = value;
         this.onChange(value);
@@ -6765,11 +8734,36 @@ class CpsTagComponent {
     }
     constructor(_control) {
         this._control = _control;
-        this.type = 'custom'; // higher precedence over color
+        /**
+         * Type of the tag. It can be security, classification or custom, has higher precedence over color.
+         * @group Props
+         */
+        this.type = 'custom';
+        /**
+         * Label of the tag.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Color of the tag.
+         * @group Props
+         */
         this.color = '';
+        /**
+         * Whether the tag should be disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Whether the tag should be selectable.
+         * @group Props
+         */
         this.selectable = false;
+        /**
+         * Callback to invoke on value change.
+         * @param {boolean} boolean - value change.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
         this.classesList = [];
         this.tagColor = '';
@@ -6852,15 +8846,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CpsPaginatorComponent is a generic component to display content in paged format.
+ * @group Components
+ */
 class CpsPaginatorComponent {
     constructor() {
+        /**
+         * Zero-relative number of the first row to be displayed.
+         * @group Props
+         */
         this.first = 0;
+        /**
+         * Rows count to display per page.
+         * @group Props
+         */
         this.rows = 0;
+        /**
+         * Number of total records.
+         * @group Props
+         */
         this.totalRecords = 0;
+        /**
+         * Array of integer values to display inside rows per page dropdown.
+         * @group Props
+         */
         this.rowsPerPageOptions = [];
+        /**
+         * Whether to show it even there is only one page.
+         * @group Props
+         */
         this.alwaysShow = true;
+        /**
+         * Color of paginator background.
+         * @group Props
+         */
         this.backgroundColor = 'transparent';
+        /**
+         * Whether to reset page index when the number of rows per page changes.
+         * @group Props
+         */
         this.resetPageOnRowsChange = false;
+        /**
+         * Callback to invoke when page changes, the event object contains information about the new state.
+         * @param {any} any - page changed.
+         * @group Emits
+         */
         this.pageChanged = new EventEmitter();
         this.rowOptions = [];
     }
@@ -6920,6 +8951,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['paginator']
             }] } });
 
+/**
+ * The CpsPaginatePipe is a pipe designed to provide a set of items in batches, taking into account specified pagination parameters.
+ * @group Pipes
+ */
 class CpsPaginatePipe {
     transform(items, config) {
         if (!items) {
@@ -6944,18 +8979,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * CpsExpansionPanelComponent is a component that provides content on expansion.
+ * @group Components
+ */
 class CpsExpansionPanelComponent {
     constructor() {
+        /**
+         * Title of the expansionPanel element.
+         * @group Props
+         */
         this.headerTitle = '';
+        /**
+         * Background color of the expansion panel element.
+         * @group Props
+         */
         this.backgroundColor = 'transparent';
+        /**
+         * Whether to show the chevron icon.
+         * @group Props
+         */
         this.showChevron = true;
+        /**
+         * Indicates current expansion state.
+         * @group Props
+         */
         this.isExpanded = false;
+        /**
+         * Whether expansion panel is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * If true, expansion panel element will have borders.
+         * @group Props
+         */
         this.bordered = true;
+        /**
+         * The border radius of the component.
+         * @group Props
+         */
         this.borderRadius = '4px';
+        /**
+         * The width of the expansion panel of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * Name of the icon in front of the title.
+         * @group Props
+         */
         this.prefixIcon = '';
+        /**
+         * Callback to invoke after a tab gets collapsed.
+         * @param {void}
+         * @group Emits
+         */
         this.afterCollapse = new EventEmitter();
+        /**
+         * Callback to invoke after a tab gets expanded.
+         * @param {void}
+         * @group Emits
+         */
         this.afterExpand = new EventEmitter();
     }
     ngOnInit() {
@@ -7056,13 +9141,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CpsSidebarMenuComponent is a vertical menu panel component displayed at the edge of the screen.
+ * @group Components
+ */
 class CpsSidebarMenuComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(_router) {
         this._router = _router;
+        /**
+         * An array of menu items.
+         * @group Props
+         */
         this.items = [];
+        /**
+         * Indicates current expansion state of the sidebar.
+         * @group Props
+         */
         this.isExpanded = true;
+        /**
+         * Whether the menu items should allow activating only exact links.
+         * @group Props
+         */
         this.exactRoutes = false;
+        /**
+         * Height of the sidebar, of type number denoting pixels or string.
+         * @group Props
+         */
         this.height = '100%';
     }
     ngOnInit() {
@@ -7136,7 +9241,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['popupMenu']
             }] } });
 
+/**
+ * CpsTextareaComponent is a textarea component.
+ * @group Components
+ */
 class CpsTextareaComponent {
+    /**
+     * Value of the textarea.
+     * @group Props
+     */
     set value(value) {
         if (!value)
             value = '';
@@ -7149,27 +9262,119 @@ class CpsTextareaComponent {
     constructor(_control, _elementRef) {
         this._control = _control;
         this._elementRef = _elementRef;
+        /**
+         * Label of the textarea.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Placeholder text for the textarea.
+         * @group Props
+         */
         this.placeholder = 'Please enter';
+        /**
+         * Number of rows in the textarea.
+         * @group Props
+         */
         this.rows = 5;
+        /**
+         * The cols attribute specifies the visible width of a textarea.
+         * @group Props
+         */
         this.cols = 20;
+        /**
+         * Whether the textarea can auto focus.
+         * @group Props
+         */
         this.autofocus = false;
+        /**
+         * Bottom hint text for the textarea.
+         * @group Props
+         */
         this.hint = '';
+        /**
+         * Whether the textarea is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Width of the textarea, it can be of type number denoting pixels or string.
+         * @group Props
+         */
         this.width = '100%';
+        /**
+         * When enabled, a clear icon is displayed to clear the value.
+         * @group Props
+         */
         this.clearable = false;
+        /**
+         * Hides hint and validation errors.
+         * @group Props
+         */
         this.hideDetails = false;
+        /**
+         * Whether the textarea should have persistent clear icon.
+         * @group Props
+         */
         this.persistentClear = false;
+        /**
+         * Error message.
+         * @group Props
+         */
         this.error = '';
+        /**
+         * Whether the component can be resized vertically or not.
+         * @group Props
+         */
         this.resizable = 'vertical';
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
         this.infoTooltip = '';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
         this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Max width of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.infoTooltipMaxWidth = '100%';
+        /**
+         * Whether the infoTooltip is persistent.
+         * @group Props
+         */
         this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
         this.infoTooltipPosition = 'top';
+        /**
+         * Callback to invoke on value change.
+         * @param {string} string - value changed.
+         * @group Emits
+         */
         this.valueChanged = new EventEmitter();
+        /**
+         * Callback to invoke when the component receives focus.
+         * @param {any}
+         * @group Emits
+         */
         this.focused = new EventEmitter();
+        /**
+         * Callback to invoke when the prefixIcon is clicked.
+         * @param {any}
+         * @group Emits
+         */
         this.prefixIconClicked = new EventEmitter();
+        /**
+         * Callback to invoke when the component loses focus.
+         * @param {any}
+         * @group Emits
+         */
         this.blurred = new EventEmitter();
         this._statusChangesSubscription = new Subscription();
         this._value = '';
@@ -7318,16 +9523,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+/**
+ * CpsTabComponent is a tab within a tab-group.
+ * @group Components
+ */
 class CpsTabComponent {
     constructor() {
+        /**
+         * Label of the tab.
+         * @group Props
+         */
         this.label = '';
+        /**
+         * Icon before the label.
+         * @group Props
+         */
         this.icon = '';
+        /**
+         * Whether tab is disabled.
+         * @group Props
+         */
         this.disabled = false;
+        /**
+         * Whether to show the tooltip on tab hover.
+         * @group Props
+         */
         this.tooltipText = '';
+        /**
+         * Class for styling the tab tooltip.
+         * @group Props
+         */
         this.tooltipContentClass = 'cps-tooltip-content';
+        /**
+         * Max width of the tooltip, of type number denoting pixels or string.
+         * @group Props
+         */
         this.tooltipMaxWidth = '100%';
+        /**
+         * Whether the tooltip should have persistent info.
+         * @group Props
+         */
         this.tooltipPersistent = false;
+        /**
+         * Badge value to show on the tab after the label in a form of a circle.
+         * @group Props
+         */
         this.badgeValue = '';
+        /**
+         * Tooltip text to show on badge hover.
+         * @group Props
+         */
         this.badgeTooltip = '';
         this.active = false;
     }
@@ -7360,15 +9605,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: [TemplateRef]
             }] } });
 
+/**
+ * CpsTabGroupComponent is a navigation component that displays items as tab headers.
+ * @group Components
+ */
 class CpsTabGroupComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(cdRef) {
         this.cdRef = cdRef;
+        /**
+         * Index of the selected tab.
+         * @group Props
+         */
         this.selectedIndex = 0;
-        this.isSubTabs = false; // applies an alternative styling to tabs
+        /**
+         * Whether to apply an alternative 'subtabs' styling.
+         * @group Props
+         */
+        this.isSubTabs = false;
+        /**
+         * Transition options of how content appears, it can be "slide" or "fade".
+         * @group Props
+         */
         this.animationType = 'slide';
+        /**
+         * Background styling of tabs.
+         * @group Props
+         */
         this.tabsBackground = 'inherit';
+        /**
+         * Callback to invoke before tab change.
+         * @param {TabChangeEvent} any - tab changed.
+         * @group Emits
+         */
         this.beforeTabChanged = new EventEmitter();
+        /**
+         * Callback to invoke after tab change.
+         * @param {TabChangeEvent} any - tab changed.
+         * @group Emits
+         */
         this.afterTabChanged = new EventEmitter();
         this.backBtnVisible = false;
         this.forwardBtnVisible = false;
@@ -8174,7 +10449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 /**
  * Service for showing CpsDialog.
- * @group Service
+ * @group Services
  */
 class CpsDialogService {
     // eslint-disable-next-line no-useless-constructor