cg-select/src/interfaces/cg-select.interface.ts
2023-02-06 19:18:08 +03:00

137 lines
3.7 KiB
TypeScript

import { IItems } from './items.interface';
/**
* @description Select settings.
*/
export interface ICgSelect {
/**
* Unique selector - *mandatory parameter (indicator) that is set when creating a select.
* @type {string}
*/
selector?: string;
/**
* An optional parameter, which is passed the element that will be selected initially in the select.
* @type {string}
*/
selected?: string;
/**
* Placeholder optional parameter to which the text of the select placeholder is passed.
* @type {string}
*/
placeholder?: string;
/**
* *Required parameter (if no other way to get data (url) is specified), this is an array of elements,
* which will be displayed in the select when selected.
* @type {IItems[] | string[] | any}
*/
items?: IItems[] | string[] | any;
/**
* An optional parameter responsible for switching between different themes, the classic theme is set by default.
* @type {string} values: dark, white
*/
theme?: string;
/**
* An optional parameter that adds a live search on the select elements.
* @type {boolean}
*/
searchMode?: boolean;
/**
* An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false,
* then when an element is selected in the selector, closing does not occur,
* and you can select another element by default, closeOnSelect:true.
* @type {boolean}
*/
closeOnSelect?: boolean;
/**
* An optional parameter that is responsible for the behavior of the select when opened on mobile devices.
* @type {boolean}
*/
nativeSelectMode?: boolean;
/**
* An optional parameter that is responsible for the behavior of the select when opening.
* @type {boolean}
*/
listDisplayMode?: boolean;
/**
* Optional parameter responsible for the localization of some text elements.
* @type {string}
*/
language?: string;
/**
* An optional parameter that adds a lable before the select.
* @type {string}
*/
label?: string;
/**
* An optional parameter that is responsible for customizing the select elements,
* objects with CSS properties for customizable elements are passed to it.
* @type {IStyle}
*/
styles?: IStyle;
/**
* An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type,
* select will open on hover.
* @type {string}
*/
event?: string;
/**
* Required parameter (if no other way to get data (items) is specified),
* data that comes from the backend in the format { id: "", title: "", value: ""}.
* @type {string}
*/
url?: string;
/**
* An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements.
* Selected elements are rendered as plain text, separated by commas.
* @type {boolean}
*/
multiselect?: boolean;
/**
* An optional parameter that is responsible for the behavior of the select,
* for him, *** works only in a place with a multiselect connection.
* @type {boolean}
*/
multiselectTag?: boolean;
}
/**
* @description Style Settings.
*/
export interface IStyle {
/**
* Select button customization.
* @type {object}
*/
head?: object;
/**
* Carriage customization.
* @type {object}
*/
caret?: object;
/**
* Customization placeholder.
* @type {object}
*/
placeholder?: object;
/**
* Lable select customization.
* @type {object}
*/
lable?: object;
/**
* Sheet customization with a selection of elements.
* @type {object}
*/
list?: object;
/**
* Search customization.
* @type {object}
*/
search?: object;
/**
* Chips customization with selected elements.
* @type {object}
*/
chips?: object;
}