smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
533 lines (525 loc) • 30.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.toast';
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 ToastComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when a user clicks on a toast notification. It allows you to execute custom logic in response to the user's interaction with the toast item, such as redirecting to a specific page, dismissing the notification, or performing other actions.
* @param event. The custom event. */
this.onItemClick = new EventEmitter();
/** @description This event is triggered whenever a toast notification is closed, either by user interaction (such as clicking the close button) or programmatically through code. It allows developers to execute custom logic or cleanup actions after the toast has been dismissed from the user interface.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is triggered each time a toast notification becomes visible to the user, indicating that the toast item has been fully opened and is now displayed on the screen.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is triggered when a user performs a swipe-down gesture (swipe bottom) on a toast notification item. It can be used to detect and handle user interactions that involve dismissing or interacting with toast messages via a downward swipe.
* @param event. The custom event. */
this.onSwipebottom = new EventEmitter();
/** @description This event is triggered when a user performs a swipe left gesture on a toast notification item. It allows you to execute custom actions in response to the swipe left interaction with the toast component.
* @param event. The custom event. */
this.onSwipeleft = new EventEmitter();
/** @description This event is triggered when a user performs a swipe-right gesture on a toast notification item. It allows you to handle interactions that occur specifically when the user swipes right on a toast component.
* @param event. The custom event. */
this.onSwiperight = new EventEmitter();
/** @description This event is triggered when a user performs an upward swipe gesture (swipe top) on a toast notification item.
* @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-toast');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. Otherwise, specifying a valid animation mode enables corresponding transition effects. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Defines the container element in which new toast notifications will appear. The value can be either an HTMLElement directly, or a string representing the id of a DOM element. This property determines where toast items are rendered in the DOM.Note: When used together with the modal and position properties, container takes precedence over position but has lower priority than modal. This means that if modal is enabled, it overrides container; if not, the specified container is used instead of the position property. */
get appendTo() {
return this.nativeElement ? this.nativeElement.appendTo : undefined;
}
set appendTo(value) {
this.nativeElement ? this.nativeElement.appendTo = value : undefined;
}
/** @description Determines whether the toast notification will automatically close after the duration specified by the autoCloseDelay property. If enabled, the toast will dismiss itself once the set time has elapsed; otherwise, it will remain visible until manually closed by the user. */
get autoClose() {
return this.nativeElement ? this.nativeElement.autoClose : undefined;
}
set autoClose(value) {
this.nativeElement ? this.nativeElement.autoClose = value : undefined;
}
/** @description Specifies or retrieves the time interval (in milliseconds) after which the toast notification will automatically dismiss itself. This property is effective only when the autoClose property is set to true; otherwise, the toast will remain visible until manually closed. */
get autoCloseDelay() {
return this.nativeElement ? this.nativeElement.autoCloseDelay : undefined;
}
set autoCloseDelay(value) {
this.nativeElement ? this.nativeElement.autoCloseDelay = value : undefined;
}
/** @description Determines whether the toast notification should automatically appear as soon as the widget is initialized, without requiring any user interaction or additional trigger. */
get autoOpen() {
return this.nativeElement ? this.nativeElement.autoOpen : undefined;
}
set autoOpen(value) {
this.nativeElement ? this.nativeElement.autoOpen = value : undefined;
}
/** @description When the disabled property is set to true, all user interactions with toast items—such as clicking, hovering, or dismissing—will be prevented. The toast items will appear inactive and will not respond to any user actions until disabled is set to false. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies a custom CSS class name or multiple class names to override the default icon styling. To apply multiple classes, separate each class name with a space (e.g., "fa fa-user"). This property is particularly useful when integrating icons from third-party icon libraries like Bootstrap Icons, Font Awesome, or Material Icons, allowing you to fully control the icon's appearance by leveraging external style definitions. */
get iconClass() {
return this.nativeElement ? this.nativeElement.iconClass : undefined;
}
set iconClass(value) {
this.nativeElement ? this.nativeElement.iconClass = value : undefined;
}
/** @description Allows you to add one or more custom CSS classes to Toast items by specifying class names separated with spaces. This enables you to style individual Toasts using predefined classes from third-party CSS frameworks (such as Bootstrap), or your own custom styles, for greater flexibility and consistency in appearance. */
get itemClass() {
return this.nativeElement ? this.nativeElement.itemClass : undefined;
}
set itemClass(value) {
this.nativeElement ? this.nativeElement.itemClass = value : undefined;
}
/** @description Defines a custom template for rendering each item, allowing you to control the appearance and structure of items displayed in the list or component. This enables the use of personalized HTML, styling, and dynamic content for each item, rather than relying on the default rendering format. */
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
}
/** @description Defines or retrieves the unlockKey, a unique value required to activate or gain access to the product’s features or content. */
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 for localization purposes. This property determines which set of translations from the messages object is used, ensuring that the appropriate language-specific content is displayed or accessed. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function used by the localization module to handle language-specific operations, such as loading translation files, switching languages, or updating localized content dynamically 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 customizable text strings used throughout the widget’s user interface, enabling localization and internationalization of displayed messages, labels, and prompts. Typically used alongside the locale property to support multiple languages and regional formats. This property allows developers to override default strings with translations or custom wording suitable for different locales. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description When modal mode is enabled, the toast notification is displayed at the center of the screen, overlaying all other page content. The modal property takes precedence over both the position and appendTo properties. If modal is set to true, any values specified for position and appendTo will be ignored, and the toast will always appear centered in a modal overlay. */
get modal() {
return this.nativeElement ? this.nativeElement.modal : undefined;
}
set modal(value) {
this.nativeElement ? this.nativeElement.modal = value : undefined;
}
/** @description Specifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead. */
get position() {
return this.nativeElement ? this.nativeElement.position : undefined;
}
set position(value) {
this.nativeElement ? this.nativeElement.position = value : undefined;
}
/** @description If the element has the "readonly" attribute, users cannot modify its value; the content is visible but cannot be changed or edited through user input. However, users may still be able to interact with the element in limited ways, such as copying its text, but any form of altering the value is disabled. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Defines or retrieves a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's layout and text direction are modified to accommodate locales that use RTL scripts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines whether the close button is displayed on the toast notification. When set to true, the close button appears, allowing users to manually dismiss the toast. When set to false, the close button is hidden, and the toast can only be dismissed programmatically or by other means. This property can be used to retrieve the current visibility state or update it as needed. */
get showCloseButton() {
return this.nativeElement ? this.nativeElement.showCloseButton : undefined;
}
set showCloseButton(value) {
this.nativeElement ? this.nativeElement.showCloseButton = value : undefined;
}
/** @description Specifies the theme to be applied to the element. The selected theme controls the visual appearance of the element, including colors, fonts, and overall styling, ensuring a consistent look and feel throughout the user interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Applies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience. */
get type() {
return this.nativeElement ? this.nativeElement.type : undefined;
}
set type(value) {
this.nativeElement ? this.nativeElement.type = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation or programmatic focus methods (such as calling element.focus()). */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Assigns a specific text value to the toast notification, determining the message displayed to users within the toast item. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Closes all currently displayed toast notifications, ensuring that any active toast messages are dismissed from the user interface.
*/
closeAll() {
if (this.nativeElement.isRendered) {
this.nativeElement.closeAll();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.closeAll();
});
}
}
/** @description Closes a specific toast notification. This action targets and dismisses the designated toast message from the user interface, ensuring that only the selected toast item is removed without affecting others.
* @param {HTMLElement | string} item. The toast item (or its id) to remove.
*/
closeItem(item) {
if (this.nativeElement.isRendered) {
this.nativeElement.closeItem(item);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.closeItem(item);
});
}
}
/** @description Closes the most recently displayed toast notification, removing it from the user's view.
*/
closeLast() {
if (this.nativeElement.isRendered) {
this.nativeElement.closeLast();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.closeLast();
});
}
}
/** @description Displays a new toast notification and returns the corresponding smart-toast-item instance representing the newly created toast. This allows further manipulation or customization of the toast after it appears.
* @param {HTMLElement | string} value?. The value for the toast item. If not set, the value property will be used.
* @param {string} iconType?. The icon name for the toast item. If not set, the type property determines the icon type that will be used.
* @returns {HTMLElement}
*/
open(value, iconType) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.open(value, iconType);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
openSync(value, iconType) {
if (this.nativeElement.isRendered) {
return this.nativeElement.open(value, iconType);
}
return null;
}
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['itemClickHandler'] = (event) => { that.onItemClick.emit(event); };
that.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
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['itemClickHandler']) {
that.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
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']);
}
}
}
ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ToastComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ToastComponent, selector: "smart-toast, [smart-toast]", inputs: { animation: "animation", appendTo: "appendTo", autoClose: "autoClose", autoCloseDelay: "autoCloseDelay", autoOpen: "autoOpen", disabled: "disabled", iconClass: "iconClass", itemClass: "itemClass", itemTemplate: "itemTemplate", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", modal: "modal", position: "position", readonly: "readonly", rightToLeft: "rightToLeft", showCloseButton: "showCloseButton", theme: "theme", type: "type", unfocusable: "unfocusable", value: "value" }, outputs: { onItemClick: "onItemClick", onClose: "onClose", onOpen: "onOpen", onSwipebottom: "onSwipebottom", onSwipeleft: "onSwipeleft", onSwiperight: "onSwiperight", onSwipetop: "onSwipetop" }, exportAs: ["smart-toast"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-toast', selector: 'smart-toast, [smart-toast]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], appendTo: [{
type: Input
}], autoClose: [{
type: Input
}], autoCloseDelay: [{
type: Input
}], autoOpen: [{
type: Input
}], disabled: [{
type: Input
}], iconClass: [{
type: Input
}], itemClass: [{
type: Input
}], itemTemplate: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], modal: [{
type: Input
}], position: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], showCloseButton: [{
type: Input
}], theme: [{
type: Input
}], type: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], onItemClick: [{
type: Output
}], onClose: [{
type: Output
}], onOpen: [{
type: Output
}], onSwipebottom: [{
type: Output
}], onSwipeleft: [{
type: Output
}], onSwiperight: [{
type: Output
}], onSwipetop: [{
type: Output
}] } });
class ToastModule {
}
ToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastModule, declarations: [ToastComponent], exports: [ToastComponent] });
ToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToastModule, decorators: [{
type: NgModule,
args: [{
declarations: [ToastComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [ToastComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Smart, ToastComponent, ToastModule };
//# sourceMappingURL=smart-webcomponents-angular-toast.mjs.map