smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
312 lines (304 loc) • 16.8 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 SortPanelComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when the user clicks the "Apply" button, indicating their intent to submit or confirm their selected options or changes. It can be used to handle form submissions, apply filters, or process user input following the click action.
* @param event. The custom event. */
this.onApply = new EventEmitter();
/** @description This event is triggered when a user clicks the "Cancel" button, allowing you to execute custom logic—such as resetting form fields, closing dialog boxes, or aborting an action—in response to the cancellation request.
* @param event. The custom event. */
this.onCancel = 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-sort-panel');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies the animation mode for the component. You can retrieve or assign a value to this property. When set to 'none', all animations are disabled, and the component will appear or update instantly without any transition effects. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Sets or retrieves the position of the close button within each item of the sort panel, allowing you to specify where the close button appears (such as left, right, or a custom location) for improved user interface customization. */
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 displayed in the sort panel.Each entry in the dataSource array represents a sortable column and is defined as an object with the following properties: dataField: The unique identifier for the column to be sorted, typically corresponding to a key in your dataset. dataType: The type of data contained in the column (e.g., string, number, date), which can influence sorting behavior. label: The display name of the column, as shown in the column selection menu of the sort panel. icon: The CSS class name applied to the column’s visual representation in the selection menu, allowing for custom icons or symbols. sortDirection: The initial sort direction for the column. Accepted values are 'ascending' and 'descending'. sortIndex: Determines the initial sort order among multiple columns; columns are sorted in ascending order based on this index. A value of -1 means the column is not sorted by default. */
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 sort panel, allowing users to enable (display) or disable (hide) the panel for sorting data within the interface. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Gets or sets the unlockKey property, which is used to authenticate and grant access to the product’s locked features. This key must be provided to unlock and use the product. */
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 code. This property determines which language is used when displaying messages, working in combination with the messages property to select the appropriate localized content. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description A callback function associated with the localization module, typically used to handle language changes, update translations, or respond to localization-related events within the application. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized or translated for different languages. This property works together with the locale property to support localization, enabling the widget to display content appropriate for the user’s selected or detected language. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description If the element is set to readonly, users will be able to view its contents but will not be able to modify or edit its value. However, the element may still receive focus and allow text selection, depending on its type. No user interactions will result in changes to the element's data. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description If set to true, the element will be excluded from the page's tab order and cannot receive keyboard focus, making it inaccessible via keyboard navigation or programmatic focusing methods such as element.focus(). */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = 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']);
}
/** @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']);
}
}
}
SortPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
SortPanelComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: SortPanelComponent, selector: "smart-sort-panel, [smart-sort-panel]", inputs: { animation: "animation", closeButtonPosition: "closeButtonPosition", dataSource: "dataSource", disabled: "disabled", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", readonly: "readonly", unfocusable: "unfocusable" }, outputs: { onApply: "onApply", onCancel: "onCancel" }, exportAs: ["smart-sort-panel"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-sort-panel', selector: 'smart-sort-panel, [smart-sort-panel]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], closeButtonPosition: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], readonly: [{
type: Input
}], unfocusable: [{
type: Input
}], onApply: [{
type: Output
}], onCancel: [{
type: Output
}] } });
class SortPanelModule {
}
SortPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SortPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelModule, declarations: [SortPanelComponent], exports: [SortPanelComponent] });
SortPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortPanelModule, decorators: [{
type: NgModule,
args: [{
declarations: [SortPanelComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [SortPanelComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Smart, SortPanelComponent, SortPanelModule };
//# sourceMappingURL=smart-webcomponents-angular-sortpanel.mjs.map