smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
386 lines (378 loc) • 23.1 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.gridpanel';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class MultiColumnFilterPanelComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever the user clicks the "Apply" button. It signals that the user has finished configuring their selections or input, and requests that the changes be processed or saved. The event typically carries any relevant data or form values associated with the current application state.
* @param event. The custom event. */
this.onApply = new EventEmitter();
/** @description This event is triggered when a user clicks the "Cancel" button, indicating an intention to abort or exit the current operation. It can be used to execute cleanup tasks, close dialogs or forms, or revert unsaved changes.
* @param event. The custom event. */
this.onCancel = new EventEmitter();
/** @description This event is triggered whenever the user clicks the "Collapse all" button, initiating the action to collapse or minimize all currently expanded sections or items in the interface.
* @param event. The custom event. */
this.onCollapseAll = new EventEmitter();
/** @description This event is triggered whenever the user clicks the "Expand all" button, typically to expand and reveal all collapsible sections or items within the interface. It enables developers to execute specific actions—such as loading additional content or updating the UI—immediately after all expandable elements become visible.
* @param event. The custom event. */
this.onExpandAll = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-multi-column-filter-panel');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Defines or retrieves the current animation mode for the element. Setting this property to 'none' disables all animations, while other values enable specific animation behaviors. Use this property to control whether animations are active or inactive. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Controls the placement of the close button within items in the filter panel when using a multi-column layout. You can use this property to retrieve the current position or specify a new position for the close button, determining where it appears relative to each filter panel item. */
get closeButtonPosition() {
return this.nativeElement ? this.nativeElement.closeButtonPosition : undefined;
}
set closeButtonPosition(value) {
this.nativeElement ? this.nativeElement.closeButtonPosition = value : undefined;
}
/** @description Specifies the data source to be loaded into the multi-column filter panel.The dataSource array consists of objects, each representing a column available for grouping and filtering. Each object includes the following properties: dataField: The name of the data field that identifies the column to be grouped. dataType: The type of data contained in the column (e.g., string, number, date), used for correct grouping and filtering operations. groupIndex: The initial grouping order of the column, where a value of -1 means the column is not grouped by default. Columns with non-negative values are grouped in ascending order based on their groupIndex. label: The display name for the column, shown in the column selection dropdown or panel for user-friendly identification. icon: A CSS class or icon identifier to visually represent the column in the selection input, improving the user interface and navigation. sortDirection: The direction in which items are sorted within the group. Acceptable values are 'ascending' or 'descending'. This structure allows you to fully customize how columns appear and behave within the multi-column filter panel, including display options, grouping priorities, and sorting behavior. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Controls whether the multi-column filter panel is displayed, allowing users to filter data across multiple columns simultaneously. When enabled, the panel appears in the UI, providing advanced filtering options; when disabled, the panel is hidden and users cannot access multi-column filtering features. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description A callback function invoked to customize or update the configuration of value editor components. This function allows developers to modify editor settings—such as input types, selectable options, validation rules, or UI behavior—before the value editor is rendered or updated. */
get editorCallback() {
return this.nativeElement ? this.nativeElement.editorCallback : undefined;
}
set editorCallback(value) {
this.nativeElement ? this.nativeElement.editorCallback = value : undefined;
}
/** @description Specifies or retrieves the placeholder text displayed in the filter value input fields. This placeholder provides guidance or an example to users about the expected input format when entering filter criteria. */
get editorPlaceholder() {
return this.nativeElement ? this.nativeElement.editorPlaceholder : undefined;
}
set editorPlaceholder(value) {
this.nativeElement ? this.nativeElement.editorPlaceholder = value : undefined;
}
/** @description Sets or retrieves the unlockKey, a unique identifier or code required to activate or gain access to the product's features. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Sets or retrieves the current language code (e.g., 'en', 'fr', 'es') used by the application or component. This property works together with the messages property to display localized content based on the selected language. Changing this value updates which set of localized messages will be used. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function that enables you to define custom formatting for messages returned by the Localization Module, allowing you to modify how localized text is displayed based on your specific requirements (e.g., language, placeholders, or dynamic values). */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Specifies or retrieves the maximum number of columns that can be used in a group by operation. If this value is set to null, there is no restriction on the number of columns that can be grouped. */
get maxLevel() {
return this.nativeElement ? this.nativeElement.maxLevel : undefined;
}
set maxLevel(value) {
this.nativeElement ? this.nativeElement.maxLevel = value : undefined;
}
/** @description Defines or retrieves an object containing the localized strings displayed by the widget’s user interface. This property enables you to provide translations for all text labels, messages, and prompts shown by the widget, making it adaptable to different languages and regions. It works in conjunction with the locale property, which determines the active language, allowing the widget to display the appropriate set of translated strings based on the selected locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the logical operator (such as AND or OR) used to combine or evaluate multiple items, determining how their conditions or values are collectively processed. */
get operator() {
return this.nativeElement ? this.nativeElement.operator : undefined;
}
set operator(value) {
this.nativeElement ? this.nativeElement.operator = value : undefined;
}
/** @description When the element is set to 'readonly', users can view its content but are unable to modify or change its value. However, unlike 'disabled' elements, a readonly element remains focusable and its content can still be selected or copied by users. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Specifies or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element’s content and layout are oriented to accommodate locales that use RTL text direction. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description When this property is set to true, the element will be excluded from the page’s tab order and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key, and focus-related events (such as onfocus) will not be triggered for this element. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Gets or sets the initial value of the element. This property allows you to retrieve the element’s starting value or assign a new initial value before user interaction or script modifications. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['applyHandler'] = (event) => { that.onApply.emit(event); };
that.nativeElement.addEventListener('apply', that.eventHandlers['applyHandler']);
that.eventHandlers['cancelHandler'] = (event) => { that.onCancel.emit(event); };
that.nativeElement.addEventListener('cancel', that.eventHandlers['cancelHandler']);
that.eventHandlers['collapseAllHandler'] = (event) => { that.onCollapseAll.emit(event); };
that.nativeElement.addEventListener('collapseAll', that.eventHandlers['collapseAllHandler']);
that.eventHandlers['expandAllHandler'] = (event) => { that.onExpandAll.emit(event); };
that.nativeElement.addEventListener('expandAll', that.eventHandlers['expandAllHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['applyHandler']) {
that.nativeElement.removeEventListener('apply', that.eventHandlers['applyHandler']);
}
if (that.eventHandlers['cancelHandler']) {
that.nativeElement.removeEventListener('cancel', that.eventHandlers['cancelHandler']);
}
if (that.eventHandlers['collapseAllHandler']) {
that.nativeElement.removeEventListener('collapseAll', that.eventHandlers['collapseAllHandler']);
}
if (that.eventHandlers['expandAllHandler']) {
that.nativeElement.removeEventListener('expandAll', that.eventHandlers['expandAllHandler']);
}
}
}
MultiColumnFilterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
MultiColumnFilterPanelComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MultiColumnFilterPanelComponent, selector: "smart-multi-column-filter-panel, [smart-multi-column-filter-panel]", inputs: { animation: "animation", closeButtonPosition: "closeButtonPosition", dataSource: "dataSource", disabled: "disabled", editorCallback: "editorCallback", editorPlaceholder: "editorPlaceholder", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", maxLevel: "maxLevel", messages: "messages", operator: "operator", readonly: "readonly", rightToLeft: "rightToLeft", unfocusable: "unfocusable", value: "value" }, outputs: { onApply: "onApply", onCancel: "onCancel", onCollapseAll: "onCollapseAll", onExpandAll: "onExpandAll" }, exportAs: ["smart-multi-column-filter-panel"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-multi-column-filter-panel', selector: 'smart-multi-column-filter-panel, [smart-multi-column-filter-panel]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], closeButtonPosition: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], editorCallback: [{
type: Input
}], editorPlaceholder: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], maxLevel: [{
type: Input
}], messages: [{
type: Input
}], operator: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], onApply: [{
type: Output
}], onCancel: [{
type: Output
}], onCollapseAll: [{
type: Output
}], onExpandAll: [{
type: Output
}] } });
class MultiColumnFilterPanelModule {
}
MultiColumnFilterPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MultiColumnFilterPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelModule, declarations: [MultiColumnFilterPanelComponent], exports: [MultiColumnFilterPanelComponent] });
MultiColumnFilterPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiColumnFilterPanelModule, decorators: [{
type: NgModule,
args: [{
declarations: [MultiColumnFilterPanelComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [MultiColumnFilterPanelComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MultiColumnFilterPanelComponent, MultiColumnFilterPanelModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-multicolumnfilterpanel.mjs.map