@kolkov/angular-editor
Version:
A simple native WYSIWYG editor for Angular 13+. Rich Text editor component for Angular.
1,320 lines • 90.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Inject, Component, Input, EventEmitter, forwardRef, HostBinding, Output, ViewChild, HostListener, SecurityContext, Attribute, ContentChild, NgModule } from '@angular/core';
import * as i1$1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i1 from '@angular/common/http';
import * as i6 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/platform-browser';
class AngularEditorService {
constructor(http, doc) {
this.http = http;
this.doc = doc;
/**
* save selection when the editor is focussed out
*/
this.saveSelection = () => {
if (this.doc.getSelection) {
const sel = this.doc.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
this.savedSelection = sel.getRangeAt(0);
this.selectedText = sel.toString();
}
}
else if (this.doc.getSelection && this.doc.createRange) {
this.savedSelection = document.createRange();
}
else {
this.savedSelection = null;
}
};
}
/**
* Executed command from editor header buttons exclude toggleEditorMode
* @param command string from triggerCommand
* @param value
*/
executeCommand(command, value) {
const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
if (commands.includes(command)) {
this.doc.execCommand('formatBlock', false, command);
return;
}
this.doc.execCommand(command, false, value);
}
/**
* Create URL link
* @param url string from UI prompt
*/
createLink(url) {
if (!url.includes('http')) {
this.doc.execCommand('createlink', false, url);
}
else {
const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
this.insertHtml(newUrl);
}
}
/**
* insert color either font or background
*
* @param color color to be inserted
* @param where where the color has to be inserted either text/background
*/
insertColor(color, where) {
const restored = this.restoreSelection();
if (restored) {
if (where === 'textColor') {
this.doc.execCommand('foreColor', false, color);
}
else {
this.doc.execCommand('hiliteColor', false, color);
}
}
}
/**
* Set font name
* @param fontName string
*/
setFontName(fontName) {
this.doc.execCommand('fontName', false, fontName);
}
/**
* Set font size
* @param fontSize string
*/
setFontSize(fontSize) {
this.doc.execCommand('fontSize', false, fontSize);
}
/**
* Create raw HTML
* @param html HTML string
*/
insertHtml(html) {
const isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
if (!isHTMLInserted) {
throw new Error('Unable to perform the operation');
}
}
/**
* restore selection when the editor is focused in
*
* saved selection when the editor is focused out
*/
restoreSelection() {
if (this.savedSelection) {
if (this.doc.getSelection) {
const sel = this.doc.getSelection();
sel.removeAllRanges();
sel.addRange(this.savedSelection);
return true;
}
else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
// this.savedSelection.select();
return true;
}
}
else {
return false;
}
}
/**
* setTimeout used for execute 'saveSelection' method in next event loop iteration
*/
executeInNextQueueIteration(callbackFn, timeout = 1e2) {
setTimeout(callbackFn, timeout);
}
/** check any selection is made or not */
checkSelection() {
const selectedText = this.savedSelection.toString();
if (selectedText.length === 0) {
throw new Error('No Selection Made');
}
return true;
}
/**
* Upload file to uploadUrl
* @param file The file
*/
uploadImage(file) {
const uploadData = new FormData();
uploadData.append('file', file, file.name);
return this.http.post(this.uploadUrl, uploadData, {
reportProgress: true,
observe: 'events',
withCredentials: this.uploadWithCredentials,
});
}
/**
* Insert image with Url
* @param imageUrl The imageUrl.
*/
insertImage(imageUrl) {
this.doc.execCommand('insertImage', false, imageUrl);
}
setDefaultParagraphSeparator(separator) {
this.doc.execCommand('defaultParagraphSeparator', false, separator);
}
createCustomClass(customClass) {
let newTag = this.selectedText;
if (customClass) {
const tagName = customClass.tag ? customClass.tag : 'span';
newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
}
this.insertHtml(newTag);
}
insertVideo(videoUrl) {
if (videoUrl.match('www.youtube.com')) {
this.insertYouTubeVideoTag(videoUrl);
}
if (videoUrl.match('vimeo.com')) {
this.insertVimeoVideoTag(videoUrl);
}
}
insertYouTubeVideoTag(videoUrl) {
const id = videoUrl.split('v=')[1];
const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
const thumbnail = `
<div style='position: relative'>
<a href='${videoUrl}' target='_blank'>
<img src="${imageUrl}" alt="click to watch"/>
<img style='position: absolute; left:200px; top:140px'
src="https://img.icons8.com/color/96/000000/youtube-play.png"/>
</a>
</div>`;
this.insertHtml(thumbnail);
}
insertVimeoVideoTag(videoUrl) {
const sub = this.http.get(`https://vimeo.com/api/oembed.json?url=${videoUrl}`).subscribe(data => {
const imageUrl = data.thumbnail_url_with_play_button;
const thumbnail = `<div>
<a href='${videoUrl}' target='_blank'>
<img src="${imageUrl}" alt="${data.title}"/>
</a>
</div>`;
this.insertHtml(thumbnail);
sub.unsubscribe();
});
}
nextNode(node) {
if (node.hasChildNodes()) {
return node.firstChild;
}
else {
while (node && !node.nextSibling) {
node = node.parentNode;
}
if (!node) {
return null;
}
return node.nextSibling;
}
}
getRangeSelectedNodes(range, includePartiallySelectedContainers) {
let node = range.startContainer;
const endNode = range.endContainer;
let rangeNodes = [];
// Special case for a range that is contained within a single node
if (node === endNode) {
rangeNodes = [node];
}
else {
// Iterate nodes until we hit the end container
while (node && node !== endNode) {
rangeNodes.push(node = this.nextNode(node));
}
// Add partially selected nodes at the start of the range
node = range.startContainer;
while (node && node !== range.commonAncestorContainer) {
rangeNodes.unshift(node);
node = node.parentNode;
}
}
// Add ancestors of the range container, if required
if (includePartiallySelectedContainers) {
node = range.commonAncestorContainer;
while (node) {
rangeNodes.push(node);
node = node.parentNode;
}
}
return rangeNodes;
}
getSelectedNodes() {
const nodes = [];
if (this.doc.getSelection) {
const sel = this.doc.getSelection();
for (let i = 0, len = sel.rangeCount; i < len; ++i) {
nodes.push.apply(nodes, this.getRangeSelectedNodes(sel.getRangeAt(i), true));
}
}
return nodes;
}
replaceWithOwnChildren(el) {
const parent = el.parentNode;
while (el.hasChildNodes()) {
parent.insertBefore(el.firstChild, el);
}
parent.removeChild(el);
}
removeSelectedElements(tagNames) {
const tagNamesArray = tagNames.toLowerCase().split(',');
this.getSelectedNodes().forEach((node) => {
if (node.nodeType === 1 &&
tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
// Remove the node and replace it with its children
this.replaceWithOwnChildren(node);
}
});
}
}
AngularEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, deps: [{ token: i1.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
AngularEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; } });
const angularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
maxHeight: 'auto',
width: 'auto',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
defaultParagraphSeparator: '',
defaultFontName: '',
defaultFontSize: '',
fonts: [
{ class: 'arial', name: 'Arial' },
{ class: 'times-new-roman', name: 'Times New Roman' },
{ class: 'calibri', name: 'Calibri' },
{ class: 'comic-sans-ms', name: 'Comic Sans MS' }
],
uploadUrl: 'v1/image',
uploadWithCredentials: false,
sanitize: true,
toolbarPosition: 'top',
outline: true,
/*toolbarHiddenButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
['heading', 'fontName', 'fontSize', 'color'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
['link', 'unlink', 'image', 'video']
]*/
};
function isDefined(value) {
return value !== undefined && value !== null;
}
class AeToolbarSetComponent {
constructor() {
}
}
AeToolbarSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AeToolbarSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]", host: { classAttribute: "angular-editor-toolbar-set" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
type: Component,
args: [{ selector: 'ae-toolbar-set, [aeToolbarSet]', host: {
'class': 'angular-editor-toolbar-set'
}, template: "<ng-content></ng-content>\n", styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"] }]
}], ctorParameters: function () { return []; } });
class AeButtonComponent {
constructor() {
this.iconName = '';
}
}
AeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: { iconName: "iconName" }, host: { properties: { "tabIndex": "-1", "type": "\"button\"" }, classAttribute: "angular-editor-button" }, ngImport: i0, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n </svg>\n</ng-container>\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555555}:host.angular-editor-button:disabled>.color-label.background{background:#555555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ae-button, button[aeButton]', host: {
'class': 'angular-editor-button',
'[tabIndex]': '-1',
'[type]': '"button"',
}, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n </svg>\n</ng-container>\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555555}:host.angular-editor-button:disabled>.color-label.background{background:#555555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { iconName: [{
type: Input
}] } });
class AeSelectComponent {
constructor(elRef, r) {
this.elRef = elRef;
this.r = r;
this.options = [];
this.disabled = false;
this.optionId = 0;
this.opened = false;
this.hidden = 'inline-block';
// eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
this.changeEvent = new EventEmitter();
this.onChange = () => {
};
this.onTouched = () => {
};
}
get label() {
return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
}
get value() {
return this.selectedOption.value;
}
ngOnInit() {
this.selectedOption = this.options[0];
if (isDefined(this.isHidden) && this.isHidden) {
this.hide();
}
}
hide() {
this.hidden = 'none';
}
optionSelect(option, event) {
event.stopPropagation();
this.setValue(option.value);
this.onChange(this.selectedOption.value);
this.changeEvent.emit(this.selectedOption.value);
this.onTouched();
this.opened = false;
}
toggleOpen(event) {
// event.stopPropagation();
if (this.disabled) {
return;
}
this.opened = !this.opened;
}
onClick($event) {
if (!this.elRef.nativeElement.contains($event.target)) {
this.close();
}
}
close() {
this.opened = false;
}
get isOpen() {
return this.opened;
}
writeValue(value) {
if (!value || typeof value !== 'string') {
return;
}
this.setValue(value);
}
setValue(value) {
let index = 0;
const selectedEl = this.options.find((el, i) => {
index = i;
return el.value === value;
});
if (selectedEl) {
this.selectedOption = selectedEl;
this.optionId = index;
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.labelButton.nativeElement.disabled = isDisabled;
const div = this.labelButton.nativeElement;
const action = isDisabled ? 'addClass' : 'removeClass';
this.r[action](div, 'disabled');
this.disabled = isDisabled;
}
handleKeyDown($event) {
if (!this.opened) {
return;
}
// console.log($event.key);
// if (KeyCode[$event.key]) {
switch ($event.key) {
case 'ArrowDown':
this._handleArrowDown($event);
break;
case 'ArrowUp':
this._handleArrowUp($event);
break;
case 'Space':
this._handleSpace($event);
break;
case 'Enter':
this._handleEnter($event);
break;
case 'Tab':
this._handleTab($event);
break;
case 'Escape':
this.close();
$event.preventDefault();
break;
case 'Backspace':
this._handleBackspace();
break;
}
// } else if ($event.key && $event.key.length === 1) {
// this._keyPress$.next($event.key.toLocaleLowerCase());
// }
}
_handleArrowDown($event) {
if (this.optionId < this.options.length - 1) {
this.optionId++;
}
}
_handleArrowUp($event) {
if (this.optionId >= 1) {
this.optionId--;
}
}
_handleSpace($event) {
}
_handleEnter($event) {
this.optionSelect(this.options[this.optionId], $event);
}
_handleTab($event) {
}
_handleBackspace() {
}
}
AeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
AeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeSelectComponent, selector: "ae-select", inputs: { options: "options", isHidden: ["hidden", "isHidden"] }, outputs: { changeEvent: "change" }, host: { listeners: { "document:click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "style.display": "this.hidden" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AeSelectComponent),
multi: true,
}
], viewQueries: [{ propertyName: "labelButton", first: true, predicate: ["labelButton"], descendants: true, static: true }], ngImport: i0, template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n </svg>\n </button>\n <span class=\"ae-picker-options\">\n <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n *ngFor=\"let item of options; let i = index\"\n [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n (click)=\"optionSelect(item, $event)\">\n {{item.label}}\n </button>\n <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\n </span>\n</span>\n", styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ae-select', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AeSelectComponent),
multi: true,
}
], template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n </svg>\n </button>\n <span class=\"ae-picker-options\">\n <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n *ngFor=\"let item of options; let i = index\"\n [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n (click)=\"optionSelect(item, $event)\">\n {{item.label}}\n </button>\n <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\n </span>\n</span>\n", styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { options: [{
type: Input
}], isHidden: [{
type: Input,
args: ['hidden']
}], hidden: [{
type: HostBinding,
args: ['style.display']
}], changeEvent: [{
type: Output,
args: ['change']
}], labelButton: [{
type: ViewChild,
args: ['labelButton', { static: true }]
}], onClick: [{
type: HostListener,
args: ['document:click', ['$event']]
}], handleKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class AeToolbarComponent {
constructor(r, editorService, er, doc) {
this.r = r;
this.editorService = editorService;
this.er = er;
this.doc = doc;
this.htmlMode = false;
this.linkSelected = false;
this.block = 'default';
this.fontName = 'Times New Roman';
this.fontSize = '3';
this.headings = [
{
label: 'Heading 1',
value: 'h1',
},
{
label: 'Heading 2',
value: 'h2',
},
{
label: 'Heading 3',
value: 'h3',
},
{
label: 'Heading 4',
value: 'h4',
},
{
label: 'Heading 5',
value: 'h5',
},
{
label: 'Heading 6',
value: 'h6',
},
{
label: 'Heading 7',
value: 'h7',
},
{
label: 'Paragraph',
value: 'p',
},
{
label: 'Predefined',
value: 'pre'
},
{
label: 'Standard',
value: 'div'
},
{
label: 'default',
value: 'default'
}
];
this.fontSizes = [
{
label: '1',
value: '1',
},
{
label: '2',
value: '2',
},
{
label: '3',
value: '3',
},
{
label: '4',
value: '4',
},
{
label: '5',
value: '5',
},
{
label: '6',
value: '6',
},
{
label: '7',
value: '7',
}
];
this.customClassId = '-1';
this.customClassList = [{ label: '', value: '' }];
// uploadUrl: string;
this.tagMap = {
BLOCKQUOTE: 'indent',
A: 'link'
};
this.select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
this.buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
this.fonts = [{ label: '', value: '' }];
this.execute = new EventEmitter();
}
set customClasses(classes) {
if (classes) {
this._customClasses = classes;
this.customClassList = this._customClasses.map((x, i) => ({ label: x.name, value: i.toString() }));
this.customClassList.unshift({ label: 'Clear Class', value: '-1' });
}
}
set defaultFontName(value) {
if (value) {
this.fontName = value;
}
}
set defaultFontSize(value) {
if (value) {
this.fontSize = value;
}
}
get isLinkButtonDisabled() {
return this.htmlMode || !Boolean(this.editorService.selectedText);
}
/**
* Trigger command from editor header buttons
* @param command string from toolbar buttons
*/
triggerCommand(command) {
this.execute.emit(command);
}
/**
* highlight editor buttons when cursor moved or positioning
*/
triggerButtons() {
if (!this.showToolbar) {
return;
}
this.buttons.forEach(e => {
const result = this.doc.queryCommandState(e);
const elementById = this.doc.getElementById(e + '-' + this.id);
if (result) {
this.r.addClass(elementById, 'active');
}
else {
this.r.removeClass(elementById, 'active');
}
});
}
/**
* trigger highlight editor buttons when cursor moved or positioning in block
*/
triggerBlocks(nodes) {
if (!this.showToolbar) {
return;
}
this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
let found = false;
this.select.forEach(y => {
const node = nodes.find(x => x.nodeName === y);
if (node !== undefined && y === node.nodeName) {
if (found === false) {
this.block = node.nodeName.toLowerCase();
found = true;
}
}
else if (found === false) {
this.block = 'default';
}
});
found = false;
if (this._customClasses) {
this._customClasses.forEach((y, index) => {
const node = nodes.find(x => {
if (x instanceof Element) {
return x.className === y.class;
}
});
if (node !== undefined) {
if (found === false) {
this.customClassId = index.toString();
found = true;
}
}
else if (found === false) {
this.customClassId = '-1';
}
});
}
Object.keys(this.tagMap).map(e => {
const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
const node = nodes.find(x => x.nodeName === e);
if (node !== undefined && e === node.nodeName) {
this.r.addClass(elementById, 'active');
}
else {
this.r.removeClass(elementById, 'active');
}
});
this.foreColour = this.doc.queryCommandValue('ForeColor');
this.fontSize = this.doc.queryCommandValue('FontSize');
this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
this.backColor = this.doc.queryCommandValue('backColor');
}
/**
* insert URL link
*/
insertUrl() {
let url = 'https:\/\/';
const selection = this.editorService.savedSelection;
if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
const parent = selection.commonAncestorContainer.parentElement;
if (parent.href !== '') {
url = parent.href;
}
}
url = prompt('Insert URL link', url);
if (url && url !== '' && url !== 'https://') {
this.editorService.createLink(url);
}
}
/**
* insert Video link
*/
insertVideo() {
this.execute.emit('');
const url = prompt('Insert Video link', `https://`);
if (url && url !== '' && url !== `https://`) {
this.editorService.insertVideo(url);
}
}
/** insert color */
insertColor(color, where) {
this.editorService.insertColor(color, where);
this.execute.emit('');
}
/**
* set font Name/family
* @param foreColor string
*/
setFontName(foreColor) {
this.editorService.setFontName(foreColor);
this.execute.emit('');
}
/**
* set font Size
* @param fontSize string
*/
setFontSize(fontSize) {
this.editorService.setFontSize(fontSize);
this.execute.emit('');
}
/**
* toggle editor mode (WYSIWYG or SOURCE)
* @param m boolean
*/
setEditorMode(m) {
const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
if (m) {
this.r.addClass(toggleEditorModeButton, 'active');
}
else {
this.r.removeClass(toggleEditorModeButton, 'active');
}
this.htmlMode = m;
}
/**
* Upload image when file is selected.
*/
onFileChanged(event) {
const file = event.target.files[0];
if (file.type.includes('image/')) {
if (this.upload) {
this.upload(file).subscribe((response) => this.watchUploadImage(response, event));
}
else if (this.uploadUrl) {
this.editorService.uploadImage(file).subscribe((response) => this.watchUploadImage(response, event));
}
else {
const reader = new FileReader();
reader.onload = (e) => {
const fr = e.currentTarget;
this.editorService.insertImage(fr.result.toString());
};
reader.readAsDataURL(file);
}
}
}
watchUploadImage(response, event) {
const { imageUrl } = response.body;
this.editorService.insertImage(imageUrl);
event.srcElement.value = null;
}
/**
* Set custom class
*/
setCustomClass(classId) {
if (classId === '-1') {
this.execute.emit('clear');
}
else {
this.editorService.createCustomClass(this._customClasses[+classId]);
}
}
isButtonHidden(name) {
if (!name) {
return false;
}
if (!(this.hiddenButtons instanceof Array)) {
return false;
}
let result;
for (const arr of this.hiddenButtons) {
if (arr instanceof Array) {
result = arr.find(item => item === name);
}
if (result) {
break;
}
}
return result !== undefined;
}
focus() {
this.execute.emit('focus');
console.log('focused');
}
}
AeToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
AeToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeToolbarComponent, selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]", inputs: { id: "id", uploadUrl: "uploadUrl", upload: "upload", showToolbar: "showToolbar", fonts: "fonts", customClasses: "customClasses", defaultFontName: "defaultFontName", defaultFontSize: "defaultFontSize", hiddenButtons: "hiddenButtons" }, outputs: { execute: "execute" }, viewQueries: [{ propertyName: "myInputFile", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\n <div aeToolbarSet>\n <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n </button>\n <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n [hidden]=\"isButtonHidden('redo')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n </button>\n <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n </button>\n <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n </button>\n <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('strikeThrough')\">\n </button>\n <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n </button>\n <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('superscript')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyLeft')\">\n </button>\n <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyCenter')\">\n </button>\n <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyRight')\">\n </button>\n <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyFull')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n (click)=\"triggerCommand('indent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n </button>\n <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n (click)=\"triggerCommand('outdent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertUnorderedList')\">\n </button>\n <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertOrderedList')\">\n </button>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-heading\" [options]=\"headings\"\n [(ngModel)]=\"block\"\n (change)=\"triggerCommand(block)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('heading')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font\" [options]=\"fonts\"\n [(ngModel)]=\"fontName\"\n (change)=\"setFontName(fontName)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontName')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n [(ngModel)]=\"fontSize\"\n (change)=\"setFontSize(fontSize)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontSize')\"\n tabindex=\"-1\">\n </ae-select>\n </div>\n <div aeToolbarSet>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n #fgInput>\n <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n (click)=\"focus(); ; fgInput.click()\"\n title=\"Text Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n </button>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n #bgInput>\n <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n (click)=\"focus(); ; bgInput.click()\"\n title=\"Background Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n </button>\n </div>\n <div *ngIf=\"_customClasses\" aeToolbarSet>\n <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n [(ngModel)]=\"customClassId\"\n (change)=\"setCustomClass(customClassId)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('customClasses')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n </button>\n <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n </button>\n <input\n style=\"display: none\"\n accept=\"image/*\"\n type=\"file\" (change)=\"onFileChanged($event)\"\n #fileInput>\n <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n title=\"Insert Image\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n </button>\n <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertVideo')\">\n </button>\n <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n class=\"angular-editor-button\"\n (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n </button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}.select-heading .default{font-size:16px}.select-heading .h1{font-size:24px}.select-heading .h2{font-size:20px}.select-heading .h3{font-size:16px}.select-heading .h4{font-size:15px}.select-heading .h5{font-size:14px}.select-heading .h6{font-size:13px}.select-heading .div,.select-heading .pre{font-size:12px}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}\n"], components: [{ type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]" }, { type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: ["iconName"] }, { type: AeSelectComponent, selector: "ae-select", inputs: ["options", "hidden"], outputs: ["change"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarComponent, decorators: [{
type: Component,
args: [{ selector: 'angular-editor-toolbar, ae-toolbar, div[aeToolbar]', template: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\n <div aeToolbarSet>\n <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n </button>\n <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n [hidden]=\"isButtonHidden('redo')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n </button>\n <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n </button>\n <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n </button>\n <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('strikeThrough')\">\n </button>\n <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n </button>\n <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('superscript')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyLeft')\">\n </button>\n <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyCenter')\">\n </button>\n <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyRight')\">\n </button>\n <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyFull')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n (click)=\"triggerCommand('indent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n </button>\n <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n (click)=\"triggerCommand('outdent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertUnorderedList')\">\n </button>\n <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertOrderedList')\">\n </button>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-heading\" [options]=\"headings\"\n [(ngModel)]=\"block\"\n (change)=\"triggerCommand(block)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('heading')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font\" [options]=\"fonts\"\n [(ngModel)]=\"fontName\"\n (change)=\"setFontName(fontName)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontName')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n [(ngModel)]=\"fontSize\"\n (change)=\"setFontSize(fontSize)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontSize')\"\n tabindex=\"-1\">\n </ae-select>\n </div>\n <div aeToolbarSet>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n #fgInput>\n <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n (click)=\"focus(); ; fgInput.click()\"\n title=\"Text Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n </button>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n #bgInput>\n <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n (click)=\"focus(); ; bgInput.click()\"\n title=\"Background Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n </button>\n </div>\n <div *ngIf=\"_customClasses\" aeToolbarSet>\n <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n [(ngModel)]=\"customClassId\"\n (change)=\"setCustomClass(customClassId)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('customClasses')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n </button>\n <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n </button>\n <input\n style=\"display: none\"\n accept=\"image/*\"\n type=\"file\" (change)=\"onFileChanged($event)\"\n #fileInput>\n <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n title=\"Insert Image\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n </button>\n <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertVideo')\">\n </button>\n <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n class=\"angular-editor-button\"\n (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n </button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}.select-heading .default{font-size:16px}.select-heading .h1{font-size:24px}.select-heading .h2{font-size:20px}.select-heading .h3{font-size:16px}.select-heading .h4{font-size:15px}.select-heading .h5{font-size:14px}.select-heading .h6{font-size:13px}.select-heading .div,.select-heading .pre{font-size:12px}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}\n"] }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: AngularEditorService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; }, propDecorators: { id: [{
type: Input
}], uploadUrl: [{
type: Input
}], upload: [{
type: Input
}], showToolbar: [{
type: Input
}], fonts: [{
type: Input
}], customClasses: [{
type: Input
}], defaultFontName: [{
type: Input
}], defaultFontSize: [{
type: Input
}], hiddenButtons: [{
type: Input
}], execute: [{
type: Output
}], myInputFile: [{
type: ViewChild,
args: ['fileInput', { static: true }]
}] } });
class AngularEditorComponent {
constructor(r, editorService, doc, sanitizer, cdRef, defaultTabIndex, autoFocus) {
this.r = r;
this.editorService = editorService;
this.doc = doc;
this.sanitizer = sanitizer;
this.cdRef = cdRef;
this.autoFocus = autoFocus;
this.modeVisual = true;
this.showPlaceholder = false;
this.disabled = false;
this.focused = false;
this.touched = false;
this.changed = false;
this.id = '';
this.config = angularEditorConfig;
this.placeholder = '';
this.executeCommandFn = this.executeCommand.bind(this);
this.viewMode = new EventEmitter();
/** emits `blur` event when focused out from the textarea */
// eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
this.blurEvent = new EventEmitter();
/** emits `focus` event when focused in to the textarea */
// eslint-disable-next-line @angular-eslint/no-output-rename, @angular-eslint/no-output-native
this.focusEvent = new EventEmitter();
this.tabindex = -1;
const parsedTabIndex = Number(defaultTabIndex);
this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
}
onFocus() {
this.focus();
}
ngOnInit() {
this.config.toolbarPosition = this.config.toolbarPosition ? this.config.toolbarPosition : angularEditorConfig.toolbarPosition;
}
ngAfterViewInit() {
if (isDefined(this.autoFocus)) {
this.focus();
}
}
onPaste(event) {
if (this.config.rawPaste) {
event.preventDefault();
const text = event.clipboardData.getData('text/plain');
document.execCommand('insertHTML', false, text);
return text;
}
}
/**
* Executed command from editor header buttons
* @param command string from triggerCommand
* @param value
*/
executeCommand(command, value) {
this.focus();
if (command === 'focus') {
return;
}
if (command === 'toggleEditorMode') {
this.toggleEditorMode(this.modeVisual);
}
else if (command !== '') {
if (command === 'clear') {
this.editorService.removeSelectedElements(this.getCustomTags());
this.onContentChange(this.textArea.nativeElement);
}
else if (command === 'default') {
this.editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre');
this.onContentChange(this.textArea.nativeElement);
}
else {
this.editorService.executeCommand(command, value);
}
this.exec();
}
}
/**
* focus event
*/
onTextAreaFocus(event) {
if (this.focused) {
event.stopPropagation();
return;
}
this.focused = true;
this.focusEvent.emit(event);
if (!this.touched || !this.changed) {
this.editorService.executeInNextQueueIteration(() => {
this.configure();
this.touched = true;
});
}
}
/**
* @description fires when cursor leaves textarea
*/
onTextAreaMouseOut(event) {
this.editorService.saveSelection();
}
/**
* blur event
*/
onTextAreaBlur(event) {
/**
* save selection if focussed out
*/
this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
if (typeof this.onTouched === 'function') {
this.onTouched();
}
if (event.relatedTarget !== null) {
const parent = event.relatedTarget.parentElement;
if (!parent.classList.contains('angular-editor-toolbar-set') && !parent.classList.contains('ae-picker')) {
this.blurEvent.emit(event);
this.focused = false;
}
}
}
/**
* focus the text area when the editor is focused
*/
focus() {
if (this.modeVisual) {
this.textArea.nativeElement.focus();
}
else {
const sourceText = this.doc.getElementById('sourceText' + this.id);
sourceText.focus();
this.focused = true;
}
}
/**
* Executed from the contenteditable section while the input property changes
* @param element html element from contenteditable
*/
onContentChange(element) {
let html = '';
if (this.modeVisual) {
html = element.innerHTML;
}
else {
html = element.innerText;
}
if ((!html || html === '<br>')) {
html = '';
}
if (typeof this.onChange === 'function') {
this.onChange(this.config.sanitize || this.config.sanitize === undefined ?
this.sanitizer.sanitize(SecurityContext.HTML, html) : html);
if ((!html) !== this.showPlaceholder) {
this.togglePlaceholder(this.showPlaceholder);
}
}
this.changed = true;
}
/**
* Set the function to be called
* when the control receives a change event.
*
* @param fn a function
*/
registerOnChange(fn) {
this.onChange = e => (e === '<br>' ? fn('') : fn(e));
}
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param fn a function
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Write a new value to the element.
*
* @param value value to be executed when there is a change in contenteditable
*/
writeValue(value) {
if ((!value || value === '<br>' || value === '') !== this.showPlaceholder) {
this.togglePlaceholder(this.showPlaceholder);
}
if (value === undefined || value === '' || value === '<br>') {
value = null;
}
this.refreshView(value);
}
/**
* refresh view/HTML of the editor
*
* @param value html string from the editor
*/
refreshView(value) {
const normalizedValue = value === null ? '' : value;
this.r.setProperty(this.textArea.nativeElement, 'innerHTML', normalizedValue);
return;
}
/**
* toggles placeholder based on input string
*
* @param value A HTML string from the editor
*/
togglePlaceholder(value) {
if (!value) {
this.r.addClass(this.editorWrapper.nativeElement, 'show-placeholder');
this.showPlaceholder = true;
}
else {
this.r.removeClass(this.editorWrapper.nativeElement, 'show-placeholder');
this.showPlaceholder = false;
}
}
/**
* Implements disabled state for this element
*
* @param isDisabled Disabled flag
*/
setDisabledState(isDisabled) {
const div = this.textArea.nativeElement;
const action = isDisabled ? 'addClass' : 'removeClass';
this.r[action](div, 'disabled');
this.disabled = isDisabled;
}
/**
* toggles editor mode based on bToSource bool
*
* @param bToSource A boolean value from the editor
*/
toggleEditorMode(bToSource) {
let oContent;
const editableElement = this.textArea.nativeElement;
if (bToSource) {
oContent = this.r.createText(editableElement.innerHTML);
this.r.setProperty(editableElement, 'innerHTML', '');
this.r.setProperty(editableElement, 'contentEditable', false);
const oPre = this.r.createElement('pre');
this.r.setStyle(oPre, 'margin', '0');
this.r.setStyle(oPre, 'outline', 'none');
const oCode = this.r.createElement('code');
this.r.setProperty(oCode, 'id', 'sourceText' + this.id);
this.r.setStyle(oCode, 'display', 'block');
this.r.setStyle(oCode, 'white-space', 'pre-wrap');
this.r.setStyle(oCode, 'word-break', 'keep-all');
this.r.setStyle(oCode, 'outline', 'none');
this.r.setStyle(oCode, 'margin', '0');
this.r.setStyle(oCode, 'background-color', '#fff5b9');
this.r.setProperty(oCode, 'contentEditable', true);
this.r.appendChild(oCode, oContent);
this.focusInstance = this.r.listen(oCode, 'focus', (event) => this.onTextAreaFocus(event));
this.blurInstance = this.r.listen(oCode, 'blur', (event) => this.onTextAreaBlur(event));
this.r.appendChild(oPre, oCode);
this.r.appendChild(editableElement, oPre);
// ToDo move to service
this.doc.execCommand('defaultParagraphSeparator', false, 'div');
this.modeVisual = false;
this.viewMode.emit(false);
oCode.focus();
}
else {
if (this.doc.querySelectorAll) {
this.r.setProperty(editableElement, 'innerHTML', editableElement.innerText);
}
else {
oContent = this.doc.createRange();
oContent.selectNodeContents(editableElement.firstChild);
this.r.setProperty(editableElement, 'innerHTML', oContent.toString());
}
this.r.setProperty(editableElement, 'contentEditable', true);
this.modeVisual = true;
this.viewMode.emit(true);
this.onContentChange(editableElement);
editableElement.focus();
}
this.editorToolbar.setEditorMode(!this.modeVisual);
}
/**
* toggles editor buttons when cursor moved or positioning
*
* Send a node array from the contentEditable of the editor
*/
exec() {
this.editorToolbar.triggerButtons();
let userSelection;
if (this.doc.getSelection) {
userSelection = this.doc.getSelection();
this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
}
let a = userSelection.focusNode;
const els = [];
while (a && a.id !== 'editor') {
els.unshift(a);
a = a.parentNode;
}
this.editorToolbar.triggerBlocks(els);
}
configure() {
this.editorService.uploadUrl = this.config.uploadUrl;
this.editorService.uploadWithCredentials = this.config.uploadWithCredentials;
if (this.config.defaultParagraphSeparator) {
this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
}
if (this.config.defaultFontName) {
this.editorService.setFontName(this.config.defaultFontName);
}
if (this.config.defaultFontSize) {
this.editorService.setFontSize(this.config.defaultFontSize);
}
}
getFonts() {
const fonts = this.config.fonts ? this.config.fonts : angularEditorConfig.fonts;
return fonts.map(x => {
return { label: x.name, value: x.name };
});
}
getCustomTags() {
const tags = ['span'];
this.config.customClasses.forEach(x => {
if (x.tag !== undefined) {
if (!tags.includes(x.tag)) {
tags.push(x.tag);
}
}
});
return tags.join(',');
}
ngOnDestroy() {
if (this.blurInstance) {
this.blurInstance();
}
if (this.focusInstance) {
this.focusInstance();
}
}
filterStyles(html) {
html = html.replace('position: fixed;', '');
return html;
}
}
AngularEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: DOCUMENT }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }, { token: 'autofocus', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
AngularEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularEditorComponent, selector: "angular-editor", inputs: { id: "id", config: "config", placeholder: "placeholder", tabIndex: "tabIndex" }, outputs: { html: "html", viewMode: "viewMode", blurEvent: "blur", focusEvent: "focus" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AngularEditorComponent),
multi: true
},
AngularEditorService
], queries: [{ propertyName: "customButtonsTemplateRef", first: true, predicate: ["customButtons"], descendants: true }], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "editorWrapper", first: true, predicate: ["editorWrapper"], descendants: true, static: true }, { propertyName: "editorToolbar", first: true, predicate: ["editorToolbar"], descendants: true }], ngImport: i0, template: "<div\n class=\"angular-editor\"\n #angularEditor\n [style.width]=\"config.width\"\n [style.minWidth]=\"config.minWidth\"\n [ngClass]=\"{\n 'bottom': config.toolbarPosition === 'bottom'\n }\"\n>\n <angular-editor-toolbar\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n >\n </ng-container>\n </angular-editor-toolbar>\n\n <div\n class=\"angular-editor-wrapper\"\n #editorWrapper\n >\n <div\n #editor\n class=\"angular-editor-textarea\"\n [attr.contenteditable]=\"config.editable\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [attr.translate]=\"config.translate\"\n [attr.spellcheck]=\"config.spellcheck\"\n [style.height]=\"config.height\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxHeight]=\"config.maxHeight\"\n [style.outline]=\"config.outline === false ? 'none': undefined\"\n (input)=\"onContentChange($event.target)\"\n (focus)=\"onTextAreaFocus($event)\"\n (blur)=\"onTextAreaBlur($event)\"\n (click)=\"exec()\"\n (keyup)=\"exec()\"\n (mouseout)=\"onTextAreaMouseOut($event)\"\n (paste)=\"onPaste($event)\"\n >\n </div>\n <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n </div>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"], components: [{ type: AeToolbarComponent, selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]", inputs: ["id", "uploadUrl", "upload", "showToolbar", "fonts", "customClasses", "defaultFontName", "defaultFontSize", "hiddenButtons"], outputs: ["execute"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorComponent, decorators: [{
type: Component,
args: [{ selector: 'angular-editor', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AngularEditorComponent),
multi: true
},
AngularEditorService
], template: "<div\n class=\"angular-editor\"\n #angularEditor\n [style.width]=\"config.width\"\n [style.minWidth]=\"config.minWidth\"\n [ngClass]=\"{\n 'bottom': config.toolbarPosition === 'bottom'\n }\"\n>\n <angular-editor-toolbar\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n >\n </ng-container>\n </angular-editor-toolbar>\n\n <div\n class=\"angular-editor-wrapper\"\n #editorWrapper\n >\n <div\n #editor\n class=\"angular-editor-textarea\"\n [attr.contenteditable]=\"config.editable\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [attr.translate]=\"config.translate\"\n [attr.spellcheck]=\"config.spellcheck\"\n [style.height]=\"config.height\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxHeight]=\"config.maxHeight\"\n [style.outline]=\"config.outline === false ? 'none': undefined\"\n (input)=\"onContentChange($event.target)\"\n (focus)=\"onTextAreaFocus($event)\"\n (blur)=\"onTextAreaBlur($event)\"\n (click)=\"exec()\"\n (keyup)=\"exec()\"\n (mouseout)=\"onTextAreaMouseOut($event)\"\n (paste)=\"onPaste($event)\"\n >\n </div>\n <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n </div>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: AngularEditorService }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Attribute,
args: ['tabindex']
}] }, { type: undefined, decorators: [{
type: Attribute,
args: ['autofocus']
}] }]; }, propDecorators: { id: [{
type: Input
}], config: [{
type: Input
}], placeholder: [{
type: Input
}], tabIndex: [{
type: Input
}], html: [{
type: Output
}], textArea: [{
type: ViewChild,
args: ['editor', { static: true }]
}], editorWrapper: [{
type: ViewChild,
args: ['editorWrapper', { static: true }]
}], editorToolbar: [{
type: ViewChild,
args: ['editorToolbar']
}], customButtonsTemplateRef: [{
type: ContentChild,
args: ["customButtons"]
}], viewMode: [{
type: Output
}], blurEvent: [{
type: Output,
args: ['blur']
}], focusEvent: [{
type: Output,
args: ['focus']
}], tabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], onFocus: [{
type: HostListener,
args: ['focus']
}] } });
class AngularEditorModule {
}
AngularEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AngularEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent] });
AngularEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, imports: [[
CommonModule, FormsModule, ReactiveFormsModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule, FormsModule, ReactiveFormsModule
],
declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
}]
}] });
/*
* Public API Surface of angular-editor
*/
/**
* Generated bundle index. Do not edit.
*/
export { AeButtonComponent, AeSelectComponent, AeToolbarComponent, AeToolbarSetComponent, AngularEditorComponent, AngularEditorModule, AngularEditorService };
//# sourceMappingURL=kolkov-angular-editor.mjs.map