smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
350 lines (342 loc) • 19.1 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.card';
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 CardComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when the user swipes the card downward, indicating a bottom swipe gesture on the card component.
* @param event. The custom event. */
this.onSwipebottom = new EventEmitter();
/** @description This event is triggered whenever the user performs a left swipe gesture on the card, indicating that the card has been dismissed or rejected by swiping it in a leftward direction.
* @param event. The custom event. */
this.onSwipeleft = new EventEmitter();
/** @description This event is triggered whenever a user performs a right-swipe gesture on the card element, typically indicating a positive action such as approval or selection. It allows you to execute custom logic in response to the card being swiped to the right.
* @param event. The custom event. */
this.onSwiperight = new EventEmitter();
/** @description This event is triggered when the user swipes the card upwards (toward the top of the screen), indicating a "swipe up" gesture on the card component.
* @param event. The custom event. */
this.onSwipetop = 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');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled; otherwise, the selected animation mode determines how animations are displayed. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description A callback function that allows you to attach event handlers and implement custom behaviors within the card element. Use this function to interact with or modify the card's content after it has been rendered, such as adding click listeners, updating UI components, or integrating additional logic specific to the card's context. */
get contentHandler() {
return this.nativeElement ? this.nativeElement.contentHandler : undefined;
}
set contentHandler(value) {
this.nativeElement ? this.nativeElement.contentHandler = value : undefined;
}
/** @description This object serves as the data source for populating a card template. Each key corresponds to a placeholder—enclosed in double curly braces within the item's template. The associated values are used to replace these placeholders during rendering, enabling dynamic content injection into the card layout. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Prevents user interactions with the element, such as clicking, typing, or focusing, effectively making the element unresponsive to input events. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies a custom card template for rendering card content. The template can be provided either as a string representing the ID of an '' element present in the DOM, or as a direct reference to an HTMLTemplateElement. Within the template’s HTML content, you may include one or more property placeholders using the double curly braces syntax. During rendering, each placeholder will be dynamically replaced with the corresponding property value from the associated 'dataSource' object. If you set this property using a template ID, the expected type is a string. */
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
}
/** @description Retrieves or assigns the unlockKey used to activate and gain access to the product’s features. This property is typically required for enabling full functionality after purchase or authorization. */
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 set of localized messages, as defined in the messages property, will be used for display. Changing the language updates the interface text to match the corresponding translations in messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description A callback function that allows you to define a custom format for localization messages returned by the Localization Module. Use this to modify or structure the message output according to specific requirements, such as adding prefixes, suffixes, or additional context for improved display or processing. */
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 localized string resources used within the widget's user interface. This enables the widget's labels, messages, and other text elements to be translated and displayed according to the selected language or region, as specified by the locale property. Use this property to provide custom translations and enhance the widget's internationalization support. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and interface components in a right-to-left direction, ensuring proper localization for RTL locales. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the theme applied to the element. The theme controls the overall visual appearance, including colors, fonts, and styles, to ensure a consistent look and feel across the element. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description If set to true, the element will be excluded from keyboard navigation and cannot receive focus via user interaction, such as tabbing or clicking. */
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['swipebottomHandler'] = (event) => { that.onSwipebottom.emit(event); };
that.nativeElement.addEventListener('swipebottom', that.eventHandlers['swipebottomHandler']);
that.eventHandlers['swipeleftHandler'] = (event) => { that.onSwipeleft.emit(event); };
that.nativeElement.addEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);
that.eventHandlers['swiperightHandler'] = (event) => { that.onSwiperight.emit(event); };
that.nativeElement.addEventListener('swiperight', that.eventHandlers['swiperightHandler']);
that.eventHandlers['swipetopHandler'] = (event) => { that.onSwipetop.emit(event); };
that.nativeElement.addEventListener('swipetop', that.eventHandlers['swipetopHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['swipebottomHandler']) {
that.nativeElement.removeEventListener('swipebottom', that.eventHandlers['swipebottomHandler']);
}
if (that.eventHandlers['swipeleftHandler']) {
that.nativeElement.removeEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);
}
if (that.eventHandlers['swiperightHandler']) {
that.nativeElement.removeEventListener('swiperight', that.eventHandlers['swiperightHandler']);
}
if (that.eventHandlers['swipetopHandler']) {
that.nativeElement.removeEventListener('swipetop', that.eventHandlers['swipetopHandler']);
}
}
}
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
CardComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: CardComponent, selector: "smart-card, [smart-card]", inputs: { animation: "animation", contentHandler: "contentHandler", dataSource: "dataSource", disabled: "disabled", itemTemplate: "itemTemplate", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme", unfocusable: "unfocusable" }, outputs: { onSwipebottom: "onSwipebottom", onSwipeleft: "onSwipeleft", onSwiperight: "onSwiperight", onSwipetop: "onSwipetop" }, exportAs: ["smart-card"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-card', selector: 'smart-card, [smart-card]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], contentHandler: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], itemTemplate: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], onSwipebottom: [{
type: Output
}], onSwipeleft: [{
type: Output
}], onSwiperight: [{
type: Output
}], onSwipetop: [{
type: Output
}] } });
class CardModule {
}
CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardModule, declarations: [CardComponent], exports: [CardComponent] });
CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CardModule, decorators: [{
type: NgModule,
args: [{
declarations: [CardComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [CardComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CardComponent, CardModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-card.mjs.map