smart-webcomponents-angular/fesm2020/smart-webcomponents-angular-editor.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-editor.mjs","sources":["../../editor/src/smart.element.ts","../../editor/src/smart.editor.ts","../../editor/src/smart.editor.module.ts","../../editor/src/smart-webcomponents-angular-editor.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { Editor } from './../index';\nimport { Animation, EditorContentFilteringAttributeFilterMode, EditorContentFilteringTagFilterMode, EditorContentFilteringStyleAttributeFilterMode, EditorContextMenu, EditMode, EditorImageFormat, PasteFormat, ToolbarMode, ToolbarViewMode, EditorContentFiltering, EditorDataExport, EditorIframeSettings, ToolbarItem, ToolbarItemEditor, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, EditorContentFilteringAttributeFilterMode, EditorContentFilteringTagFilterMode, EditorContentFilteringStyleAttributeFilterMode, EditorContextMenu, EditMode, EditorImageFormat, PasteFormat, ToolbarMode, ToolbarViewMode, EditorContentFiltering, EditorDataExport, EditorIframeSettings, ToolbarItem, ToolbarItemEditor, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { Editor } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-editor',\tselector: 'smart-editor, [smart-editor]'\n})\n\nexport class EditorComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<Editor>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as Editor;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: Editor;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <Editor>document.createElement('smart-editor');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Automatically loads the last saved state of the editor (from local storage) on element initialization. An id must be provided in order to load a previously saved state. */\n\t@Input()\n\tget autoLoad(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoLoad : undefined;\n\t}\n\tset autoLoad(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoLoad = value : undefined;\n\t}\n\n\t/** @description Automatically saves the current content of the editor. Saving happens at time intervas determined by the autoSaveInterval property while the element on focus. An id must be provided to the element in order to store the state. */\n\t@Input()\n\tget autoSave(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoSave : undefined;\n\t}\n\tset autoSave(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoSave = value : undefined;\n\t}\n\n\t/** @description The property that determines the interval to automatically save the state of the Editor when the autoSave property is set. */\n\t@Input()\n\tget autoSaveInterval(): number {\n\t\treturn this.nativeElement ? this.nativeElement.autoSaveInterval : undefined;\n\t}\n\tset autoSaveInterval(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.autoSaveInterval = value : undefined;\n\t}\n\n\t/** @description A formatting function for the char counter. Takes two arguments: chars - the current number of characters inside the Editor.maxCharCount - the maximum number of characters inside the Editor. */\n\t@Input()\n\tget charCountFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.charCountFormatFunction : undefined;\n\t}\n\tset charCountFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.charCountFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets whether files will be automatically uploaded after selection. */\n\t@Input()\n\tget autoUpload(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoUpload : undefined;\n\t}\n\tset autoUpload(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoUpload = value : undefined;\n\t}\n\n\t/** @description Determines the content filtering settings. */\n\t@Input()\n\tget contentFiltering(): EditorContentFiltering {\n\t\treturn this.nativeElement ? this.nativeElement.contentFiltering : undefined;\n\t}\n\tset contentFiltering(value: EditorContentFiltering) {\n\t\tthis.nativeElement ? this.nativeElement.contentFiltering = value : undefined;\n\t}\n\n\t/** @description Determines the context menu for the Editor. The context menu is triggered when the user right clicks on the content area of the Editor. */\n\t@Input()\n\tget contextMenu(): EditorContextMenu | string {\n\t\treturn this.nativeElement ? this.nativeElement.contextMenu : undefined;\n\t}\n\tset contextMenu(value: EditorContextMenu | string) {\n\t\tthis.nativeElement ? this.nativeElement.contextMenu = value : undefined;\n\t}\n\n\t/** @description Allows to customize default the context menu of the Editor. The property accepts an array of items which can be strings that represent the value of the item, or objects of the following format: { label: string, value: string }, where the label will be displayed and the value will be action value for the item. The property also accepts a function that must return an array of items with the following format function (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems } and the following arguments: target - the element that is the target of the context menu.type - the type of context menu ( whether it's a table, image, link or other)defaultItems - an array of strings which represent the default items for the context menu. */\n\t@Input()\n\tget contextMenuDataSource(): string[] | { label: string, value: 'string' }[] | Function | null {\n\t\treturn this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;\n\t}\n\tset contextMenuDataSource(value: string[] | { label: string, value: 'string' }[] | Function | null) {\n\t\tthis.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;\n\t}\n\n\t/** @description Sets the Editor's Data Export options. */\n\t@Input()\n\tget dataExport(): EditorDataExport {\n\t\treturn this.nativeElement ? this.nativeElement.dataExport : undefined;\n\t}\n\tset dataExport(value: EditorDataExport) {\n\t\tthis.nativeElement ? this.nativeElement.dataExport = value : undefined;\n\t}\n\n\t/** @description Enables or disables the Editor. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Disables content editing inside Editor. */\n\t@Input()\n\tget disableEditing(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableEditing : undefined;\n\t}\n\tset disableEditing(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableEditing = value : undefined;\n\t}\n\n\t/** @description Disables the Quick Search Bar. */\n\t@Input()\n\tget disableSearchBar(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableSearchBar : undefined;\n\t}\n\tset disableSearchBar(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableSearchBar = value : undefined;\n\t}\n\n\t/** @description Determines the edit mode for the Editor. By default the editor's content accepts and parses HTML. However if set to 'markdown' the Editor can be used as a full time Markdown Editor by parsing the makrdown to HTML in preview mode. */\n\t@Input()\n\tget editMode(): EditMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.editMode : undefined;\n\t}\n\tset editMode(value: EditMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.editMode = value : undefined;\n\t}\n\n\t/** @description Determines whether the value returned from getHTML method and Source Code view are encoded or not. */\n\t@Input()\n\tget enableHtmlEncode(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.enableHtmlEncode : undefined;\n\t}\n\tset enableHtmlEncode(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.enableHtmlEncode = value : undefined;\n\t}\n\n\t/** @description Determines whether the Tab key can insert tab chars inside the Editor or change focus (default) */\n\t@Input()\n\tget enableTabKey(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.enableTabKey : undefined;\n\t}\n\tset enableTabKey(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.enableTabKey = value : undefined;\n\t}\n\n\t/** @description Determines the time interval between results for the find and replace and search bar features. */\n\t@Input()\n\tget findAndReplaceTimeout(): number {\n\t\treturn this.nativeElement ? this.nativeElement.findAndReplaceTimeout : undefined;\n\t}\n\tset findAndReplaceTimeout(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.findAndReplaceTimeout = value : undefined;\n\t}\n\n\t/** @description Determines whether the Toolbar is hidden or not. */\n\t@Input()\n\tget hideToolbar(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideToolbar : undefined;\n\t}\n\tset hideToolbar(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideToolbar = value : undefined;\n\t}\n\n\t/** @description Determines whether the Inline Toolbar is hidden or not. */\n\t@Input()\n\tget hideInlineToolbar(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideInlineToolbar : undefined;\n\t}\n\tset hideInlineToolbar(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideInlineToolbar = value : undefined;\n\t}\n\n\t/** @description Determines the file format of the image/video that are uploaded from local storage. By default images/videos are stroed as base64. */\n\t@Input()\n\tget imageFormat(): EditorImageFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.imageFormat : undefined;\n\t}\n\tset imageFormat(value: EditorImageFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.imageFormat = value : undefined;\n\t}\n\n\t/** @description Sets the content of the Editor as HTML. Allows to insert text and HTML. */\n\t@Input()\n\tget innerHTML(): string {\n\t\treturn this.nativeElement ? this.nativeElement.innerHTML : undefined;\n\t}\n\tset innerHTML(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.innerHTML = value : undefined;\n\t}\n\n\t/** @description Defines an offset(x,y) for the Inline Toolbar positioning on the page. */\n\t@Input()\n\tget inlineToolbarOffset(): number[] {\n\t\treturn this.nativeElement ? this.nativeElement.inlineToolbarOffset : undefined;\n\t}\n\tset inlineToolbarOffset(value: number[]) {\n\t\tthis.nativeElement ? this.nativeElement.inlineToolbarOffset = value : undefined;\n\t}\n\n\t/** @description Determines the iframe settings of the Editor. When enabled the contents of the Editor are placed inside an iframe, isolated in a separate dom. The element allows to insert external resources into the iframe if needed. */\n\t@Input()\n\tget iframeSettings(): EditorIframeSettings {\n\t\treturn this.nativeElement ? this.nativeElement.iframeSettings : undefined;\n\t}\n\tset iframeSettings(value: EditorIframeSettings) {\n\t\tthis.nativeElement ? this.nativeElement.iframeSettings = value : undefined;\n\t}\n\n\t/** @description Sets or gets the license which unlocks the product. */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\n\t/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Sets a limit on the number of chars inside the Editor.  */\n\t@Input()\n\tget maxCharCount(): number {\n\t\treturn this.nativeElement ? this.nativeElement.maxCharCount : undefined;\n\t}\n\tset maxCharCount(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.maxCharCount = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets a to the element which can be used to submit the value of the Editor via a form. */\n\t@Input()\n\tget name(): string | null {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string | null) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description Determines the format of the content that will be pasted inside the Editor. */\n\t@Input()\n\tget pasteFormat(): PasteFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.pasteFormat : undefined;\n\t}\n\tset pasteFormat(value: PasteFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.pasteFormat = value : undefined;\n\t}\n\n\t/** @description Determines the placeholder that will be shown when there's no content inside the Editor. */\n\t@Input()\n\tget placeholder(): string {\n\t\treturn this.nativeElement ? this.nativeElement.placeholder : undefined;\n\t}\n\tset placeholder(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.placeholder = value : undefined;\n\t}\n\n\t/** @description Determines whether the clearFormat toolbar action should also remove inline styles from the currently selected node. */\n\t@Input()\n\tget removeStylesOnClearFormat(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.removeStylesOnClearFormat : undefined;\n\t}\n\tset removeStylesOnClearFormat(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.removeStylesOnClearFormat = value : undefined;\n\t}\n\n\t/** @description Determines whether Editor's content is required ot not. If set and the Editor's content is empty, a notification will appear to notify that the Editor cannot be empty. */\n\t@Input()\n\tget required(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.required : undefined;\n\t}\n\tset required(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.required = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines whether the value is sanitized from XSS content or not. When enabled scripts and other XSS vulnerabilities are not allowed to exist inside the Editor's as HTML content. */\n\t@Input()\n\tget sanitized(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.sanitized : undefined;\n\t}\n\tset sanitized(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.sanitized = value : undefined;\n\t}\n\n\t/** @description Determines whether the char counter is visible or not. When enabled it is displayed in the bottom right corner. If maxCharCount is set and the content characters are equal or more than 70% of the maximum char count the counter is colored in order to warn the user. If the char count is equal or more than 90% the counter is again colored with a different warning color to indicate that the counter is near maximum. When maximum is reached, text input is not allowed. */\n\t@Input()\n\tget showCharCount(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.showCharCount : undefined;\n\t}\n\tset showCharCount(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.showCharCount = value : undefined;\n\t}\n\n\t/** @description Determines whether the editor may be checked for spelling errors. */\n\t@Input()\n\tget spellCheck(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.spellCheck : undefined;\n\t}\n\tset spellCheck(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.spellCheck = value : undefined;\n\t}\n\n\t/** @description Determines the refresh interval for the Source Code/Preview Panel when Split Mode is enabled.  */\n\t@Input()\n\tget splitModeRefreshTimeout(): number {\n\t\treturn this.nativeElement ? this.nativeElement.splitModeRefreshTimeout : undefined;\n\t}\n\tset splitModeRefreshTimeout(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.splitModeRefreshTimeout = value : undefined;\n\t}\n\n\t/** @description Sets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side. */\n\t@Input()\n\tget uploadUrl(): string {\n\t\treturn this.nativeElement ? this.nativeElement.uploadUrl : undefined;\n\t}\n\tset uploadUrl(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.uploadUrl = value : undefined;\n\t}\n\n\t/** @description Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side. */\n\t@Input()\n\tget removeUrl(): string {\n\t\treturn this.nativeElement ? this.nativeElement.removeUrl : undefined;\n\t}\n\tset removeUrl(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.removeUrl = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description Determines the Toolbar items list. Each item can be string pointing to the name of the item or an object that defines a custom item or adds aditional settings to an item. The name of the items are case insensitive. An object definition should contain a name attribute that refers to the name of the item when modifing an existing toolbar item. The name attribute determines the action of the item. If set to 'custom' it is possible to create a custom toolbar item. If name attribute is not set or not valid it is treated as a separator, no a toolbar item. The following items are supported by default by the Editor: SourceCode - shows the HTML/Preview Panel by hiding the input panel. Item type - 'Toggle button'.SplitMode - shows both input and HTML/Preview Panel by splitting the Editor content in two sections. Item type - 'Toggle button'FullScreen - fits the viewport with the Editor by expanding it over the page content. Item type - 'Toggle button'.Alignment - aligns the selected content. Item type - 'Drop down'.FontName - changes the font family of the selected content. Item type - 'drop-down'.FontSize - changes the font size of the selected content. Item type - 'drop-down'.Formats - changes the format of the current selection. Itme type - 'drop-down'.TableRows - allows to insert/remove a row into a selected table element. Item type - 'drop-down'.TableColumns - allows to insert/remove a column into a selected table element. Itme type - 'drop-down'.TableVAlign - sets the vertical alignment of a selected table cell. Item type - 'drop-down'.TableStyle - sets additional styling to a selected table inside the Editor. Item type - 'drop-down'.BackgroundColor - changes the background color of the current selection. Item type - 'color-input'.FontColor - changes the font color of the current selection. Item type = 'color-input'.Bold - sets the currently selected text as bold or not. Item type - 'button'.Italic - sets the currently selected text as italic. Item type - 'button'. Underline - sets the currently selected text as underlined. Itme type - 'button'.Strikethrough - set the currently selected text as strikethrough. Item type - 'button'.Delete - deletes the current selection. Item type - 'button'.Undo - undoes the last operation. Item type - 'button'.Redo - redoes the previous operation. Item type - 'button'.Indent - indents the current selection once. Item type - 'button'.Outdent - outdents the current selection once. Item type - 'button'.OpenLink - triggers a hyperlink. Item type - 'button'.EditLink - creates/edits the selected hyperlink. Item type - 'button'.CreateLink - creates/edits the selected hyperlink. Item type - 'button'.RemoveLink - removes the currently selected hyperlink. Item type - 'button'.Hyperlink - same as createLink, triggers a Dialog Window for link creation. Item type - 'button'.Cut - Cuts the currently selected text. Item type - 'button'.Copy - copies the currently selected text. Item type - 'button'Paste - pastes the currenly copied/cut text from the Clipboard. Item type = 'button' or 'drop-down' when advanced attribute is set to 'true'.Image - triggers a Dialog Window to insert/edit an image. Item type - 'button'.Video - triggers a Dialog Window to insert/edit a video. Item type - 'button'.LowerCase - changes the current selection to lower case. Item type - 'button'.UpperCase - changes the current selection to upper case. Item type - 'button'.Print - opens the browser print preview window. Item type - 'button'.Caption - insert/remove a caption when a table is selected. Item type - 'button'.ClearFormat - removes the formatting of the currntly selected text. Item type - 'button'.Table - triggers a Dialog Window to insert a table. Item type - 'button'.TableHeader - insert/remove a header row to the currently selected table. Item type - 'button'.OrderedList - insert/remove an order list. Item type = 'button'.UnorderedList - insert/remove an unordered list. Item type - 'button'.Subscript - changes the currently selected text to subscript. Item type - 'button'.Superscript - changes the currently selected text to superscript. Item type - 'button'.FindAndReplace - opens a dialog that allows to find and replace text inside the Editor's content section. Item type - 'button'.  The inlineToolbarItems attribute is applicable only to the following items: 'table', 'image', 'hyperlink'. It accepts the same type of value as toolbarItems property but the toolbar items will be placed insinde the Inline Toolbar instead. */\n\t@Input()\n\tget toolbarItems(): ToolbarItem[] {\n\t\treturn this.nativeElement ? this.nativeElement.toolbarItems : undefined;\n\t}\n\tset toolbarItems(value: ToolbarItem[]) {\n\t\tthis.nativeElement ? this.nativeElement.toolbarItems = value : undefined;\n\t}\n\n\t/** @description Determines the toolbar mode of the Editor. The main toolbar of the Editor can appear as a Ribbon or as a Menu. */\n\t@Input()\n\tget toolbarMode(): ToolbarMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.toolbarMode : undefined;\n\t}\n\tset toolbarMode(value: ToolbarMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.toolbarMode = value : undefined;\n\t}\n\n\t/** @description Allows to configure the SingleLineRibbon appearance by changing the order and items of the groups. */\n\t@Input()\n\tget toolbarRibbonConfig(): { name: string, groups: { name: string, items: string[] }[] }[] {\n\t\treturn this.nativeElement ? this.nativeElement.toolbarRibbonConfig : undefined;\n\t}\n\tset toolbarRibbonConfig(value: { name: string, groups: { name: string, items: string[] }[] }[]) {\n\t\tthis.nativeElement ? this.nativeElement.toolbarRibbonConfig = value : undefined;\n\t}\n\n\t/** @description Determines the format of the content that will be pasted inside the Editor. */\n\t@Input()\n\tget toolbarViewMode(): ToolbarViewMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.toolbarViewMode : undefined;\n\t}\n\tset toolbarViewMode(value: ToolbarViewMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.toolbarViewMode = value : undefined;\n\t}\n\n\t/** @description Sticks the Toolbar to the top of the window and stays there while scrolling. */\n\t@Input()\n\tget toolbarSticky(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.toolbarSticky : undefined;\n\t}\n\tset toolbarSticky(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.toolbarSticky = value : undefined;\n\t}\n\n\t/** @description If is set to true, the element cannot be focused. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value of the Editor. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description A function that can be used to completly customize the Editor dialog that is used to insert/edit tables/images/videos/hyperlinks. The function accepts two arguments: target - the target dialog that is about to be opened.item - the toolbar item object that trigger the dialog. */\n\t@Input()\n\tget windowCustomizationFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.windowCustomizationFunction : undefined;\n\t}\n\tset windowCustomizationFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.windowCustomizationFunction = value : undefined;\n\t}\n\n\t/** @description This event is triggered on blur if the content is changed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\toldValue, \tvalue)\n\t*   oldValue - The old value before the change.\n\t*   value - The new value after the change.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered after user input to indicate that the content is changed via user interaction.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\toldValue, \tvalue)\n\t*   oldValue - The old value before the input change.\n\t*   value - The new value after the input change.\n\t*/\n\t@Output() onChanging: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered before a Toolbar action is started. The event can be canceled via event.preventDefault().\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tname)\n\t*   name - The name of the action.\n\t*/\n\t@Output() onActionStart: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a Toolbar action has ended.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tname)\n\t*   name - The name of the action.\n\t*/\n\t@Output() onActionEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a Context menu item has been clicked.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\toriginalEvent, \tvalue)\n\t*   originalEvent - The original click event.\n\t*   value - The value of the item.\n\t*/\n\t@Output() onContextMenuItemClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Context Menu is opened.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onContextMenuOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Context Menu is opening. The opening operation can be canceled via event.preventDefault().\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The toolbar that is the target of the operation.\n\t*/\n\t@Output() onContextMenuOpening: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Context Menu is closed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onContextMenuClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Context Menu is closing. The closing operation can be canceled via event.preventDefault().\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The toolbar that is the target of the operation.\n\t*/\n\t@Output() onContextMenuClosing: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an image/table/video resizing has started.\n\t*  @param event. The custom event. \t*/\n\t@Output() onResizeStart: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an image/table/video resizing has ended.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The element that is resized (image/table or video).\n\t*/\n\t@Output() onResizeEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the inline Toolbar is opened.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onInlineToolbarOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the inline Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The toolbar that is the target of the operation.\n\t*/\n\t@Output() onInlineToolbarOpening: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the inline Toolbar is closed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onInlineToolbarClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the inline Toolbar is closing.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   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.\n\t*/\n\t@Output() onInlineToolbarClosing: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Drop Down Toolbar is opened.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onDropDownToolbarOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Drop Down Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The toolbar that is the target of the operation.\n\t*/\n\t@Output() onDropDownToolbarOpening: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Drop Down Toolbar is closed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \towner)\n\t*   target - The toolbar that is the target of the operation.\n\t*   owner - The tooltip target (the owner of the tooltip).\n\t*/\n\t@Output() onDropDownToolbarClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Drop Down Toolbar is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget)\n\t*   target - The toolbar that is the target of the operation.\n\t*/\n\t@Output() onDropDownToolbarClosing: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered the Dialog Window is opened.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem)\n\t*   target - The window that is the target of the operation.\n\t*   item - The toolbar item is the target of the operation.\n\t*/\n\t@Output() onDialogOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered before the Dialog Window is opened. The event can be prevented via event.preventDefault().\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem)\n\t*   target - The window that is the target of the operation.\n\t*   item - The toolbar item that is the target of the operation.\n\t*/\n\t@Output() onDialogOpening: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the Dialog Window is closed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem)\n\t*   target - The window that is the target of the operation.\n\t*   item - The toolbar item that is the target of the operation.\n\t*/\n\t@Output() onDialogClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered before the Dialog Window is closing. The event can be prevented via event.preventDefault().\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem)\n\t*   target - The window that is the target of the operation.\n\t*   item - The toolbar item that is the target of the operation.\n\t*/\n\t@Output() onDialogClosing: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the uploading of an image/video is successful.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem, \tfilename, \ttype, \tsize, \tindex, \tstatus, \tserverResponse)\n\t*   target - The file upload element that is the target of the operation.\n\t*   item - The toolbar item that is the target of the operation.\n\t*   filename - The name of the uploaded file.\n\t*   type - The type of the uploaded file.\n\t*   size - The size of the uploaded file.\n\t*   index - The index of the uploaded file.\n\t*   status - The status of the uploaded file. Whether there was an error or success.\n\t*   serverResponse - The response of the remote server.\n\t*/\n\t@Output() onImageUploadSuccess: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the uploading of an image/video is unsuccessful.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttarget, \titem, \tfilename, \ttype, \tsize, \tindex, \tstatus, \tserverResponse)\n\t*   target - The file upload element that is the target of the operation.\n\t*   item - The toolbar item that is the target of the operation.\n\t*   filename - The name of the canceled file.\n\t*   type - The type of the canceled file.\n\t*   size - The size of the canceled file.\n\t*   index - The index of the canceled file.\n\t*   status - The status of the uploaded file. Whether there was an error or success.\n\t*   serverResponse - The response of the remote server.\n\t*/\n\t@Output() onImageUploadFailed: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a Toolbar item is clicked.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\toriginalEvent, \tvalue)\n\t*   originalEvent - The original click event.\n\t*   value - The name of the toolbar item that was clicked.\n\t*/\n\t@Output() onToobarItemClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a message is closed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tinstance)\n\t*   instance - The toast item that is the target of the operation.\n\t*/\n\t@Output() onMessageClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a message is opened.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tinstance)\n\t*   instance - The toast item that is the target of the operation.\n\t*/\n\t@Output() onMessageOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Adds a new Toolbar item. Example: editor.addToolbarItem({ name: &#039;customButton2&#039;, width: 100, template: &#039;&lt;smart-button&gt;Button2&lt;/smart-button&gt;&#039; }) \n\t* @param {any} itemName. The toolbar item to be added\n\t*/\n    public addToolbarItem(itemName: any): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.addToolbarItem(itemName);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.addToolbarItem(itemName);\n            });\n        }\n    }\n\n\t/** @description Blurs the content of the Editor. \n\t*/\n    public blur(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.blur();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.blur();\n            });\n        }\n    }\n\n\t/** @description Clears the content of the Editor. \n\t*/\n    public clearContent(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.clearContent();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.clearContent();\n            });\n        }\n    }\n\n\t/** @description Collapse the Toolbar if the toolbarViewMode is set to 'toggle'. \n\t*/\n    public collapseToolbar(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.collapseToolbar();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.collapseToolbar();\n            });\n        }\n    }\n\n\t/** @description Disables a Toolbar item. \n\t* @param {string} itemName. The name of the toolbar item to disable.\n\t*/\n    public disableToolbarItem(itemName: string): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.disableToolbarItem(itemName);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.disableToolbarItem(itemName);\n            });\n        }\n    }\n\n\t/** @description Expand the Toolbar if the toolbarViewMode is set to 'toggle'. \n\t*/\n    public expandToolbar(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.expandToolbar();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.expandToolbar();\n            });\n        }\n    }\n\n\t/** @description Enables a previously disabled Toolbar item. \n\t* @param {string} itemName. The name of the toolbar item to enable.\n\t*/\n    public enableToolbarItem(itemName: string): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.enableToolbarItem(itemName);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.enableToolbarItem(itemName);\n            });\n        }\n    }\n\n\t/** @description Executes a command via the native execCommand method. The method returns true or false depending on whether the execution was successful or not. The following list of commands can be eexecuted: bold - makes the currently selected content bold. Example: editor.executeCommand('bold');italic - makes the currently selected content italic. Example: editor.executeCommand('italic');undelined - makes the currently selected content underlined. Example: editor.executeCommand('underline');strikeThrough - applies a single line strike through formatting to the currently selected content. Example: editor.executeCommand('strikeThrough');superscript - sets the selected content as superscript. Example: editor.executeCommand('superscript');subscript - sets the selected content as superscript. Example: editor.executeCommand('subscript');uppercase - changes the case of the current selection to upper. Example: editor.executeCommand('uppercase');lowercase - changes the case of the current selection to lower. Example: editor.executeCommand('lowercase');foreColor - changes the font color of the current content selection. Example: editor.executeCommand('foreColor', '#000000');fontName - changes the font name for the selected content. Example: editor.executeCommand('fontName', 'Arial');fontSize - changes the font size of the currently selected content. Example: editor.executeCommand('fontSize', '15px');hiliteColor - changes the background color of current selection. Example: editor.executeCommand('hiliteColor', '#000000');justifyCenter - aligns the content to the center. Example: editor.executeCommand('justifyCenter');justifyFull - aligns the content to be fully justified. Example: editor.executeCommand('justifyFull');justifyLeft - aligns the content to the left. Example: editor.executeCommand('justifyLeft');justifyRight - aligns the content to the right. Example: editor.executeCommand('justifyRight');undo - allows to undo the previous action. Example: editor.executeCommand('undo');redo - allows to redo the previous actions. Example: editor.executeCommand('redo');createLink - creates a hyperlink in the content section of the Editor. Example: editor.executeCommand('createLink', { text: 'Links', url: 'http://', title : 'Link' });indent - indents the content with one level. Example: editor.executeCommand('indent');outdent - outdents the content with one level. Example: editor.executeCommand('outdent');insertHTML - insert an HTML content as string at the current cursor location. Example: editor.executeCommand('insertHTML', 'Text');insertOrderedList - inserts a new numbered list item. Example: editor.executeCommand('insertOrderedList');insertUnorderedList - inserts a new bulleted list item. Example: editor.executeCommand('insertUnorderedList');removeFormat - removes the formatting styles from currently selected text. Example: editor.executeCommand('removeFormat');insertText - inserts a text at the current cursor location. Example: editor.executeCommand('insertText', 'Some text to insert');insertImage - inserts an image at the current cursor location. Example: editor.executeCommand('insertImage', { url: 'https://www.htmlelements.com/demos/images/carousel-medium-2.jpg'}); \n\t* @param {string} commandName. The name of the command to execute.\n\t* @param {string | number} value?. The value for the command. Some commands require a value to be passed, others do not.\n\t* @returns {boolean}\n  */\n\tpublic async executeCommand(commandName, value?): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.executeCommand(commandName, value);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Focuses the content of the Editor. \n\t*/\n    public focus(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.focus();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.focus();\n            });\n        }\n    }\n\n\t/** @description Returns the number of characters inside the Editor's content. \n\t* @returns {number}\n  */\n\tpublic async getCharCount(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getCharCount();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Retu