smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
639 lines (634 loc) • 110 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.editor';
import * as pkg from './../common/marked.min.js';
window.marked = pkg.default;
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 EditorComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when an element loses focus (blur event) and its content has been modified since it last received focus.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The old value before the change.
* value - The new value after the change.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered immediately after the user modifies the content through direct input, such as typing, pasting, or deleting text. It serves as a notification that the content has changed specifically due to user interaction, allowing you to respond to updates made by the user in real time.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The old value before the input change.
* value - The new value after the input change.
*/
this.onChanging = new EventEmitter();
/** @description This event is fired immediately before a Toolbar action begins execution, allowing developers to intervene or modify behavior as needed. By invoking event.preventDefault() within the event handler, you can cancel the pending Toolbar action, preventing it from proceeding. This provides an opportunity to implement custom validation, confirmation prompts, or other pre-action logic before the Toolbar action is carried out.
* @param event. The custom event. Custom event was created with: event.detail( name)
* name - The name of the action.
*/
this.onActionStart = new EventEmitter();
/** @description This event is triggered after a Toolbar action has been completed. It signifies that all processes related to the action, such as updating the UI or executing related logic, have finished. Use this event to perform any follow-up tasks when a Toolbar action concludes.
* @param event. The custom event. Custom event was created with: event.detail( name)
* name - The name of the action.
*/
this.onActionEnd = new EventEmitter();
/** @description This event is triggered when a user selects and clicks on an item within the context menu. It allows you to execute custom logic in response to specific context menu actions, providing access to details about which menu item was clicked and the relevant context of the interaction.
* @param event. The custom event. Custom event was created with: event.detail( originalEvent, value)
* originalEvent - The original click event.
* value - The value of the item.
*/
this.onContextMenuItemClick = new EventEmitter();
/** @description This event is triggered whenever the user opens the context menu, typically by right-clicking or using a designated keyboard shortcut on an element. It allows developers to execute custom logic or modify the context menu's content before it is displayed to the user.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onContextMenuOpen = new EventEmitter();
/** @description This event is triggered immediately before the context menu appears, typically as a result of a user right-clicking or performing a similar gesture. At this point, you have the opportunity to customize or modify the context menu, or to prevent the menu from opening entirely by calling event.preventDefault() within the event handler.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onContextMenuOpening = new EventEmitter();
/** @description This event is triggered whenever the Context Menu is closed, either by user action (such as clicking outside the menu, selecting a menu item, or pressing the Escape key) or programmatically through the relevant API. Handlers for this event can be used to perform clean-up tasks or update the user interface in response to the Context Menu being dismissed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onContextMenuClose = new EventEmitter();
/** @description This event is fired just before the Context Menu begins to close. By calling event.preventDefault() within the event handler, you can cancel the closing action, allowing you to override or delay the default behavior based on custom logic.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onContextMenuClosing = new EventEmitter();
/** @description This event is triggered when a user initiates the resizing of an image, table, or video element. It indicates that the resizing operation has begun, allowing you to implement custom behaviors or UI updates in response to the start of a resize action.
* @param event. The custom event. */
this.onResizeStart = new EventEmitter();
/** @description This event is triggered when the user has completed resizing an image, table, or video element. It fires after the resizing action ends, allowing you to perform actions such as saving the new dimensions or updating the layout in response to the change.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The element that is resized (image/table or video).
*/
this.onResizeEnd = new EventEmitter();
/** @description This event is triggered whenever the inline Toolbar becomes visible to the user, such as when a user selects text or performs an action that causes the Toolbar to appear within the interface. Use this event to run custom logic or adjust UI elements in response to the Toolbar opening.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onInlineToolbarOpen = new EventEmitter();
/** @description This event is fired just before the inline Toolbar begins to open. Developers can intercept this event and prevent the Toolbar from opening by invoking event.preventDefault() within the event handler. This allows for conditional control over the Toolbar's visibility based on custom application logic.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onInlineToolbarOpening = new EventEmitter();
/** @description This event is triggered whenever the inline toolbar is closed, either by user interaction (such as clicking outside the toolbar, pressing Esc, or selecting a toolbar option) or programmatically via code. It provides an opportunity to perform cleanup, update UI elements, or execute additional logic in response to the toolbar being dismissed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onInlineToolbarClose = new EventEmitter();
/** @description This event is triggered immediately before the inline toolbar begins to close, allowing you to perform actions or cleanup tasks in response to the toolbar's closure.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
*/
this.onInlineToolbarClosing = new EventEmitter();
/** @description This event is triggered each time the Drop Down Toolbar becomes visible to the user, such as when it is expanded or opened. You can use this event to execute custom logic whenever the toolbar is displayed, for example, to load dynamic content or adjust UI elements within the toolbar.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onDropDownToolbarOpen = new EventEmitter();
/** @description This event is triggered just before the Drop Down Toolbar begins to open. Within the event handler, you can call event.preventDefault() to cancel the opening operation, allowing you to customize or prevent the display of the toolbar based on specific conditions. This provides an opportunity to implement custom logic before the toolbar becomes visible to the user.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onDropDownToolbarOpening = new EventEmitter();
/** @description This event is triggered whenever the Drop Down Toolbar is closed, either by user interaction (such as clicking outside the toolbar or selecting an option) or programmatically via the application's code. Use this event to perform actions or update the user interface in response to the toolbar being dismissed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onDropDownToolbarClose = new EventEmitter();
/** @description This event is fired when the Drop Down Toolbar begins its closing process. Within the event handler, you can prevent the toolbar from closing by invoking event.preventDefault(). This provides an opportunity to execute custom logic, such as confirming the action with the user or validating conditions before allowing the toolbar to close.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onDropDownToolbarClosing = new EventEmitter();
/** @description This event is triggered when the Dialog Window is successfully opened and becomes visible to the user.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item is the target of the operation.
*/
this.onDialogOpen = new EventEmitter();
/** @description This event is fired immediately before the Dialog Window begins to open, giving developers an opportunity to perform actions or modify options prior to rendering. You can cancel the default behavior and prevent the Dialog Window from opening by calling event.preventDefault() within the event handler.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogOpening = new EventEmitter();
/** @description This event is triggered whenever the Dialog Window is closed by the user, either through clicking the close button, pressing the escape key, or programmatically via code. It allows developers to execute custom actions or clean up resources after the dialog has been dismissed.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogClose = new EventEmitter();
/** @description This event is fired immediately before the Dialog Window begins to close. It provides an opportunity to execute custom logic or perform validation before the dialog is dismissed. The closure of the dialog can be canceled by calling event.preventDefault() within the event handler.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogClosing = new EventEmitter();
/** @description This event is triggered when an image or video file has been uploaded successfully to the server. It indicates the completion of the upload process without errors, allowing you to perform additional actions such as displaying a success message or updating the user interface.
* @param event. The custom event. Custom event was created with: event.detail( target, item, filename, type, size, index, status, serverResponse)
* target - The file upload element that is the target of the operation.
* item - The toolbar item that is the target of the operation.
* filename - The name of the uploaded file.
* type - The type of the uploaded file.
* size - The size of the uploaded file.
* index - The index of the uploaded file.
* status - The status of the uploaded file. Whether there was an error or success.
* serverResponse - The response of the remote server.
*/
this.onImageUploadSuccess = new EventEmitter();
/** @description This event is triggered when an attempt to upload an image or video fails, indicating that the file was not successfully transferred to the server due to an error or interruption during the upload process.
* @param event. The custom event. Custom event was created with: event.detail( target, item, filename, type, size, index, status, serverResponse)
* target - The file upload element that is the target of the operation.
* item - The toolbar item that is the target of the operation.
* filename - The name of the canceled file.
* type - The type of the canceled file.
* size - The size of the canceled file.
* index - The index of the canceled file.
* status - The status of the uploaded file. Whether there was an error or success.
* serverResponse - The response of the remote server.
*/
this.onImageUploadFailed = new EventEmitter();
/** @description This event is triggered whenever a user clicks on an item within the Toolbar. It provides relevant information about the clicked item, allowing you to execute custom logic or actions in response to the user's interaction with the Toolbar.
* @param event. The custom event. Custom event was created with: event.detail( originalEvent, value)
* originalEvent - The original click event.
* value - The name of the toolbar item that was clicked.
*/
this.onToobarItemClick = new EventEmitter();
/** @description This event is triggered whenever a user closes a message, such as dismissing a notification or alert. It allows you to execute custom logic in response to the message being removed from the user interface.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item that is the target of the operation.
*/
this.onMessageClose = new EventEmitter();
/** @description This event is triggered whenever a user opens or views a message, indicating that the message content has become visible or active in the user interface. It can be used to track message engagement, update message status, or initiate follow-up actions when a message is accessed.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item that is the target of the operation.
*/
this.onMessageOpen = 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-editor');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description An object that defines configuration settings for integrating AI capabilities within the grid, including options for enabling AI features, specifying AI service endpoints, adjusting model parameters, and customizing AI-driven functionality in the grid interface. */
get ai() {
return this.nativeElement ? this.nativeElement.ai : undefined;
}
set ai(value) {
this.nativeElement ? this.nativeElement.ai = value : undefined;
}
/** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. For other values, animations are enabled according to the selected mode. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Automatically formats your text in real-time as you type, converting your input into structured elements such as bullet points, checkboxes, headings, and code blocks. This feature streamlines note-taking and writing by instantly applying consistent formatting without requiring manual markup or additional steps. */
get autoFormatting() {
return this.nativeElement ? this.nativeElement.autoFormatting : undefined;
}
set autoFormatting(value) {
this.nativeElement ? this.nativeElement.autoFormatting = value : undefined;
}
/** @description Automatically restores the editor's most recently saved state from the browser's local storage when the element is initialized. To retrieve the correct saved state, you must specify a unique id that matches the one used during the saving process. Without this id, the editor cannot identify or load the previously stored state. */
get autoLoad() {
return this.nativeElement ? this.nativeElement.autoLoad : undefined;
}
set autoLoad(value) {
this.nativeElement ? this.nativeElement.autoLoad = value : undefined;
}
/** @description Automatically saves the editor's current content at regular intervals specified by the autoSaveInterval property, but only while the editor element is focused. To enable automatic saving, you must assign a unique id to the editor element; this id is used to store and retrieve the editor's saved state. */
get autoSave() {
return this.nativeElement ? this.nativeElement.autoSave : undefined;
}
set autoSave(value) {
this.nativeElement ? this.nativeElement.autoSave = value : undefined;
}
/** @description Specifies the time interval, in milliseconds, at which the Editor automatically saves its state when the autoSave property is enabled. This property controls how frequently the Editor performs auto-save operations. */
get autoSaveInterval() {
return this.nativeElement ? this.nativeElement.autoSaveInterval : undefined;
}
set autoSaveInterval(value) {
this.nativeElement ? this.nativeElement.autoSaveInterval = value : undefined;
}
/** @description A customizable formatting function for the character counter display in the Editor. This function receives two parameters:- chars: The current number of characters entered by the user in the Editor.- maxCharCount: The maximum allowed number of characters for the Editor input.The function should return a formatted string that represents the character count status, which will be shown in the Editor’s UI (for example, "25 / 100 characters"). This allows developers to define custom formats for how the character count is displayed to users. */
get charCountFormatFunction() {
return this.nativeElement ? this.nativeElement.charCountFormatFunction : undefined;
}
set charCountFormatFunction(value) {
this.nativeElement ? this.nativeElement.charCountFormatFunction = value : undefined;
}
/** @description Controls whether files are automatically uploaded immediately after the user selects them. When enabled, the upload process begins as soon as files are chosen. When disabled, file upload must be triggered manually. This property can be used to either retrieve the current auto-upload setting or update it. */
get autoUpload() {
return this.nativeElement ? this.nativeElement.autoUpload : undefined;
}
set autoUpload(value) {
this.nativeElement ? this.nativeElement.autoUpload = value : undefined;
}
/** @description Specifies the configuration for content filtering, allowing you to define which types of content are allowed or blocked according to the selected criteria or rules. */
get contentFiltering() {
return this.nativeElement ? this.nativeElement.contentFiltering : undefined;
}
set contentFiltering(value) {
this.nativeElement ? this.nativeElement.contentFiltering = value : undefined;
}
/** @description Defines the CSS file(s) or styles to be applied to the content area within the Editor, allowing you to customize the appearance and formatting of the editor’s content. */
get content_css() {
return this.nativeElement ? this.nativeElement.content_css : undefined;
}
set content_css(value) {
this.nativeElement ? this.nativeElement.content_css = value : undefined;
}
/** @description Specifies the items and structure of the context menu that appears when a user right-clicks within the Editor's content area. This setting allows you to customize which menu options are available based on the user's actions, providing tailored functionality and quick access to relevant commands. */
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
this.nativeElement ? this.nativeElement.contextMenu = value : undefined;
}
/** @description Enhances the Editor’s context menu by allowing you to customize its default items. This property accepts several formats:- 'Array of Items:' You can provide an array where each item is either: - A 'string' representing the value/action for the menu item. - An 'object' in the format '{ label: string, value: string }', where: - 'label' is the text displayed in the menu. - 'value' is the action or identifier associated with that menu item.- 'Function:' You can also pass a function that dynamically generates the array of menu items. The function receives the following parameters: - 'target' ('HTMLElement'): The DOM element where the context menu is triggered. - 'type' ('string'): The type or context of the menu (e.g., "table", "image", "link", or other relevant context types). - 'defaultItems' ('string[]'): The default set of menu item identifiers for that context. The function should return an array of menu items (as described above), which will be rendered in place of the default menu.'Example function signature:''''javascriptfunction (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems;}'''This flexible property enables you to tailor the context menu based on the user's selection, the specific element targeted, or the context of the interaction, helping create a more intuitive and relevant editing experience. */
get contextMenuDataSource() {
return this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;
}
set contextMenuDataSource(value) {
this.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;
}
/** @description Configures the available options for exporting data from the Editor, such as file formats (CSV, JSON, XML), export settings, and customization preferences. These settings determine how users can save or export content from the Editor. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Controls whether the Editor component is active or inactive. When enabled, users can interact with and make changes within the Editor; when disabled, all editing functionalities are restricted or unavailable. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Prevents users from modifying or editing content within the Editor, making all content read-only. */
get disableEditing() {
return this.nativeElement ? this.nativeElement.disableEditing : undefined;
}
set disableEditing(value) {
this.nativeElement ? this.nativeElement.disableEditing = value : undefined;
}
/** @description Prevents the Quick Search Bar from appearing or being accessible to users, effectively disabling its functionality across the application. */
get disableSearchBar() {
return this.nativeElement ? this.nativeElement.disableSearchBar : undefined;
}
set disableSearchBar(value) {
this.nativeElement ? this.nativeElement.disableSearchBar = value : undefined;
}
/** @description Specifies the editing mode for the Editor component. By default, the Editor operates in standard HTML mode, allowing users to input and edit HTML content directly. In this mode, pressing Enter inserts line breaks or new paragraphs according to standard HTML behavior. When set to 'blockHtml', the Editor creates new DIV elements each time the user presses Enter, promoting a block-based editing experience. This mode also provides built-in commands tailored for structured data entry and manipulation.If set to 'markdown', the Editor functions as a dedicated Markdown editor. User input is interpreted as Markdown syntax, and the Editor automatically parses and converts the Markdown content into HTML for real-time preview. This enables a seamless writing and formatting workflow for users who prefer Markdown.Possible values:- 'html' (default): Accepts and parses HTML input.- 'blockHtml': Uses DIV tags for new blocks and offers additional commands for data input.- 'markdown': Enables Markdown syntax input with live HTML preview. */
get editMode() {
return this.nativeElement ? this.nativeElement.editMode : undefined;
}
set editMode(value) {
this.nativeElement ? this.nativeElement.editMode = value : undefined;
}
/** @description Specifies whether the output from the getHTML method and the Source Code view should be HTML-encoded. When enabled, special characters in the code (such as , and &) are converted to their HTML entity equivalents, ensuring correct display and preventing unintended HTML rendering. When disabled, the values are returned as raw HTML without encoding. */
get enableHtmlEncode() {
return this.nativeElement ? this.nativeElement.enableHtmlEncode : undefined;
}
set enableHtmlEncode(value) {
this.nativeElement ? this.nativeElement.enableHtmlEncode = value : undefined;
}
/** @description Specifies whether pressing the Tab key inside the Editor will insert a tab character at the cursor position, or instead move focus to the next focusable element (default behavior). When enabled, Tab inserts a tab character; when disabled, Tab shifts focus as usual. */
get enableTabKey() {
return this.nativeElement ? this.nativeElement.enableTabKey : undefined;
}
set enableTabKey(value) {
this.nativeElement ? this.nativeElement.enableTabKey = value : undefined;
}
/** @description Specifies the duration (in milliseconds) between consecutive result updates when using the "Find and Replace" and "Search Bar" features. Adjusting this interval can affect how quickly search results are refreshed and displayed to the user during searches. */
get findAndReplaceTimeout() {
return this.nativeElement ? this.nativeElement.findAndReplaceTimeout : undefined;
}
set findAndReplaceTimeout(value) {
this.nativeElement ? this.nativeElement.findAndReplaceTimeout = value : undefined;
}
/** @description Specifies whether the Toolbar is visible or hidden. When set to true, the Toolbar will be hidden; when set to false, the Toolbar will be displayed. */
get hideToolbar() {
return this.nativeElement ? this.nativeElement.hideToolbar : undefined;
}
set hideToolbar(value) {
this.nativeElement ? this.nativeElement.hideToolbar = value : undefined;
}
/** @description Specifies whether the Inline Toolbar is visible. If set to true, the toolbar will be hidden; if false, the toolbar will be displayed. */
get hideInlineToolbar() {
return this.nativeElement ? this.nativeElement.hideInlineToolbar : undefined;
}
set hideInlineToolbar(value) {
this.nativeElement ? this.nativeElement.hideInlineToolbar = value : undefined;
}
/** @description Specifies the file format for images or videos uploaded from local storage. By default, uploaded files are encoded and stored as base64 strings. This setting allows you to define or change the storage format as needed. */
get imageFormat() {
return this.nativeElement ? this.nativeElement.imageFormat : undefined;
}
set imageFormat(value) {
this.nativeElement ? this.nativeElement.imageFormat = value : undefined;
}
/** @description Automatically detects and sets the appropriate width for images pasted from the clipboard, ensuring consistent image display and optimal fit within the layout. */
get imagePasteWidth() {
return this.nativeElement ? this.nativeElement.imagePasteWidth : undefined;
}
set imagePasteWidth(value) {
this.nativeElement ? this.nativeElement.imagePasteWidth = value : undefined;
}
/** @description Automatically detects and sets the appropriate height for an image when it is pasted from the clipboard, ensuring correct aspect ratio and consistent display within the application. */
get imagePasteHeight() {
return this.nativeElement ? this.nativeElement.imagePasteHeight : undefined;
}
set imagePasteHeight(value) {
this.nativeElement ? this.nativeElement.imagePasteHeight = value : undefined;
}
/** @description Sets the content of the Editor using an HTML string. This method enables you to programmatically insert both plain text and HTML elements, including tags, formatting, and embedded media, directly into the Editor. Existing content will be replaced by the provided HTML. Use this to dynamically update the Editor's contents with custom HTML markup. */
get innerHTML() {
return this.nativeElement ? this.nativeElement.innerHTML : undefined;
}
set innerHTML(value) {
this.nativeElement ? this.nativeElement.innerHTML = value : undefined;
}
/** @description Specifies the horizontal (x) and vertical (y) offset values used to adjust the position of the Inline Toolbar relative to its default placement on the page. This allows for precise positioning by shifting the toolbar along the x and y axes. */
get inlineToolbarOffset() {
return this.nativeElement ? this.nativeElement.inlineToolbarOffset : undefined;
}
set inlineToolbarOffset(value) {
this.nativeElement ? this.nativeElement.inlineToolbarOffset = value : undefined;
}
/** @description Specifies the iframe configuration for the Editor. When enabled, the Editor's content is rendered within an isolated iframe, ensuring separation from the main DOM and preventing style or script conflicts. This option enhances content security and encapsulation. Additionally, it provides a mechanism to inject external resources (such as stylesheets or scripts) directly into the iframe environment if required. */
get iframeSettings() {
return this.nativeElement ? this.nativeElement.iframeSettings : undefined;
}
set iframeSettings(value) {
this.nativeElement ? this.nativeElement.iframeSettings = value : undefined;
}
/** @description Gets or sets the unlockKey, a unique value required to activate or unlock the product’s features. Use this property to provide the unlock key when authorizing access, or retrieve the current unlock key associated with the product. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies the current language code used for localization, such as "en" for English or "fr" for French. This property works together with the messages property to display the appropriate localized messages based on the selected language. Use it to get or set the active language for your application's interface. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Specifies the maximum number of characters that can be entered within the Editor. Once this limit is reached, users will be unable to input additional characters. */
get maxCharCount() {
return this.nativeElement ? this.nativeElement.maxCharCount : undefined;
}
set maxCharCount(value) {
this.nativeElement ? this.nativeElement.maxCharCount = value : undefined;
}
/** @description Defines or retrieves an object containing all user-visible strings (such as labels, tooltips, and messages) used by the widget for display purposes and localization. This property works together with the language setting to enable customization and translation of the widget’s interface into different languages. The object allows developers to provide localized string values, ensuring the widget content is appropriately translated for end users. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Assigns the specified element to the property †a†, designating it as the form control responsible for submitting the Editor's value. This allows the Editor’s content to be included in form submissions, ensuring its data is sent when the form is submitted. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Specifies the format (such as plain text, HTML, or Markdown) in which content will be inserted into the Editor when a user pastes data, ensuring consistent formatting and correct rendering within the editing environment. */
get pasteFormat() {
return this.nativeElement ? this.nativeElement.pasteFormat : undefined;
}
set pasteFormat(value) {
this.nativeElement ? this.nativeElement.pasteFormat = value : undefined;
}
/** @description Specifies the placeholder text or element displayed within the Editor when it is empty, guiding users on what to enter or indicating the expected content. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Specifies whether activating the clearFormat toolbar action should also remove any inline CSS styles (such as style attributes) applied to the currently selected node. When enabled, this option ensures that in addition to removing formatting tags (like <b>, <i>, etc.), all custom inline styles will be cleared from the selected content. */
get removeStylesOnClearFormat() {
return this.nativeElement ? this.nativeElement.removeStylesOnClearFormat : undefined;
}
set removeStylesOnClearFormat(value) {
this.nativeElement ? this.nativeElement.removeStylesOnClearFormat = value : undefined;
}
/** @description Specifies whether the Editor's content is required. If this option is enabled and the Editor is left empty, a notification will be displayed indicating that the content cannot be empty and must be provided before proceeding. */
get required() {
return this.nativeElement ? this.nativeElement.required : undefined;
}
set required(value) {
this.nativeElement ? this.nativeElement.required = value : undefined;
}
/** @description Sets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures that the element displays its content in a manner appropriate for RTL locale support. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Indicates whether the value is sanitized to protect against Cross-Site Scripting (XSS) attacks. When enabled, any potentially malicious scripts, inline event handlers, or other XSS vulnerabilities are automatically removed from the HTML content entered in the Editor, ensuring only safe and clean HTML is allowed. */
get sanitized() {
return this.nativeElement ? this.nativeElement.sanitized : undefined;
}
set sanitized(value) {
this.nativeElement ? this.nativeElement.sanitized = value : undefined;
}
/** @description Controls the visibility of the character counter. When enabled, the counter appears in the bottom right corner of the input field. If a maxCharCount value is set, the counter changes color to visually warn the user as they approach the character limit:- When the content length reaches 70% or more of the maximum, the counter displays a warning color.- At 90% or more of the maximum, the counter switches to a more prominent warning color, indicating that the limit is nearly reached.- Once the character count reaches the maximum limit, further text input is prevented. */
get showCharCount() {
return this.nativeElement ? this.nativeElement.showCharCount : undefined;
}
set showCharCount(value) {
this.nativeElement ? this.nativeElement.showCharCount = value : undefined;
}
/** @description Specifies if the editor enables spell checking, allowing the identification and highlighting of spelling errors within the text. If set to true, the editor will actively check and mark misspelled words as the user types. If set to false, spell checking functionality will be disabled. */
get spellCheck() {
return this.nativeElement ? this.nativeElement.spellCheck : undefined;
}
set spellCheck(value) {
this.nativeElement ? this.nativeElement.spellCheck = value : undefined;
}
/** @description Specifies the time interval, in milliseconds, at which the Source Code and Preview panels are automatically refreshed when Split Mode is active. Adjusting this value controls how frequently the panels update to reflect changes in real-time while Split Mode is enabled. */
get splitModeRefreshTimeout() {
return this.nativeElement ? this.nativeElement.splitModeRefreshTimeout : undefined;
}
set splitModeRefreshTimeout(value) {
this.nativeElement ? this.nativeElement.splitModeRefreshTimeout = value : undefined;
}
/** @description Defines the list of editor users for the application. Expects an array of user objects, each requiring the following properties: - ''id'': A unique identifier for the user (string or number). - ''name'': The display name of the user (string). Each user object may also include the following optional properties: - ''color'': A string specifying the user's color (e.g., HEX or CSS color value) for UI highlighting. - ''image'': A string containing the URL of the user's avatar or profile image. */
get users() {
return this.nativeElement ? this.nativeElement.users : undefined;
}
set users(value) {
this.nativeElement ? this.nativeElement.users = value : undefined;
}
/** @description Activates the editor pages functionality, allowing users to create, edit, and manage custom pages directly within the editor interface. */
get enablePages() {
return this.nativeElement ? this.nativeElement.enablePages : undefined;
}
set enablePages(value) {
this.nativeElement ? this.nativeElement.enablePages = value : undefined;
}
/** @description Defines the editor pages by accepting an array of objects, where each object must include a 'label' property (a string representing the title or name of the page) and an 'innerHTML' property (a string containing the HTML content to be displayed on that page). */
get pages() {
return this.nativeElement ? this.nativeElement.pages : undefined;
}
set pages(value) {
this.nativeElement ? this.nativeElement.pages = value : undefined;
}
/** @description Specifies the URL endpoint used for file uploads. This property directly maps to the 'action' attribute of the upload form, determining where the uploaded data is sent on the server. For example, you can set the 'uploadUrl' property to the path of a server-side script such as a PHP file (e.g., "upload.php") that processes and handles incoming file uploads. Setting this property ensures that files selected by the user are transmitted to the specified server location when the upload form is submitted. */
get uploadUrl() {
return this.nativeElement ? this.nativeElement.uploadUrl : undefined;
}
set uploadUrl(value) {
this.nativeElement ? this.nativeElement.uploadUrl = value : undefined;
}
/** @description Defines or retrieves the URL used for the remove operation. This property corresponds to the form's action attribute and specifies the server endpoint that will handle item removal requests. For example, setting the removeUrl property to the path of a PHP file enables the server-side script to process and execute the removal action when triggered. */
get removeUrl() {
return this.nativeElement ? this.nativeElement.removeUrl : undefined;
}
set removeUrl(value) {
this.nativeElement ? this.nativeElement.removeUrl = value : undefined;
}
/** @description Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}