@messaia/cdk 17.1.4 → 17.1.5-rc02

package/lib/common/common.module.d.ts

@@ -39,6 +39,7 @@ export { AuditUser } from './models/audit-user';
 export { BaseEntity } from './models/base-entity';
 export { IEntity } from './models/entity';
 export { EnumItem } from './models/enum-item';
+export { Icon } from './models/icon';
 export { KeyValue } from './models/key-value';
 export { SaveAction } from './models/save-action';
 export { SuffixButton } from './models/suffix-button';

package/lib/common/models/icon.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Represents an icon configuration for a table column.
+ */
+export declare class Icon<TEntity = any, TContext = any> {
+    /**
+     * Material icon name or function returning the icon dynamically.
+     */
+    matIcon?: ((x?: TEntity, ctx?: TContext) => any) | string;
+    /**
+     * SVG icon name or function returning the icon dynamically.
+     */
+    svgIcon?: ((x?: TEntity, ctx?: TContext) => any) | string;
+    /**
+     * Font icon name or function returning the icon dynamically.
+     */
+    fontIcon?: ((x?: TEntity, ctx?: TContext) => any) | string;
+    /**
+     * Font set name for font icon.
+     */
+    fontSet?: string;
+    /**
+     * CSS class name or function returning the class dynamically.
+     */
+    cssClass?: ((x?: TEntity, ctx?: TContext) => any) | string;
+    /**
+     * Function to dynamically hide the icon.
+     */
+    hide?: (x?: TEntity, ctx?: TContext, index?: number) => any;
+    /**
+     * Constructs a new instance of TableColumnIcon.
+     * @param init Optional configuration object to initialize properties.
+     */
+    constructor(init?: Partial<Icon<TEntity, TContext>>);
+}

package/lib/forms/helpers/abstract-select-form-field.component.d.ts

@@ -3,154 +3,172 @@ import { HttpClient } from '@angular/common/http';
 import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnInit } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
