cps-ui-kit 0.140.0 → 0.141.0

package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts

@@ -7,42 +7,175 @@ import { CpsTooltipPosition } from '../../directives/cps-tooltip.directive';
 import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
 import * as i0 from "@angular/core";
 export type CpsAutocompleteAppearanceType = 'outlined' | 'underlined' | 'borderless';
+/**
+ * CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
+ * @group Components
+ */
 export declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
     private _control;
     private _labelByValue;
+    /**
+     * Label of the input element.
+     * @group Props
+     */
     label: string;
+    /**
+     * Placeholder text.
+     * @group Props
+     */
     placeholder: string;
+    /**
+     * Bottom hint text.
+     * @group Props
+     */
     hint: string;
+    /**
+     * Returns the object directly rather than the value specified with optionValue.
+     * @group Props
+     */
     returnObject: boolean;
+    /**
+     * Specifies if multiple values can be selected.
+     * @group Props
+     */
     multiple: boolean;
+    /**
+     * Whether autocomplete is disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * Width of the input field, a number denoting pixels or a string.
+     * @group Props
+     */
     width: number | string;
+    /**
+     * Option for selecting all elements. Doesn't work with virtual scroll.
+     * @group Props
+     */
     selectAll: boolean;
+    /**
+     * When selecting elements, they will appear in a form of a chip.
+     * @group Props
+     */
     chips: boolean;
+    /**
+     * Whether the chips can be directly removed.
+     * @group Props
+     */
     closableChips: boolean;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @group Props
+     */
     clearable: boolean;
+    /**
+     * Whether the dropdown list should open on clear.
+     * @group Props
+     */
     openOnClear: boolean;
+    /**
+     * An array of options.
+     * @group Props
+     */
     options: any[];
+    /**
+     * Name of the label field of an option.
+     * @group Props
+     */
     optionLabel: string;
+    /**
+     * Name of the value field of an option. Needed only if returnObject prop is false.
+     * @group Props
+     */
     optionValue: string;
+    /**
+     * Name of the info field of an option, shows the additional information text.
+     * @group Props
+     */
     optionInfo: string;
+    /**
+     * Hides hint and validation errors.
+     * @group Props
+     */
     hideDetails: boolean;
+    /**
+     * Whether the component should have persistent clear icon.
+     * @group Props
+     */
     persistentClear: boolean;
+    /**
+     * Icon before input value.
+     * @group Props
+     */
     prefixIcon: IconType;
+    /**
+     * Size of icon before input value, of type number or string or 'fill' or 'xsmall' or 'small' or 'normal' or 'large'.
+     * @group Props
+     */
     prefixIconSize: iconSizeType;
+    /**
+     * When enabled, a loading bar is displayed.
+     * @group Props
+     */
     loading: boolean;
+    /**
+     * Text to display when there is no data. Defaults to 'No results found'.
+     * @group Props
+     */
     emptyMessage: string;
+    /**
+     * Whether only the elements within scrollable area should be added into the DOM.
+     * @group Props
+     */
     virtualScroll: boolean;
+    /**
+     * Determines how many additional elements to add to the DOM outside of the view.
+     * @group Props
+     */
     numToleratedItems: number;
+    /**
+     * When it is not an empty string, an info icon is displayed to show text for more info.
+     * @group Props
+     */
     infoTooltip: string;
+    /**
+     * Info tooltip class for styling.
+     * @group Props
+     */
     infoTooltipClass: string;
+    /**
+     * Max width of infoTooltip of type number denoting pixels or string.
+     * @group Props
+     */
     infoTooltipMaxWidth: number | string;
+    /**
+     * Whether the infoTooltip is persistent.
+     * @group Props
+     */
     infoTooltipPersistent: boolean;
+    /**
+     * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+     * @group Props
+     */
     infoTooltipPosition: CpsTooltipPosition;
+    /**
+     * Styling appearance of autocomplete input, it could be 'outlined', 'underlined' or 'borderless'.
+     * @group Props
+     */
     appearance: CpsAutocompleteAppearanceType;
+    /**
+     * Value of the autocomplete.
+     * @group Props
+     */
     _value: any;
     get value(): any;
     set value(value: any);
+    /**
+     * Callback to invoke on value change.
+     * @param {any} any - value changed.
+     * @group Emits
+     */
     valueChanged: EventEmitter<any>;
     autocompleteBox: ElementRef;
     autocompleteContainer: ElementRef;

package/lib/components/cps-button/cps-button.component.d.ts

@@ -1,18 +1,71 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { IconType } from '../cps-icon/cps-icon.component';
 import * as i0 from "@angular/core";
