smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
462 lines (454 loc) • 23.5 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.filterpanel';
import { __awaiter } from 'tslib';
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 FilterPanelComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when the user cancels or clears the current set of applied filters, discarding any active filtering criteria.
* @param event. The custom event. */
this.onCancel = new EventEmitter();
/** @description This event is triggered whenever all active filtering criteria are removed, resulting in the display of the complete, unfiltered dataset. It occurs specifically when the user or application clears the current filters, resetting the view to its default state.
* @param event. The custom event. */
this.onClear = new EventEmitter();
/** @description This event is triggered whenever the user applies new settings or changes to the filter panel. It occurs after the filter options have been selected and confirmed, signaling that the current filter criteria should be used to update displayed data or content accordingly.
* @param event. The custom event. */
this.onFilter = 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-filter-panel');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If assigned any other valid value, the corresponding animation mode is applied. Use this property to control whether animations are active or turned off for the element. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies the set of operation buttons that will be displayed in the filter panel, allowing users to perform actions such as applying, resetting, or clearing filters. Adjusting this setting controls which interactive options are available to users directly within the filter interface. */
get buttons() {
return this.nativeElement ? this.nativeElement.buttons : undefined;
}
set buttons(value) {
this.nativeElement ? this.nativeElement.buttons = value : undefined;
}
/** @description An array in 'excel' mode that specifies the dataset used to extract unique filter values. The expected format is a JSON array of objects, where each object represents a data row with key-value pairs corresponding to column names and their respective values. For example:'''json[ { "name": "Alice", "age": 30 }, { "name": "Bob", "age": 25 }]'''Unique filter values will be derived from the property values within these objects. */
get data() {
return this.nativeElement ? this.nativeElement.data : undefined;
}
set data(value) {
this.nativeElement ? this.nativeElement.data = value : undefined;
}
/** @description Provides a detailed description of a data field that contains values resulting from the application of specific filter criteria, indicating that only data meeting those criteria are included in this field. */
get dataField() {
return this.nativeElement ? this.nativeElement.dataField : undefined;
}
set dataField(value) {
this.nativeElement ? this.nativeElement.dataField = value : undefined;
}
/** @description When the property is assigned an array, it specifies a custom set of filter values that will be displayed to the user, overriding the default filter list. If the property is assigned a callback function, it enables users to dynamically add their own filter values in addition to the default ones. In this latter case, you must also implement the evaluateFilterExpression function to handle evaluation of custom filters. Please note that the .dataSource property is only supported when mode is set to 'excel'. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Controls the visibility of the filter panel, allowing you to show or hide the panel as needed. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Callback function invoked during the filter panel operation, allowing developers to implement custom evaluation logic for filtering data. This function receives relevant data parameters and should return a boolean indicating whether an item meets the filter criteria. */
get evaluateFilterExpression() {
return this.nativeElement ? this.nativeElement.evaluateFilterExpression : undefined;
}
set evaluateFilterExpression(value) {
this.nativeElement ? this.nativeElement.evaluateFilterExpression = value : undefined;
}
/** @description Specifies the type of filter to be applied, determining how data will be sorted, displayed, or restricted based on the selected filter criteria. */
get filterType() {
return this.nativeElement ? this.nativeElement.filterType : undefined;
}
set filterType(value) {
this.nativeElement ? this.nativeElement.filterType = value : undefined;
}
/** @description Specifies the date format pattern applied when the filterType is set to 'Date'. This string determines how date values are parsed and displayed within the filter, following standard date formatting conventions (e.g., 'YYYY-MM-DD'). */
get formatString() {
return this.nativeElement ? this.nativeElement.formatString : undefined;
}
set formatString(value) {
this.nativeElement ? this.nativeElement.formatString = value : undefined;
}
/** @description Gets or sets the unlockKey value used to activate and unlock access to the product’s features. The unlockKey is typically provided after purchase or authorization and is required to enable full product functionality. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current language setting. This property determines which language is used for displaying content and should be used together with the messages property to provide the appropriate localized messages for users. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Specifies the names of the fields included in the filtered element. This determines which properties or attributes of the element are returned after applying the filter criteria. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Defines the operational mode of the filter panel, specifying how the panel behaves or displays filters within the user interface. */
get mode() {
return this.nativeElement ? this.nativeElement.mode : undefined;
}
set mode(value) {
this.nativeElement ? this.nativeElement.mode = value : undefined;
}
/** @description If the element is set to readonly, users can view its content but cannot modify, edit, or interact with the element’s value. However, the element can still receive focus and its content can be selected or copied. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Specifies the visual theme applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, to ensure a consistent look and feel across the interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description When set to true, the element becomes unfocusable, meaning it cannot receive keyboard or mouse focus during user interaction or through JavaScript. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Removes all active filters currently applied, returning the view to its unfiltered state and displaying the complete set of data.
*/
cancel() {
if (this.nativeElement.isRendered) {
this.nativeElement.cancel();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.cancel();
});
}
}
/** @description Removes all active filters and displays the complete, unfiltered data set.
*/
clear() {
if (this.nativeElement.isRendered) {
this.nativeElement.clear();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clear();
});
}
}
/** @description Assesses the given filter condition by applying it to a specified dataset or input, and determines whether the data meets the criteria defined by the filter. Returns a boolean value indicating if the filter evaluates to true or false for the provided input.
* @param {any} value. The evalueated element in filter panel.
*/
evaluate(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.evaluate(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.evaluate(value);
});
}
}
/** @description Applies the currently selected filter criteria to update and display the relevant data set.
*/
filter() {
if (this.nativeElement.isRendered) {
this.nativeElement.filter();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.filter();
});
}
}
/** @description Retrieves the current state of all active filters, including their selected values and configuration settings. This provides an overview of how data is being filtered at the present moment.
* @returns {any}
*/
getState() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getState();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getStateSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.getState();
}
return null;
}
/** @description Restores a previously saved filter configuration, applying all selected filter options and criteria to return the interface to its earlier state.
* @param {any} state. An object returned by the method getState.
*/
loadState(state) {
if (this.nativeElement.isRendered) {
this.nativeElement.loadState(state);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.loadState(state);
});
}
}
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['cancelHandler'] = (event) => { that.onCancel.emit(event); };
that.nativeElement.addEventListener('cancel', that.eventHandlers['cancelHandler']);
that.eventHandlers['clearHandler'] = (event) => { that.onClear.emit(event); };
that.nativeElement.addEventListener('clear', that.eventHandlers['clearHandler']);
that.eventHandlers['filterHandler'] = (event) => { that.onFilter.emit(event); };
that.nativeElement.addEventListener('filter', that.eventHandlers['filterHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['cancelHandler']) {
that.nativeElement.removeEventListener('cancel', that.eventHandlers['cancelHandler']);
}
if (that.eventHandlers['clearHandler']) {
that.nativeElement.removeEventListener('clear', that.eventHandlers['clearHandler']);
}
if (that.eventHandlers['filterHandler']) {
that.nativeElement.onfilterHandler = null;
}
}
}
FilterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
FilterPanelComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: FilterPanelComponent, selector: "smart-filter-panel, [smart-filter-panel]", inputs: { animation: "animation", buttons: "buttons", data: "data", dataField: "dataField", dataSource: "dataSource", disabled: "disabled", evaluateFilterExpression: "evaluateFilterExpression", filterType: "filterType", formatString: "formatString", unlockKey: "unlockKey", locale: "locale", messages: "messages", mode: "mode", readonly: "readonly", theme: "theme", unfocusable: "unfocusable" }, outputs: { onCancel: "onCancel", onClear: "onClear", onFilter: "onFilter" }, exportAs: ["smart-filter-panel"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-filter-panel', selector: 'smart-filter-panel, [smart-filter-panel]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], buttons: [{
type: Input
}], data: [{
type: Input
}], dataField: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], evaluateFilterExpression: [{
type: Input
}], filterType: [{
type: Input
}], formatString: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], messages: [{
type: Input
}], mode: [{
type: Input
}], readonly: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], onCancel: [{
type: Output
}], onClear: [{
type: Output
}], onFilter: [{
type: Output
}] } });
class FilterPanelModule {
}
FilterPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
FilterPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelModule, declarations: [FilterPanelComponent], exports: [FilterPanelComponent] });
FilterPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: FilterPanelModule, decorators: [{
type: NgModule,
args: [{
declarations: [FilterPanelComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [FilterPanelComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FilterPanelComponent, FilterPanelModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-filterpanel.mjs.map