smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
714 lines (706 loc) • 40.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.cardview';
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 CardViewComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever a user applies a filter to the data set, typically by selecting filter criteria or options in the interface. It signals that the displayed data has been updated based on the chosen filter parameters, allowing developers to execute additional logic in response, such as refreshing the view or fetching new data.
* @param event. The custom event. */
this.onFilter = new EventEmitter();
/** @description This event is triggered whenever a sorting action is performed on the data set, such as when a user updates the sorting order of a table or list by clicking on a column header or selecting a sort option.
* @param event. The custom event. */
this.onSort = new EventEmitter();
/** @description This event is triggered immediately after the window has been successfully opened, allowing you to execute code in response to the window becoming visible and accessible to the user. It is typically used to initialize resources, update the user interface, or perform actions that should occur as soon as the window appears.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is fired just before the window is opened, giving you an opportunity to perform additional logic or checks. To prevent the window from opening, call event.preventDefault() within your event handler. If preventDefault() is not called, the window will open as usual. This allows you to control whether or not the window opening operation proceeds based on your custom criteria.
* @param event. The custom event. */
this.onOpening = new EventEmitter();
/** @description This event is triggered immediately when the window is closed by the user or programmatically, allowing scripts to execute any necessary cleanup operations or final actions before the window is terminated.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is triggered just before the window begins the closing process. It gives developers an opportunity to perform actions or prompt the user before the window actually closes. If you want to prevent the window from closing—for example, to confirm with the user or save data—you can call event.preventDefault() inside the event handler function. This will cancel the default close operation and keep the window open.
* @param event. The custom event. */
this.onClosing = new EventEmitter();
/** @description This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button or starting a touch gesture. It signals the beginning of the card's movement, allowing developers to implement custom behavior such as visual feedback or updating drag-related state.
* @param event. The custom event. */
this.onDragStart = new EventEmitter();
/** @description This event is triggered continuously while the user is actively dragging the card element with their cursor or finger, allowing you to track the card's position and respond to movement in real time.
* @param event. The custom event. */
this.onDragging = new EventEmitter();
/** @description This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button (or touching and holding on a touchscreen) and then moving the card to a different position within the interface.
* @param event. The custom event. */
this.onDragEnd = 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-card-view');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Controls the visibility and functionality of the button used to add new cards to the interface. When enabled, users can click the button to create and add additional cards; when disabled, the button is hidden or inactive, preventing new card additions. */
get addNewButton() {
return this.nativeElement ? this.nativeElement.addNewButton : undefined;
}
set addNewButton(value) {
this.nativeElement ? this.nativeElement.addNewButton = value : undefined;
}
/** @description Enables users to rearrange the order of cards within the interface by clicking and dragging individual cards to new positions. This drag-and-drop functionality provides an intuitive way to customize the card sequence. */
get allowDrag() {
return this.nativeElement ? this.nativeElement.allowDrag : undefined;
}
set allowDrag(value) {
this.nativeElement ? this.nativeElement.allowDrag = value : undefined;
}
/** @description Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other valid values enables the corresponding animation behavior. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies the height value assigned to each card component, determining how tall each card will appear within the user interface. */
get cardHeight() {
return this.nativeElement ? this.nativeElement.cardHeight : undefined;
}
set cardHeight(value) {
this.nativeElement ? this.nativeElement.cardHeight = value : undefined;
}
/** @description Specifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards. */
get cellOrientation() {
return this.nativeElement ? this.nativeElement.cellOrientation : undefined;
}
set cellOrientation(value) {
this.nativeElement ? this.nativeElement.cellOrientation = value : undefined;
}
/** @description Enables users to expand or collapse the card’s content, allowing for a more compact view when the content is hidden and revealing additional details when expanded. */
get collapsible() {
return this.nativeElement ? this.nativeElement.collapsible : undefined;
}
set collapsible(value) {
this.nativeElement ? this.nativeElement.collapsible = value : undefined;
}
/** @description Specifies the configuration properties for table columns: label — Defines the display name or header text for the column as shown in the user interface. dataField — Specifies the key or property name in the data source that this column should display. icon — Allows you to assign an icon (e.g., as a URL or icon class) to be displayed in the column header or alongside cell values. formatSettings — Provides formatting options for the column's values, such as date/time formats, number precision, or custom display rules. formatFunction — Accepts a callback function to apply custom transformations or styling to the column's cell values before rendering. */
get columns() {
return this.nativeElement ? this.nativeElement.columns : undefined;
}
set columns(value) {
this.nativeElement ? this.nativeElement.columns = value : undefined;
}
/** @description Specifies the data field that should be used as the cover image or primary visual representation for the item. */
get coverField() {
return this.nativeElement ? this.nativeElement.coverField : undefined;
}
set coverField(value) {
this.nativeElement ? this.nativeElement.coverField = value : undefined;
}
/** @description Provides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'. */
get coverMode() {
return this.nativeElement ? this.nativeElement.coverMode : undefined;
}
set coverMode(value) {
this.nativeElement ? this.nativeElement.coverMode = value : undefined;
}
/** @description Specifies the origin or endpoint from which the item's data is retrieved for display within the card component. This property defines where the card fetches its content, such as a local data object, a remote API, or a database, ensuring the card displays up-to-date and relevant information. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Configures the grid's data source options, specifying how data should be loaded and managed when the dataSource property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors. */
get dataSourceSettings() {
return this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;
}
set dataSourceSettings(value) {
this.nativeElement ? this.nativeElement.dataSourceSettings = value : undefined;
}
/** @description Enables the functionality for users to edit the content of individual cards. When this option is active, users can modify card details such as titles, descriptions, and other editable fields directly within the card interface. */
get editable() {
return this.nativeElement ? this.nativeElement.editable : undefined;
}
set editable(value) {
this.nativeElement ? this.nativeElement.editable = value : undefined;
}
/** @description Sets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches. */
get headerPosition() {
return this.nativeElement ? this.nativeElement.headerPosition : undefined;
}
set headerPosition(value) {
this.nativeElement ? this.nativeElement.headerPosition = value : undefined;
}
/** @description Sets or retrieves the unlockKey value, a unique key required to unlock and gain access to the product's full features or content. Use this property to assign a new unlock key or to obtain the current key in use. */
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 locale (language and regional settings) to be used by the component. This is typically used together with the messages property, which provides localized text or translations for different locales. By specifying the locale, the component displays messages, labels, and other text elements in the appropriate language and format. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages. This property works in conjunction with the locale property to enable localization, so you can provide translations for various UI elements based on the user's selected language or region. Use this option to specify or override default widget labels and messages for internationalization purposes. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), allowing proper alignment and rendering for languages and locales that use RTL scripts (such as Arabic or Hebrew). This ensures the element displays content correctly for users in RTL language environments. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, spacing, and style variations, ensuring a consistent and cohesive look for the element within the user interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Provides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors. */
get scrolling() {
return this.nativeElement ? this.nativeElement.scrolling : undefined;
}
set scrolling(value) {
this.nativeElement ? this.nativeElement.scrolling = value : undefined;
}
/** @description Specifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item. */
get titleField() {
return this.nativeElement ? this.nativeElement.titleField : undefined;
}
set titleField(value) {
this.nativeElement ? this.nativeElement.titleField = value : undefined;
}
/** @description Enables advanced filtering functionality, allowing users to refine and display data based on specific criteria such as category, date range, status, or custom attributes. This feature improves data navigation and helps users quickly locate relevant information.
* @param {string[]} filters. Filter information
* @param {string} operator?. Logical operator between the filters of different fields
*/
addFilter(filters, operator) {
if (this.nativeElement.isRendered) {
this.nativeElement.addFilter(filters, operator);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addFilter(filters, operator);
});
}
}
/** @description Creates and inserts a new record into the database or data collection, initializing all required fields with the provided values.
* @param {number | string} recordId?. The id of the record to add
* @param {any} data?. The data of the record to add
* @param {string} position?. The position to add the record to. Possible values: 'first' and 'last'.
*/
addRecord(recordId, data, position) {
if (this.nativeElement.isRendered) {
this.nativeElement.addRecord(recordId, data, position);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addRecord(recordId, data, position);
});
}
}
/** @description Enables sorting functionality, allowing users to arrange data in ascending or descending order based on specified fields or columns. This feature enhances the user experience by making it easier to organize, locate, and analyze information within lists or tables.
* @param {[] | string} dataFields. The data field(s) to sort by
* @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) by
*/
addSort(dataFields, orderBy) {
if (this.nativeElement.isRendered) {
this.nativeElement.addSort(dataFields, orderBy);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addSort(dataFields, orderBy);
});
}
}
/** @description Initiates an edit transaction, allowing changes to be made to the data. This operation typically marks the start of a sequence where modifications can be performed, and may require committing or canceling the changes to finalize or discard the edits.
* @param {number | string} recordId. The id of the record to edit
*/
beginEdit(recordId) {
if (this.nativeElement.isRendered) {
this.nativeElement.beginEdit(recordId);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.beginEdit(recordId);
});
}
}
/** @description Terminates the ongoing edit session and reverts any unsaved changes, ensuring that all modifications made during the current operation are discarded and the original state is restored.
*/
cancelEdit() {
if (this.nativeElement.isRendered) {
this.nativeElement.cancelEdit();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.cancelEdit();
});
}
}
/** @description Closes any currently open header panel, such as a dropdown menu or navigation panel, ensuring that all header-related overlays are hidden from view.
*/
closePanel() {
if (this.nativeElement.isRendered) {
this.nativeElement.closePanel();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.closePanel();
});
}
}
/** @description Finalizes the current editing session by committing all modifications made and persisting the changes to the data source or storage.
*/
endEdit() {
if (this.nativeElement.isRendered) {
this.nativeElement.endEdit();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.endEdit();
});
}
}
/** @description Ensures that a specified record is brought into view by automatically scrolling to its position on the page. If the operation is successful, the method returns the HTML element representing the card associated with that record, allowing for further manipulation or interaction within the DOM.
* @param {number | string} recordId. The id of the record to scroll to
* @returns {HTMLElement}
*/
async ensureVisible(recordId) {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.ensureVisible(recordId);
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
ensureVisibleSync(recordId) {
if (this.nativeElement.isRendered) {
return this.nativeElement.ensureVisible(recordId);
}
return null;
}
/** @description Opens the "Customize Cards" dropdown panel, allowing users to access and modify card display settings.
*/
openCustomizePanel() {
if (this.nativeElement.isRendered) {
this.nativeElement.openCustomizePanel();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.openCustomizePanel();
});
}
}
/** @description Displays the "Filter" header panel as a drop-down menu, allowing users to view and select filtering options for the current data set.
*/
openFilterPanel() {
if (this.nativeElement.isRendered) {
this.nativeElement.openFilterPanel();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.openFilterPanel();
});
}
}
/** @description Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the current data view.
*/
openSortPanel() {
if (this.nativeElement.isRendered) {
this.nativeElement.openSortPanel();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.openSortPanel();
});
}
}
/** @description Removes any active filters, displaying the full, unfiltered dataset.
*/
removeFilter() {
if (this.nativeElement.isRendered) {
this.nativeElement.removeFilter();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeFilter();
});
}
}
/** @description Deletes a specific record from the database or data collection, permanently removing all associated data for that entry.
* @param {number | string} recordId. The id of the record to remove
*/
removeRecord(recordId) {
if (this.nativeElement.isRendered) {
this.nativeElement.removeRecord(recordId);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeRecord(recordId);
});
}
}
/** @description Disables any active sorting on the data, reverting the items to their original order.
*/
removeSort() {
if (this.nativeElement.isRendered) {
this.nativeElement.removeSort();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeSort();
});
}
}
/** @description Displays a single vertical column within the layout, typically used to organize content or interface elements in a structured manner. This column can contain text, images, or other components, and its appearance (such as width, alignment, and styling) can be customized through additional properties or CSS classes.
* @param {string} dataField. The data field of the column
*/
showColumn(dataField) {
if (this.nativeElement.isRendered) {
this.nativeElement.showColumn(dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.showColumn(dataField);
});
}
}
/** @description Applies sorting to the CardView based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of CardView sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.
* @param {string} dataField. The data field of the column to sort, e.g., 'firstName'.
* @param {string | null} sortOrder. Sort order to apply: 'asc' for ascending, 'desc' for descending, or null to remove sorting.
*/
sortBy(dataField, sortOrder) {
if (this.nativeElement.isRendered) {
this.nativeElement.sortBy(dataField, sortOrder);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.sortBy(dataField, sortOrder);
});
}
}
/** @description Enhances and applies custom filter criteria to a specific column within the cardview. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `cardview.setFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.
* @param {string} dataField. The data field name of the column to filter, e.g., 'firstName'.
* @param {string} filter. The filter expression(s) to apply. Examples include 'startsWith B', ['contains Andrew or contains Nancy'], or ['quantity', '<= 3 and >= 8']. Supported operators: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
*/
setFilter(dataField, filter) {
if (this.nativeElement.isRendered) {
this.nativeElement.setFilter(dataField, filter);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.setFilter(dataField, filter);
});
}
}
/** @description Sets the locale of a component.
* @param {string} locale. The locale abbreviation. For example: 'de'.
* @param {any} messages?. Object containing the locale messages.
*/
setLocale(locale, messages) {
if (this.nativeElement.isRendered) {
this.nativeElement.setLocale(locale, messages);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.setLocale(locale, messages);
});
}
}
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['filterHandler'] = (event) => { that.onFilter.emit(event); };
that.nativeElement.addEventListener('filter', that.eventHandlers['filterHandler']);
that.eventHandlers['sortHandler'] = (event) => { that.onSort.emit(event); };
that.nativeElement.addEventListener('sort', that.eventHandlers['sortHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['openingHandler'] = (event) => { that.onOpening.emit(event); };
that.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['dragStartHandler'] = (event) => { that.onDragStart.emit(event); };
that.nativeElement.addEventListener('dragStart', that.eventHandlers['dragStartHandler']);
that.eventHandlers['draggingHandler'] = (event) => { that.onDragging.emit(event); };
that.nativeElement.addEventListener('dragging', that.eventHandlers['draggingHandler']);
that.eventHandlers['dragEndHandler'] = (event) => { that.onDragEnd.emit(event); };
that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['filterHandler']) {
that.nativeElement.onfilterHandler = null;
}
if (that.eventHandlers['sortHandler']) {
that.nativeElement.removeEventListener('sort', that.eventHandlers['sortHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['openingHandler']) {
that.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['dragStartHandler']) {
that.nativeElement.removeEventListener('dragStart', that.eventHandlers['dragStartHandler']);
}
if (that.eventHandlers['draggingHandler']) {
that.nativeElement.removeEventListener('dragging', that.eventHandlers['draggingHandler']);
}
if (that.eventHandlers['dragEndHandler']) {
that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
}
}
CardViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
CardViewComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: CardViewComponent, selector: "smart-card-view, [smart-card-view]", inputs: { addNewButton: "addNewButton", allowDrag: "allowDrag", animation: "animation", cardHeight: "cardHeight", cellOrientation: "cellOrientation", collapsible: "collapsible", columns: "columns", coverField: "coverField", coverMode: "coverMode", dataSource: "dataSource", dataSourceSettings: "dataSourceSettings", editable: "editable", headerPosition: "headerPosition", unlockKey: "unlockKey", locale: "locale", messages: "messages", rightToLeft: "rightToLeft", theme: "theme", scrolling: "scrolling", titleField: "titleField" }, outputs: { onFilter: "onFilter", onSort: "onSort", onOpen: "onOpen", onOpening: "onOpening", onClose: "onClose", onClosing: "onClosing", onDragStart: "onDragStart", onDragging: "onDragging", onDragEnd: "onDragEnd" }, exportAs: ["smart-card-view"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-card-view', selector: 'smart-card-view, [smart-card-view]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { addNewButton: [{
type: Input
}], allowDrag: [{
type: Input
}], animation: [{
type: Input
}], cardHeight: [{
type: Input
}], cellOrientation: [{
type: Input
}], collapsible: [{
type: Input
}], columns: [{
type: Input
}], coverField: [{
type: Input
}], coverMode: [{
type: Input
}], dataSource: [{
type: Input
}], dataSourceSettings: [{
type: Input
}], editable: [{
type: Input
}], headerPosition: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}], scrolling: [{
type: Input
}], titleField: [{
type: Input
}], onFilter: [{
type: Output
}], onSort: [{
type: Output
}], onOpen: [{
type: Output
}], onOpening: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onDragStart: [{
type: Output
}], onDragging: [{
type: Output
}], onDragEnd: [{
type: Output
}] } });
class CardViewModule {
}
CardViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CardViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewModule, declarations: [CardViewComponent], exports: [CardViewComponent] });
CardViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardViewModule, decorators: [{
type: NgModule,
args: [{
declarations: [CardViewComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [CardViewComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CardViewComponent, CardViewModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-cardview.mjs.map