193 annotate inputs and outputs of the components (#231)

* Defining API (mostly inputs) * Inputs for table component * Inputs definition for tree table component * Input and output definition for table component * first section of Input corrections and outputs * Second section of Input corrections and outputs * Defining API (mostly inputs) * Inputs for table component * Inputs definition for tree table component * Input and output definition for table component * first section of Input corrections and outputs * Second section of Input corrections and outputs * Added lines between class members * Added comment on empty function "onTouched()" * Defined component , directive and inputs * Added blank space between class members * Added blank space between class members * Commented "Not certain" on inputs "initialExpandDirectories" and "initialExpandAll" * Revert "Merge branch 'master' into 193-annotate-inputs-and-outputs-of-the-components" This reverts commit fa6eb6a, reversing changes made to 0258119. * Fix BaseTreeDropdown docs * Revert "Revert "Merge branch 'master' into 193-annotate-inputs-and-outputs-of-the-components"" This reverts commit 620b304. * Fix wrongly resolved merge Merge #fa6eb6ae had wrongly resolved code * Resolve conflicts * remove icons diff * more to prev * more to prev * get rid of remaining missing annotations * changes up to cps-menu * up to cps table * final * more to prev * more * add dot --------- Co-authored-by: Lukas Matta <[email protected]> Co-authored-by: Andrei <[email protected]> Co-authored-by: Andrei Fateev <[email protected]>
AbsaOSS · Dec 7, 2023 · 38949c8 · 38949c8
1 parent 3b900bf
commit 38949c8
Show file tree

Hide file tree

Showing 47 changed files with 2,812 additions and 38 deletions.
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -38,6 +38,10 @@ export type CpsAutocompleteAppearanceType =
   | 'underlined'
   | 'borderless';
 
+/**
+ * CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
+ * @group Components
+ */
 @Component({
   standalone: true,
   imports: [
@@ -60,37 +64,190 @@ export type CpsAutocompleteAppearanceType =
 export class CpsAutocompleteComponent
   implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy
 {
+  /**
+   * Label of the input element.
+   * @group Props
+   */
   @Input() label = '';
+
+  /**
+   * Placeholder text.
+   * @group Props
+   */
   @Input() placeholder = 'Please enter';
+
+  /**
+   * Bottom hint text.
+   * @group Props
+   */
   @Input() hint = '';
-  @Input() returnObject = true; // if false, value will be option[optionValue]
+
+  /**
+   * Returns the object directly rather than the value specified with optionValue.
+   * @group Props
+   */
+  @Input() returnObject = true;
+
+  /**
+   * Specifies if multiple values can be selected.
+   * @group Props
+   */
   @Input() multiple = false;
+
+  /**
+   * Whether autocomplete is disabled.
+   * @group Props
+   */
   @Input() disabled = false;
+
+  /**
+   * Width of the input field, a number denoting pixels or a string.
+   * @group Props
+   */
   @Input() width: number | string = '100%';
-  @Input() selectAll = true; // doesn't work with virtual scroll
+
+  /**
+   * Option for selecting all elements. Doesn't work with virtual scroll.
+   * @group Props
+   */
+  @Input() selectAll = true;
+
+  /**
+   * When selecting elements, they will appear in a form of a chip.
+   * @group Props
+   */
   @Input() chips = true;
+
+  /**
+   * Whether the chips can be directly removed.
+   * @group Props
+   */
   @Input() closableChips = true;
+
+  /**
+   * When enabled, a clear icon is displayed to clear the value.
+   * @group Props
+   */
   @Input() clearable = false;
+
+  /**
+   * Whether the dropdown list should open on clear.
+   * @group Props
+   */
   @Input() openOnClear = true;
+
+  /**
+   * An array of options.
+   * @group Props
+   */
   @Input() options = [] as any[];
+
+  /**
+   * Name of the label field of an option.
+   * @group Props
+   */
   @Input() optionLabel = 'label';
-  @Input() optionValue = 'value'; // needed only if returnObject === false
+
+  /**
+   * Name of the value field of an option. Needed only if returnObject prop is false.
+   * @group Props
+   */
+  @Input() optionValue = 'value';
+
+  /**
+   * Name of the info field of an option, shows the additional information text.
+   * @group Props
+   */
   @Input() optionInfo = 'info';
+
+  /**
+   * Hides hint and validation errors.
+   * @group Props
+   */
   @Input() hideDetails = false;
+
+  /**
+   * Whether the component should have persistent clear icon.
+   * @group Props
+   */
   @Input() persistentClear = false;
+
+  /**
+   * Icon before input value.
+   * @group Props
+   */
   @Input() 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
+   */
   @Input() prefixIconSize: iconSizeType = '18px';
+
+  /**
+   * When enabled, a loading bar is displayed.
+   * @group Props
+   */
   @Input() loading = false;
+
+  /**
+   * Text to display when there is no data. Defaults to 'No results found'.
+   * @group Props
+   */
   @Input() emptyMessage = 'No results found';
+
+  /**
+   * Whether only the elements within scrollable area should be added into the DOM.
+   * @group Props
+   */
   @Input() virtualScroll = false;
+
+  /**
+   * Determines how many additional elements to add to the DOM outside of the view.
+   * @group Props
+   */
   @Input() numToleratedItems = 10;
+
+  /**
+   * When it is not an empty string, an info icon is displayed to show text for more info.
+   * @group Props
+   */
   @Input() infoTooltip = '';
+
+  /**
+   * Info tooltip class for styling.
+   * @group Props
+   */
   @Input() infoTooltipClass = 'cps-tooltip-content';
+
+  /**
+   * Max width of infoTooltip of type number denoting pixels or string.
+   * @group Props
+   */
   @Input() infoTooltipMaxWidth: number | string = '100%';
+
+  /**
+   * Whether the infoTooltip is persistent.
+   * @group Props
+   */
   @Input() infoTooltipPersistent = false;
+
+  /**
+   * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+   * @group Props
+   */
   @Input() infoTooltipPosition: CpsTooltipPosition = 'top';
+
+  /**
+   * Styling appearance of autocomplete input, it could be 'outlined', 'underlined' or 'borderless'.
+   * @group Props
+   */
   @Input() appearance: CpsAutocompleteAppearanceType = 'outlined';
 
+  /**
+   * Value of the autocomplete.
+   * @group Props
+   */
   @Input('value') _value: any = undefined;
 
   get value(): any {
@@ -102,6 +259,11 @@ export class CpsAutocompleteComponent
     this.onChange(value);
   }
 
+  /**
+   * Callback to invoke on value change.
+   * @param {any} any - value changed.
+   * @group Emits
+   */
   @Output() valueChanged = new EventEmitter<any>();
 
   @ViewChild('autocompleteBox')

diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
@@ -27,6 +27,10 @@ export type CpsButtonToggleOption = {
   tooltip?: string;
 };
 
+/**
+ * CpsButtonToggleComponent is used to select values using buttons.
+ * @group Components
+ */
 @Component({
   standalone: true,
   imports: [
@@ -42,19 +46,82 @@ export type CpsButtonToggleOption = {
   styleUrls: ['./cps-button-toggle.component.scss']
 })
 export class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
+  /**
+   * Label of the toggle buttons.
+   * @group Props
+   */
   @Input() label = '';
+
+  /**
+   * An array of options.
+   * @group Props
+   */
   @Input() options = [] as CpsButtonToggleOption[];
+
+  /**
+   * Specifies if multiple values can be selected.
+   * @group Props
+   */
   @Input() multiple = false;
+
+  /**
+   * Specifies that the component should be disabled.
+   * @group Props
+   */
   @Input() disabled = false;
-  @Input() mandatory = true; // at least one of the options is mandatory
+
+  /**
+   * Whether at least one of the options is mandatory.
+   * @group Props
+   */
+  @Input() mandatory = true;
+
+  /**
+   * Whether all buttons should have equal widths.
+   * @group Props
+   */
   @Input() equalWidths = true;
+
+  /**
+   * Position of the option tooltip, can be 'top', 'bottom', 'left' or 'right'.
+   * @group Props
+   */
   @Input() optionTooltipPosition: CpsTooltipPosition = 'bottom';
+
+  /**
+   * When it is not an empty string, an info icon is displayed to show text for more info.
+   * @group Props
+   */
   @Input() infoTooltip = '';
+
+  /**
+   * Info tooltip class for styling.
+   * @group Props
+   */
   @Input() infoTooltipClass = 'cps-tooltip-content';
+
+  /**
+   * Size of infoTooltip, of type number or string.
+   * @group Props
+   */
   @Input() infoTooltipMaxWidth: number | string = '100%';
+
+  /**
+   * Whether the infoTooltip is persistent.
+   * @group Props
+   */
   @Input() infoTooltipPersistent = false;
+
+  /**
+   * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+   * @group Props
+   */
   @Input() infoTooltipPosition: CpsTooltipPosition = 'top';
 
+  /**
+   * Value of the component.
+   * @group Props
+   */
   @Input('value') _value: any = undefined;
 
   set value(value: any) {
@@ -66,6 +133,11 @@ export class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
     return this._value;
   }
 
+  /**
+   * Callback to invoke on value change.
+   * @param {any} any - value changed.
+   * @group Emits
+   */
   @Output() valueChanged = new EventEmitter<any>();
 
   largestButtonWidth = 0;