smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
461 lines (453 loc) • 24.3 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.tooltip';
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 TooltipComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered immediately when the tooltip becomes visible to the user, indicating that the tooltip has been successfully opened and is now displayed on the screen. This can be used to perform additional actions, such as loading content or tracking analytics, when a tooltip appears.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is dispatched immediately before the tooltip becomes visible to the user. By calling event.preventDefault() within the event handler, you can cancel the tooltip from opening, allowing you to implement custom logic or conditions before the tooltip is displayed.
* @param event. The custom event. */
this.onOpening = new EventEmitter();
/** @description This event is triggered immediately after the tooltip has been closed, either by user interaction or programmatically. It signals that the tooltip is no longer visible in the user interface and can be used to perform cleanup operations or update other components in response to the tooltip's dismissal.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is fired immediately before the tooltip is about to close. It provides an opportunity to perform actions or validations before the tooltip is hidden. By calling event.preventDefault(), you can cancel the closing of the tooltip, keeping it visible until the action is allowed to proceed.
* @param event. The custom event. */
this.onClosing = 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-tooltip');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Allows you to specify or retrieve the current animation mode. Set this property to 'none' to disable all animations. When assigned other valid values, it enables the corresponding animation effects for the element or component. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies the alignment of the tooltip relative to its target element, such as positioning it above, below, to the left, or to the right of the target. This setting controls where the tooltip appears in relation to the element it is associated with. */
get align() {
return this.nativeElement ? this.nativeElement.align : undefined;
}
set align(value) {
this.nativeElement ? this.nativeElement.align = value : undefined;
}
/** @description Determines whether the tooltip's arrow is displayed. Setting this property to true will show the arrow pointing to the anchor element, while setting it to false will hide the arrow. This enhances tooltip visibility and contextual association with the target element. */
get arrow() {
return this.nativeElement ? this.nativeElement.arrow : undefined;
}
set arrow(value) {
this.nativeElement ? this.nativeElement.arrow = value : undefined;
}
/** @description Specifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip. */
get arrowDirection() {
return this.nativeElement ? this.nativeElement.arrowDirection : undefined;
}
set arrowDirection(value) {
this.nativeElement ? this.nativeElement.arrowDirection = value : undefined;
}
/** @description Determines whether the tooltip's arrow is displayed. When set to true, an arrow will appear pointing from the tooltip to its target element; when set to false, the tooltip will be shown without an arrow. This property can be used to customize the visual connection between the tooltip and its anchor element. */
get delay() {
return this.nativeElement ? this.nativeElement.delay : undefined;
}
set delay(value) {
this.nativeElement ? this.nativeElement.delay = value : undefined;
}
/** @description Controls whether the tooltip is displayed. When enabled, the tooltip appears when users hover over or interact with the associated element. When disabled, the tooltip is hidden and does not appear under any circumstances. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies the horizontal (X) and vertical (Y) offset values, allowing you to adjust the position of an element relative to its original location. The X value shifts the element left or right, while the Y value moves it up or down. */
get offset() {
return this.nativeElement ? this.nativeElement.offset : undefined;
}
set offset(value) {
this.nativeElement ? this.nativeElement.offset = value : undefined;
}
/** @description Sets or retrieves the unlockKey used to grant access to the product. The unlockKey acts as an authorization token or code required to unlock and enable the product’s features. */
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 from the messages property will be used. Changing this value updates the displayed content to match the selected language. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function associated with the localization module, typically invoked to handle language changes, region-specific formatting, or to update interface text based on the selected locale. */
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 localized text strings used within the widget interface. This property allows you to customize the displayed text for different languages or regions, and works together with the language property to support localization and internationalization of the widget's UI elements. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events. */
get openMode() {
return this.nativeElement ? this.nativeElement.openMode : undefined;
}
set openMode(value) {
this.nativeElement ? this.nativeElement.openMode = value : undefined;
}
/** @description Specifies or retrieves the placement of the tooltip relative to its associated element. This determines where the tooltip appears, such as above, below, to the left, or to the right of the target element. */
get position() {
return this.nativeElement ? this.nativeElement.position : undefined;
}
set position(value) {
this.nativeElement ? this.nativeElement.position = value : undefined;
}
/** @description Specifies the HTML element that will act as the trigger for displaying the tooltip. When the user interacts with this element (such as by hovering, focusing, or clicking—depending on configuration), the tooltip will appear. */
get selector() {
return this.nativeElement ? this.nativeElement.selector : undefined;
}
set selector(value) {
this.nativeElement ? this.nativeElement.selector = value : undefined;
}
/** @description Specifies the theme applied to the element. The theme controls the element’s overall appearance, including colors, fonts, and stylistic details, ensuring a consistent visual presentation throughout the interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Specifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip. */
get tooltipTemplate() {
return this.nativeElement ? this.nativeElement.tooltipTemplate : undefined;
}
set tooltipTemplate(value) {
this.nativeElement ? this.nativeElement.tooltipTemplate = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Gets the current value of the widget or sets a new value for the widget. This property allows you to retrieve the widget's existing value or update it programmatically. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Controls whether the tooltip is visible or hidden. When set, this property determines if the tooltip is displayed to the user; when accessed, it returns the current visibility status of the tooltip. */
get visible() {
return this.nativeElement ? this.nativeElement.visible : undefined;
}
set visible(value) {
this.nativeElement ? this.nativeElement.visible = value : undefined;
}
/** @description Closes the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
/** @description Displays the smart-tooltip component, providing contextual information or guidance to the user when triggered.
*/
open() {
if (this.nativeElement.isRendered) {
this.nativeElement.open();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.open();
});
}
}
/** @description Enables or disables the smart-tooltip component, controlling whether tooltips are displayed or hidden for the specified elements. This toggle function allows developers to dynamically show or hide helpful tooltip information in the user interface based on user interaction or application state.
*/
toggle() {
if (this.nativeElement.isRendered) {
this.nativeElement.toggle();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.toggle();
});
}
}
/** @description Removes all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.
*/
clear() {
if (this.nativeElement.isRendered) {
this.nativeElement.clear();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clear();
});
}
}
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['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']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
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']);
}
}
}
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TooltipComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TooltipComponent, selector: "smart-tooltip, [smart-tooltip]", inputs: { animation: "animation", align: "align", arrow: "arrow", arrowDirection: "arrowDirection", delay: "delay", disabled: "disabled", offset: "offset", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", openMode: "openMode", position: "position", selector: "selector", theme: "theme", tooltipTemplate: "tooltipTemplate", unfocusable: "unfocusable", value: "value", visible: "visible" }, outputs: { onOpen: "onOpen", onOpening: "onOpening", onClose: "onClose", onClosing: "onClosing" }, exportAs: ["smart-tooltip"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-tooltip', selector: 'smart-tooltip, [smart-tooltip]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], align: [{
type: Input
}], arrow: [{
type: Input
}], arrowDirection: [{
type: Input
}], delay: [{
type: Input
}], disabled: [{
type: Input
}], offset: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], openMode: [{
type: Input
}], position: [{
type: Input
}], selector: [{
type: Input
}], theme: [{
type: Input
}], tooltipTemplate: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], visible: [{
type: Input
}], onOpen: [{
type: Output
}], onOpening: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}] } });
class TooltipModule {
}
TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], exports: [TooltipComponent] });
TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipModule, decorators: [{
type: NgModule,
args: [{
declarations: [TooltipComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [TooltipComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Smart, TooltipComponent, TooltipModule };
//# sourceMappingURL=smart-webcomponents-angular-tooltip.mjs.map