+import { Icon } from '../../common/models/icon';
 import { AbstractMatFormField } from '../../forms/helpers/abstract-mat-form-field';
 import * as i0 from "@angular/core";
 export declare abstract class AbstractSelectFormField<T> extends AbstractMatFormField<T> implements OnInit {
     protected injector: Injector;
     /**
-     * Represents a value that changes over time.
+     * A BehaviorSubject that tracks changes to the endpoint data.
      */
     private _endpointChange;
     /**
-     * Represents a value that changes over time.
+     * A BehaviorSubject that tracks changes to the enum data.
      */
     private _enumChange;
     /**
-     * The http service from to get the data
+     * The HTTP client service used to fetch data from an API.
      */
     protected _http?: HttpClient;
     /**
-     * Default select option
+     * Whether the default option should be selected by default.
      */
     protected _defaultOption: boolean;
     /**
-     * Multiple select option
+     * Whether multiple selection is enabled.
      */
     protected _multiple: boolean;
     /**
-     * Sorts options
+     * Whether the options should be sorted.
      */
     protected _sorted: boolean;
     /**
-     * _endpoint: string
+     * The API endpoint or a function returning the endpoint URL.
      */
     protected _endpoint?: string | Function;
     /**
-     * _params: any
+     * Parameters to be sent with the API request.
      */
     protected _params: any;
     /**
-     * _projection: any
+     * Projection fields to be included in the API request.
      */
     protected _projection?: string | string[];
     /**
-     * Load data
+     * Whether to load data automatically.
      */
     protected _loadData: boolean;
     /**
-     * _enumFilter: Function
+     * A filter function to apply to the enum data.
      */
     protected _enumFilter?: Function;
     /**
-     * A function to compare the option values with the selected values.
+     * A function to compare option values with the selected values.
      */
     private _compareWith;
     /**
-     * The name of the endpoint
+     * The enumeration data or endpoint for the options.
      */
     enum: any;
     /**
-     * textPrefix?: any
+     * Optional prefix text to display.
      */
     textPrefix: string;
     /**
-     * The key
+     * The property name in the option object for the text to display.
+     * This is used to determine which property of the option object to show as the option's text.
      */
-    key: any;
+    optionTextProperty: string;
     /**
-     * The text
+     * The property name in the option object for the value of the options.
+     * This is used to identify the unique value for each option.
      */
-    text: any;
+    optionValueProperty: string;
     /**
-     * The prefix
+     * The key for the Material icon to display.
+     */
+    matIconKey?: string;
+    /**
+     * The key for the SVG icon to display.
+     */
+    svgIconKey?: string;
+    /**
+     * Font set name for font icon.
+     */
+    fontSet?: string;
+    /**
+     * Optional prefix to display before the options.
      */
     prefix: any;
     /**
-     * Option list
+     * The list of available options.
      */
     options: any;
     /**
-     * filtered option list
+     * The list of filtered options.
      */
     filteredOptions: any;
     /**
-     * filterable?
+     * Whether the options can be filtered.
      */
     filterable: boolean;
     /**
-     * cache?
+     * Whether to cache the options.
      */
     cache: boolean;
     /**
-     * selectFirst?
+     * Whether to select the first option by default.
      */
     selectFirst: boolean;
     /**
-     * sortBy?
+     * The field by which to sort the options.
      */
     sortBy?: string;
     /**
-     * mapper: Function
+     * A function to map the options before displaying.
      */
     mapper?: (x: any[]) => any;
     /**
-     * @property
+     * A function to return the icon for a given option.
+     */
+    optionIcon?: (x: any) => Icon<T, any>;
+    /**
+     * Whether the default option should be selected.
      */
     get defaultOption(): boolean;
     set defaultOption(defaultOption: boolean);
     /**
-     * @property
+     * Whether multiple selection is enabled.
      */
     get multiple(): boolean;
     set multiple(multi: boolean);
     /**
-     * @property
+     * Whether the options should be sorted.
      */
     get sorted(): boolean;
     set sorted(sorted: boolean);
     /**
-     * @property
+     * The API endpoint or a function returning the endpoint URL.
      */
     get endpoint(): string | Function | undefined;
     set endpoint(endpoint: string | Function);
     /**
-     * @property
+     * Parameters to be sent with the API request.
      */
     get params(): any;
     set params(params: any);
     /**
-     * @property
+     * Projection fields to be included in the API request.
      */
     get projection(): string | string[];
     set projection(projection: string | string[] | undefined);
     /**
-     * @property
+     * Whether to load data automatically.
      */
     get loadData(): boolean;
     set loadData(loadData: boolean);
     /**
-     * @property
+     * A filter function to apply to the enum data.
      */
     get enumFilter(): Function | undefined;
     set enumFilter(enumFilter: Function);
     /**
-     * Gets the control is disabled.
-     * @param disabled
+     * Whether the control is disabled.
      */
     get disabled(): any;
     set disabled(disabled: any);
     /**
-     * Gets current value
+     * Gets the currently selected value(s).
      */
     get currentValue(): any;
     /**
@@ -234,6 +252,12 @@ export declare abstract class AbstractSelectFormField<T> extends AbstractMatForm
      * Trigger enum changed
      */
     protected enumChanged(): void;
+    /**
+     * Log to console
+     * @param message
+     * @param optionalParams
+     */
+    log(message: any, ...optionalParams: any[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractSelectFormField<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractSelectFormField<any>, never, never, { "enum": { "alias": "enum"; "required": false; }; "textPrefix": { "alias": "textPrefix"; "required": false; }; "key": { "alias": "key"; "required": false; }; "text": { "alias": "text"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "options": { "alias": "options"; "required": false; }; "filteredOptions": { "alias": "filteredOptions"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "cache": { "alias": "cache"; "required": false; }; "selectFirst": { "alias": "selectFirst"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "defaultOption": { "alias": "defaultOption"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "sorted": { "alias": "sorted"; "required": false; }; "endpoint": { "alias": "endpoint"; "required": false; }; "params": { "alias": "params"; "required": false; }; "projection": { "alias": "projection"; "required": false; }; "loadData": { "alias": "loadData"; "required": false; }; "enumFilter": { "alias": "enumFilter"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "searchField": { "alias": "searchField"; "required": false; }; }, { "onValueChange": "change"; "onItemChange": "itemChange"; "onSelected": "selected"; "onItemSelected": "itemSelected"; "onLaunch": "launch"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractSelectFormField<any>, never, never, { "enum": { "alias": "enum"; "required": false; }; "textPrefix": { "alias": "textPrefix"; "required": false; }; "optionTextProperty": { "alias": "optionTextProperty"; "required": false; }; "optionValueProperty": { "alias": "optionValueProperty"; "required": false; }; "matIconKey": { "alias": "matIconKey"; "required": false; }; "svgIconKey": { "alias": "svgIconKey"; "required": false; }; "fontSet": { "alias": "fontSet"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "options": { "alias": "options"; "required": false; }; "filteredOptions": { "alias": "filteredOptions"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "cache": { "alias": "cache"; "required": false; }; "selectFirst": { "alias": "selectFirst"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "defaultOption": { "alias": "defaultOption"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "sorted": { "alias": "sorted"; "required": false; }; "endpoint": { "alias": "endpoint"; "required": false; }; "params": { "alias": "params"; "required": false; }; "projection": { "alias": "projection"; "required": false; }; "loadData": { "alias": "loadData"; "required": false; }; "enumFilter": { "alias": "enumFilter"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "searchField": { "alias": "searchField"; "required": false; }; }, { "onValueChange": "change"; "onItemChange": "itemChange"; "onSelected": "selected"; "onItemSelected": "itemSelected"; "onLaunch": "launch"; }, never, never, false, never>;
 }

package/lib/forms/models/form-field-definition.d.ts

@@ -258,15 +258,30 @@ export declare class FormFieldDefinition<TEntity = any, TProperty = any> {
      */
     optionTemplate?: (x: TProperty, y?: TEntity, f?: FormGroup, ctx?: IGenericFormBaseComponent<TEntity>) => any;
     /**
-     * Text to display in options.
-     * @property
+     * The property name in the option object for the text to display.
+     * This is used to determine which property of the option object to show as the option's text.
      */
-    optionText: string;
+    optionTextProperty: string;
     /**
-     * Value of options.
-     * @property
+     * The property name in the option object for the value of the options.
+     * This is used to identify the unique value for each option.
+     */
+    optionValueProperty: string;
+    /**
+     * The property name in the option object for the Material icon.
+     * This can be used to display a Material icon in the options list.
+     */
+    optionMatIconProperty?: string;
+    /**
+     * The property name in the option object for the SVG icon.
+     * This can be used to display an SVG icon in the options list.
+     */
+    optionSvgIconProperty?: string;
+    /**
+     * The font set to be used for the icons in the options.
+     * This specifies a custom font set for the icons displayed in the options list.
      */
-    optionValue: string;
+    optionIconFontSet?: string;
     /**
      * Parameters for data retrieval.
      * @property

package/lib/select/components/select.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { ErrorStateMatcher, MatOption } from '@angular/material/core';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { MatSelect } from '@angular/material/select';
 import { AbstractSelectFormField } from '../../forms/helpers/abstract-select-form-field.component';
 import { VdSelectOptionDirective } from '../directives/vd-select-option.directive';
@@ -10,84 +10,100 @@ import * as i0 from "@angular/core";
 export declare class VdSelectComponent extends AbstractSelectFormField<any> implements AfterViewInit {
     protected injector: Injector;
     /**
-     * Trigger css class
+     * CSS class applied to the trigger element.
      */
     protected _triggerCssClass?: string;
     /**
-     * Trigger mode
+     * Mode of the trigger, default is 'chip'.
      */
     protected _triggerMode: string;
     /**
-     * Option template
+     * Template for rendering options.
      */
     optionTemplate?: VdSelectOptionDirective;
     /**
-     * Trigger template
+     * Template for rendering the trigger.
      */
     triggerTemplate?: VdSelectTriggerDirective;
     /**
-     * The select element.
+     * Reference to the MatSelect element.
      */
     selectEl?: MatSelect;
     /**
-     * The select element.
+     * Reference to the filter input element.
      */
     filterInput?: ElementRef;
     /**
-     * Trigger css class
+     * CSS class applied to the trigger element.
      */
     get triggerCssClass(): string | undefined;
     set triggerCssClass(triggerCssClass: string | undefined);
     /**
-     * Trigger mode
+     * Mode of the trigger, default is 'chip'.
      */
     get triggerMode(): string;
     set triggerMode(triggerMode: string);
     /**
-     * Whether the select has a value.
+     * Gets the display values of the selected options for the trigger.
+     *
+     * @returns The display values of the selected options
+     */
+    get triggerValues(): any[];
+    /**
+     * Retrieves the currently selected options from the filtered options.
+     * If multiple options are selected, returns them as an array.
+     * If a single option is selected, returns it as an array with one element.
+     *
+     * @returns An array of selected items from the filtered options.
+     */
+    get selectedOptions(): any[];
+    /**
+     * Checks if the select element is empty.
+     *
+     * @returns true if the select element is empty, false otherwise.
      */
     get empty(): boolean;
     /**
-     * Constructor
-     * @param ngControl
-     * @param parentForm
-     * @param parentFormGroup
-     * @param defaultErrorStateMatcher
-     * @param focusMonitor
-     * @param elementRef
+     * Constructor to initialize the VdSelectComponent.
+     *
+     * @param injector Dependency injector
+     * @param ngControl Angular form control directive
+     * @param parentForm Parent form
+     * @param parentFormGroup Parent form group
+     * @param defaultErrorStateMatcher Default error state matcher
+     * @param focusMonitor Focus monitor for managing focus state
+     * @param elementRef Reference to the component element
+     * @param changeDetectorRef Change detector reference
      */
     constructor(injector: Injector, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, focusMonitor: FocusMonitor, elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef);
     /**
-     * A callback method that is invoked immediately after
-     * Angular has completed initialization of a component's view.
-     * It is invoked only once when the view is instantiated.
+     * Lifecycle hook that is called after Angular has initialized the component's view.
+     * Sets up an event listener to focus the filter input when the select element is opened.
      */
     ngAfterViewInit(): void;
     /**
-     * From ControlValueAccessor interface
-     * @param value
+     * Writes the value to the component. Part of the ControlValueAccessor interface.
+     *
+     * @param value The value to be written
      */
     writeValue(value: any): void;
     /**
-     * Sets control focus
+     * Sets focus on the select element and opens the dropdown.
      */
     focus(): void;
     /**
-     * Handles launch button click
-     * @param value
+     * Handles the launch button click event.
+     * Emits the selected options through the onLaunch event emitter.
+     *
+     * @param value The value to be emitted
      */
     handleLaunchClicked(value: any): void;
     /**
-     * Handels filter event
-     * @param $event
+     * Handles the filter event to filter the options based on the input.
+     *
+     * @param $event The filter event
      */
     handleFilter($event?: Event): void;
-    /**
-     * Gets the values of the selected options for the trigger
-     * @param options
-     * @returns
-     */
-    getTriggerValues(options: MatOption | MatOption[]): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<VdSelectComponent, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VdSelectComponent, "vd-select", never, { "triggerCssClass": { "alias": "triggerCssClass"; "required": false; }; "triggerMode": { "alias": "triggerMode"; "required": false; }; }, {}, ["optionTemplate", "triggerTemplate"], never, false, never>;
 }

package/lib/table/enums/table-column-type.d.ts

@@ -10,5 +10,6 @@ export declare enum TableColumnType {
     Date = 8,
     Action = 9,
     Menu = 10,
-    IconButton = 11
+    Icon = 11,
+    IconButton = 12
 }

package/lib/table/models/table-column.d.ts

@@ -1,6 +1,7 @@
 import { FormGroup } from "@angular/forms";
 import { IGenericListComponent } from "../../base/interfaces/igeneric-list-component";
 import { ActionItem } from "../../common/models/action-item";
+import { Icon } from "../../common/models/icon";
 import { FilterOperator } from "../enums/filter-operator";
 import { Grid } from "../enums/grid";
 import { TableColumnType } from "../enums/table-column-type";
@@ -120,6 +121,11 @@ export declare class TableColumn<TEntity = any> {
      * @property
      */
     iconButton?: ActionItem<TEntity, IGenericListComponent<TEntity>>;
+    /**
+     * Icon configuration for the column.
+     * @property
+     */
+    icon?: Icon<TEntity, IGenericListComponent<TEntity>>;
     /**
      * The index of the column.
      * @property

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@messaia/cdk",
-  "version": "17.1.4",
+  "version": "17.1.5-rc02",
   "peerDependencies": {
     "@angular/common": "^17.3.5",
     "@angular/core": "^17.3.5"