smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
89 lines (88 loc) • 8.84 kB
TypeScript
import { GroupPanel } from './../index';
import { Animation, GroupPanelCloseButtonPosition } from './../index';
import { AfterViewInit, ElementRef, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter } from '@angular/core';
import { BaseElement } from './smart.element';
import * as i0 from "@angular/core";
export { Animation, GroupPanelCloseButtonPosition, ElementRenderMode } from './../index';
export { Smart } from './smart.element';
export { GroupPanel } from './../index';
export declare class GroupPanelComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {
constructor(ref: ElementRef<GroupPanel>);
private eventHandlers;
nativeElement: GroupPanel;
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties?: {}): any;
/** @description Controls the animation mode for the element. You can use this property to retrieve the current animation mode or set a new one. When set to 'none', all animations are disabled for the element, resulting in immediate transitions without any visual effects. */
get animation(): Animation | string;
set animation(value: Animation | string);
/** @description Defines or retrieves the position of the close button displayed on items within the group panel. This property allows you to specify where the close button appears (e.g., left, right, or another designated location) for each group panel item, or to access its current position programmatically. */
get closeButtonPosition(): GroupPanelCloseButtonPosition | string;
set closeButtonPosition(value: GroupPanelCloseButtonPosition | string);
/** @description Specifies the data source configuration for the group panel. Each entry in the dataSource array is an object that defines the properties of a column available for grouping. The object includes the following fields: dataField: The unique field name of the column that can be used for grouping. dataType: The data type of the column, such as 'string', 'number', 'date', etc. groupIndex: The initial position of the column in the group order. A value of -1 means the column will not be grouped by default. label: The display name of the column shown in the column selection dropdown of the group panel. icon: The CSS class for the icon representing this column in the selection dropdown, allowing for custom visual identification. sortDirection: The default sort direction when the column is used for grouping. Accepted values are 'ascending' or 'descending'.Use this configuration to control which columns users can group by, their display order, labels, icons, and default sorting in your group panel interface. */
get dataSource(): {
label: string;
dataField: string;
dataType: string;
sortDirection: string;
groupIndex: number;
}[];
set dataSource(value: {
label: string;
dataField: string;
dataType: string;
sortDirection: string;
groupIndex: number;
}[]);
/** @description Controls the visibility of the group panel, allowing you to show or hide the panel where grouped items or filters are managed. Set to true to display the group panel, or false to hide it from the user interface. */
get disabled(): boolean;
set disabled(value: boolean);
/** @description Sets or retrieves the unlockKey, a unique code or token required to activate and access the full features of the product. This property is used to manage product unlocking and user authorization. */
get unlockKey(): string;
set unlockKey(value: string);
/** @description Specifies or retrieves the current language setting. This property determines which set of localized messages—defined in the messages property—will be used for displaying content. When setting this value, the corresponding language-specific messages are selected for the user interface. */
get locale(): string;
set locale(value: string);
/** @description A callback function that allows you to define or modify the format of messages returned by the Localization Module. Use this to tailor localized message strings—such as formatting variables, changing wording, or supporting custom message structures—before they are delivered to your application. */
get localizeFormatFunction(): any;
set localizeFormatFunction(value: any);
/** @description Specifies or retrieves the maximum number of columns that can be used for grouping results. If the value is set to null, there is no restriction on the number of columns allowed in the grouping operation. */
get maxLevel(): number;
set maxLevel(value: number);
/** @description Defines or retrieves an object containing localized string values used throughout the widget's user interface. By customizing this object, you can provide translations for UI text, labels, tooltips, and messages. This property works together with the locale property, allowing the widget to display content in different languages based on the specified locale setting. */
get messages(): any;
set messages(value: any);
/** @description If the element is set to readonly, users will be able to view its value but will not be able to modify, edit, or otherwise interact with its content. This means the element’s value cannot be changed through direct user input, although the content may still be selectable or copied. */
get readonly(): boolean;
set readonly(value: boolean);
/** @description Gets or sets a value that specifies whether the element’s layout direction is set to right-to-left (RTL), enabling proper alignment and support for languages and locales that use right-to-left scripts, such as Arabic or Hebrew. */
get rightToLeft(): boolean;
set rightToLeft(value: boolean);
/** @description When set to true, this property prevents the element from receiving keyboard focus, meaning the element cannot be selected or activated using the Tab key or other focus navigation methods. */
get unfocusable(): boolean;
set unfocusable(value: boolean);
/** @description This event is triggered whenever the user clicks the "Apply" button on the interface. It can be used to initiate actions such as submitting form data, applying selected filters, updating displayed content, or executing any operation associated with the user's request to apply changes. The event will only fire in response to direct user interaction with the "Apply" button.
* @param event. The custom event. */
onApply: EventEmitter<CustomEvent>;
/** @description This event is triggered whenever the user clicks the "Cancel" button. It typically initiates actions such as closing the current dialog, dismissing a modal window, or aborting an ongoing operation, depending on the application's context.
* @param event. The custom event. */
onCancel: EventEmitter<CustomEvent>;
/** @description This event is triggered whenever the "Collapse all" button is clicked by the user. It typically initiates the process of collapsing or hiding all currently expanded sections, panels, or items within the interface, resulting in a more compact view.
* @param event. The custom event. */
onCollapseAll: EventEmitter<CustomEvent>;
/** @description This event is triggered whenever the "Expand all" button is clicked by the user, typically to display all collapsible content sections within the interface. It allows developers to respond to the user's action, such as expanding all hidden panels or rows programmatically.
* @param event. The custom event. */
onExpandAll: EventEmitter<CustomEvent>;
get isRendered(): boolean;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
/** @description Add event listeners. */
private listen;
/** @description Remove event listeners. */
private unlisten;
static ɵfac: i0.ɵɵFactoryDeclaration<GroupPanelComponent, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupPanelComponent, "smart-group-panel, [smart-group-panel]", ["smart-group-panel"], { "animation": "animation"; "closeButtonPosition": "closeButtonPosition"; "dataSource": "dataSource"; "disabled": "disabled"; "unlockKey": "unlockKey"; "locale": "locale"; "localizeFormatFunction": "localizeFormatFunction"; "maxLevel": "maxLevel"; "messages": "messages"; "readonly": "readonly"; "rightToLeft": "rightToLeft"; "unfocusable": "unfocusable"; }, { "onApply": "onApply"; "onCancel": "onCancel"; "onCollapseAll": "onCollapseAll"; "onExpandAll": "onExpandAll"; }, never>;
}