+/**
+ * CpsButtonComponent is a button element.
+ * @group Components
+ */
 export declare class CpsButtonComponent implements OnInit {
+    /**
+     * Color of the button.
+     * @group Props
+     */
     color: string;
+    /**
+     * Color of content on the button. Works only with 'solid' type.
+     * @group Props
+     */
     contentColor: string;
+    /**
+     * Type of the button in terms of appearance, it can be 'solid' or 'outlined' or 'borderless'.
+     * @group Props
+     */
     type: 'solid' | 'outlined' | 'borderless';
+    /**
+     * Label or text on the button.
+     * @group Props
+     */
     label: string;
+    /**
+     * Name of the icon on the button.
+     * @group Props
+     */
     icon: IconType;
+    /**
+     * Position of the icon on the button, it can be 'before' or 'after'.
+     * @group Props
+     */
     iconPosition: 'before' | 'after';
+    /**
+     * Size on the button, it can be 'xsmall', 'small', 'normal' or 'large'.
+     * @group Props
+     */
     size: 'xsmall' | 'small' | 'normal' | 'large';
+    /**
+     * Width on the button, of type number denoting pixels or string.
+     * @group Props
+     */
     width: number | string;
+    /**
+     * Height on the button, of type number denoting pixels or string.
+     * @group Props
+     */
     height: number | string;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * When enabled, a cps-progress-circular bar is displayed.
+     * @group Props
+     */
     loading: boolean;
+    /**
+     * Callback to execute when button is clicked.
+     * @param {any} any - button clicked.
+     * @group Emits
+     */
     clicked: EventEmitter<any>;
     buttonColor: string;
     textColor: string;

package/lib/components/cps-button-toggle/cps-button-toggle.component.d.ts

@@ -9,24 +9,85 @@ export type CpsButtonToggleOption = {
     disabled?: boolean;
     tooltip?: string;
 };
+/**
+ * CpsButtonToggleComponent is used to select values using buttons.
+ * @group Components
+ */
 export declare class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
     private _control;
     private renderer;
+    /**
+     * Label of the toggle buttons.
+     * @group Props
+     */
     label: string;
+    /**
+     * An array of options.
+     * @group Props
+     */
     options: CpsButtonToggleOption[];
+    /**
+     * Specifies if multiple values can be selected.
+     * @group Props
+     */
     multiple: boolean;
+    /**
+     * Specifies that the component should be disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * Whether at least one of the options is mandatory.
+     * @group Props
+     */
     mandatory: boolean;
+    /**
+     * Whether all buttons should have equal widths.
+     * @group Props
+     */
     equalWidths: boolean;
+    /**
+     * Position of the option tooltip, can be 'top', 'bottom', 'left' or 'right'.
+     * @group Props
+     */
     optionTooltipPosition: CpsTooltipPosition;
+    /**
+     * When it is not an empty string, an info icon is displayed to show text for more info.
+     * @group Props
+     */
     infoTooltip: string;
+    /**
+     * Info tooltip class for styling.
+     * @group Props
+     */
     infoTooltipClass: string;
+    /**
+     * Size of infoTooltip, of type number or string.
+     * @group Props
+     */
     infoTooltipMaxWidth: number | string;
+    /**
+     * Whether the infoTooltip is persistent.
+     * @group Props
+     */
     infoTooltipPersistent: boolean;
+    /**
+     * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+     * @group Props
+     */
     infoTooltipPosition: CpsTooltipPosition;
+    /**
+     * Value of the component.
+     * @group Props
+     */
     _value: any;
     set value(value: any);
     get value(): any;
+    /**
+     * Callback to invoke on value change.
+     * @param {any} any - value changed.
+     * @group Emits
+     */
     valueChanged: EventEmitter<any>;
     largestButtonWidth: number;
     constructor(_control: NgControl, renderer: Renderer2);

package/lib/components/cps-checkbox/cps-checkbox.component.d.ts

@@ -3,20 +3,69 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip.directive';
 import { IconType } from '../cps-icon/cps-icon.component';
 import * as i0 from "@angular/core";
+/**
+ * CpsCheckboxComponent is a checkbox element.
+ * @group Components
+ */
 export declare class CpsCheckboxComponent implements OnInit, ControlValueAccessor {
     private _control;
     private _elementRef;
+    /**
+     * Label of the checkbox.
+     * @group Props
+     */
     label: string;
+    /**
+     * Whether checkbox is disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * When it is not an empty string, an info icon is displayed to show text for more info.
+     * @group Props
+     */
     infoTooltip: string;
+    /**
+     * InfoTooltip class for styling.
+     * @group Props
+     */
     infoTooltipClass: string;
+    /**
+     * Size of infoTooltip, of type number denoting pixels or string.
+     * @group Props
+     */
     infoTooltipMaxWidth: number | string;
+    /**
+     * Whether the infoTooltip is persistent.
+     * @group Props
+     */
     infoTooltipPersistent: boolean;
+    /**
+     * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+     * @group Props
+     */
     infoTooltipPosition: CpsTooltipPosition;
+    /**
+     * Name of the icon.
+     * @group Props
+     */
     icon: IconType;
+    /**
+     * Color of the icon.
+     * @group Props
+     */
     iconColor: string;
+    /**
+     * Value of the checkbox.
+     * @group Props
+     */
     set value(value: boolean);
     get value(): boolean;
+    /**
+     * Callback to invoke on value change.
+     * @param {boolean} boolean - value changed.
+     * @group Emits
+     */
     valueChanged: EventEmitter<boolean>;
     private _value;
     constructor(_control: NgControl, _elementRef: ElementRef<HTMLElement>);

package/lib/components/cps-chip/cps-chip.component.d.ts

@@ -1,13 +1,46 @@
 import { EventEmitter, OnChanges } from '@angular/core';
 import { IconType } from '../cps-icon/cps-icon.component';
 import * as i0 from "@angular/core";
+/**
+ * CpsChipComponent represents a chip element.
+ * @group Components
+ */
 export declare class CpsChipComponent implements OnChanges {
+    /**
+     * Label of the chip element.
+     * @group Props
+     */
     label: string;
+    /**
+     * Name of the icon.
+     * @group Props
+     */
     icon: IconType;
+    /**
+     * Color of the icon.
+     * @group Props
+     */
     iconColor: string;
+    /**
+     * Position of the icon, it can be 'before' or 'after'. Defaults to 'before'.
+     * @group Props
+     */
     iconPosition: 'before' | 'after';
+    /**
+     * Option for closing a chip element.
+     * @group Props
+     */
     closable: boolean;
+    /**
+     * Whether chip is disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * Callback to invoke on chip close.
+     * @param {string} string - Chip closed.
+     * @group Emits
+     */
     closed: EventEmitter<string>;
     classesList: string[];
     ngOnChanges(): void;

package/lib/components/cps-datepicker/cps-datepicker.component.d.ts

@@ -5,28 +5,113 @@ import { CpsTooltipPosition } from '../../directives/cps-tooltip.directive';
 import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
 import * as i0 from "@angular/core";
 export type CpsDatepickerAppearanceType = 'outlined' | 'underlined' | 'borderless';
+/**
+ * CpsDatepickerComponent is an input component to provide date input.
+ * @group Components
+ */
 export declare class CpsDatepickerComponent implements ControlValueAccessor, OnInit, OnDestroy {
     private _control;
+    /**
+     * Label of the datepicker element.
+     * @group Props
+     */
     label: string;
+    /**
+     * Whether datepicker is disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * Width of the datepicker of type number denoting pixels or string.
+     * @group Props
+     */
     width: number | string;
+    /**
+     * Placeholder text.
+     * @group Props
+     */
     placeholder: string;
+    /**
+     * Bottom hint text for the input field.
+     * @group Props
+     */
     hint: string;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @group Props
+     */
     clearable: boolean;
+    /**
+     * Hides hint and validation errors.
+     * @group Props
+     */
     hideDetails: boolean;
+    /**
+     * Whether the component should have persistent clear icon.
+     * @group Props
+     */
     persistentClear: boolean;
+    /**
+     * Whether to show button to be able to select today's date.
+     * @group Props
+     */
     showTodayButton: boolean;
+    /**
+     * Whether the datepicker dropdown should open on input focus.
+     * @group Props
+     */
     openOnInputFocus: boolean;
+    /**
+     * When it is not an empty string, an info icon is displayed to show text for more info.
+     * @group Props
+     */
     infoTooltip: string;
+    /**
+     * InfoTooltip class for styling.
+     * @group Props
+     */
     infoTooltipClass: string;
+    /**
+     * Size of infoTooltip, of type number denoting pixels or string.
+     * @group Props
+     */
     infoTooltipMaxWidth: number | string;
+    /**
+     * Whether the infoTooltip is persistent.
+     * @group Props
+     */
     infoTooltipPersistent: boolean;
+    /**
+     * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
+     * @group Props
+     */
     infoTooltipPosition: CpsTooltipPosition;
+    /**
+     * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
+     * @group Props
+     */
     appearance: CpsDatepickerAppearanceType;
+    /**
+     * Minimal date availalbe for selection.
+     * @group Props
+     */
     minDate: Date;
+    /**
+     * Maximal date availalbe for selection.
+     * @group Props
+     */
     maxDate: Date;
+    /**
+     * Value of the datepicker.
+     * @group Props
+     */
     set value(value: Date | null);
     get value(): Date | null;
+    /**
+     * Callback to invoke on value change.
+     * @param {Date | null} value - value change.
+     * @group Emits
+     */
     valueChanged: EventEmitter<Date | null>;
     datepickerInput: CpsInputComponent;
     calendarMenu: CpsMenuComponent;

package/lib/components/cps-expansion-panel/cps-expansion-panel.component.d.ts

@@ -1,17 +1,67 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { IconType } from '../cps-icon/cps-icon.component';
 import * as i0 from "@angular/core";
+/**
+ * CpsExpansionPanelComponent is a component that provides content on expansion.
+ * @group Components
+ */
 export declare class CpsExpansionPanelComponent implements OnInit {
+    /**
+     * Title of the expansionPanel element.
+     * @group Props
+     */
     headerTitle: string;
+    /**
+     * Background color of the expansion panel element.
+     * @group Props
+     */
     backgroundColor: string;
+    /**
+     * Whether to show the chevron icon.
+     * @group Props
+     */
     showChevron: boolean;
+    /**
+     * Indicates current expansion state.
+     * @group Props
+     */
     isExpanded: boolean;
+    /**
+     * Whether expansion panel is disabled.
+     * @group Props
+     */
     disabled: boolean;
+    /**
+     * If true, expansion panel element will have borders.
+     * @group Props
+     */
     bordered: boolean;
+    /**
+     * The border radius of the component.
+     * @group Props
+     */
     borderRadius: number | string;
+    /**
+     * The width of the expansion panel of type number denoting pixels or string.
+     * @group Props
+     */
     width: number | string;
+    /**
+     * Name of the icon in front of the title.
+     * @group Props
+     */
     prefixIcon: IconType;
+    /**
+     * Callback to invoke after a tab gets collapsed.
+     * @param {void}
+     * @group Emits
+     */
     afterCollapse: EventEmitter<void>;
+    /**
+     * Callback to invoke after a tab gets expanded.
+     * @param {void}
+     * @group Emits
+     */
     afterExpand: EventEmitter<void>;
     ngOnInit(): void;
     toggleExpansion(): void;

package/lib/components/cps-icon/cps-icon.component.d.ts

@@ -3,9 +3,25 @@ import * as i0 from "@angular/core";
 export declare const iconNames: string[];
 export type IconType = (typeof iconNames)[number];
 export type iconSizeType = number | string | 'fill' | 'xsmall' | 'small' | 'normal' | 'large';
+/**
+ * CpsIconComponent is a component that is used for icons.
+ * @group Components
+ */
 export declare class CpsIconComponent implements OnChanges {
+    /**
+     * Name of the icon.
+     * @group Props
+     */
     icon: IconType;
+    /**
+     * Size of the icon, it can be of type number denoting pixels, string or 'fill', 'xsmall', 'small', 'normal' or 'large'.
+     * @group Props
+     */
     size: iconSizeType;
+    /**
+     * Color of the icon.
+     * @group Props
+     */
     color: string;
     iconColor: string;
     url: string;

package/lib/components/cps-info-circle/cps-info-circle.component.d.ts

@@ -1,12 +1,40 @@
 import { iconSizeType } from '../cps-icon/cps-icon.component';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip.directive';
 import * as i0 from "@angular/core";
+/**
+ * CpsInfoCircleComponent is a component that provides information by means of the info icon with the tooltip on hover.
+ * @group Components
+ */
 export declare class CpsInfoCircleComponent {
+    /**
+     * Size of the icon, it can be of type number denoting pixels, string or 'fill', 'xsmall', 'small', 'normal' or 'large'.
+     * @group Props
+     */
     size: iconSizeType;
+    /**
+     * Tooltip text to provide more info.
+     * @group Props
+     */
     tooltipText: string;
+    /**
+     * Position of the tooltip, it can be 'top', 'bottom', 'left' or 'right'.
+     * @group Props
+     */
     tooltipPosition: CpsTooltipPosition;
+    /**
+     * Info tooltip class for styling.
+     * @group Props
+     */
     tooltipContentClass: string;
+    /**
+     * Max width of the tooltip of type number denoting pixels or string.
+     * @group Props
+     */
     tooltipMaxWidth: number | string;
+    /**
+     * Whether the tooltip is persistent.
+     * @group Props
+     */
     tooltipPersistent: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsInfoCircleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CpsInfoCircleComponent, "cps-info-circle", never, { "size": "size"; "tooltipText": "tooltipText"; "tooltipPosition": "tooltipPosition"; "tooltipContentClass": "tooltipContentClass"; "tooltipMaxWidth": "tooltipMaxWidth"; "tooltipPersistent": "tooltipPersistent"; }, {}, never, never, true, never>;