source: trip-planner-front/node_modules/primeng/fesm2020/primeng-editor.mjs@ 59329aa

Last change on this file since 59329aa was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 12.9 KB
Line 
1import * as i0 from '@angular/core';
2import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ContentChild, Input, ContentChildren, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { Header, PrimeTemplate, SharedModule } from 'primeng/api';
6import { DomHandler } from 'primeng/dom';
7import { NG_VALUE_ACCESSOR } from '@angular/forms';
8import * as Quill from 'quill';
9
10const EDITOR_VALUE_ACCESSOR = {
11 provide: NG_VALUE_ACCESSOR,
12 useExisting: forwardRef(() => Editor),
13 multi: true
14};
15class Editor {
16 constructor(el) {
17 this.el = el;
18 this.onTextChange = new EventEmitter();
19 this.onSelectionChange = new EventEmitter();
20 this.onInit = new EventEmitter();
21 this.onModelChange = () => { };
22 this.onModelTouched = () => { };
23 }
24 ngAfterViewInit() {
25 let editorElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content');
26 let toolbarElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar');
27 let defaultModule = { toolbar: toolbarElement };
28 let modules = this.modules ? { ...defaultModule, ...this.modules } : defaultModule;
29 this.quill = new Quill(editorElement, {
30 modules: modules,
31 placeholder: this.placeholder,
32 readOnly: this.readonly,
33 theme: 'snow',
34 formats: this.formats,
35 bounds: this.bounds,
36 debug: this.debug,
37 scrollingContainer: this.scrollingContainer
38 });
39 if (this.value) {
40 this.quill.setContents(this.quill.clipboard.convert(this.value));
41 }
42 this.quill.on('text-change', (delta, oldContents, source) => {
43 if (source === 'user') {
44 let html = DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;
45 let text = this.quill.getText().trim();
46 if (html === '<p><br></p>') {
47 html = null;
48 }
49 this.onTextChange.emit({
50 htmlValue: html,
51 textValue: text,
52 delta: delta,
53 source: source
54 });
55 this.onModelChange(html);
56 this.onModelTouched();
57 }
58 });
59 this.quill.on('selection-change', (range, oldRange, source) => {
60 this.onSelectionChange.emit({
61 range: range,
62 oldRange: oldRange,
63 source: source
64 });
65 });
66 this.onInit.emit({
67 editor: this.quill
68 });
69 }
70 ngAfterContentInit() {
71 this.templates.forEach((item) => {
72 switch (item.getType()) {
73 case 'header':
74 this.headerTemplate = item.template;
75 break;
76 }
77 });
78 }
79 writeValue(value) {
80 this.value = value;
81 if (this.quill) {
82 if (value)
83 this.quill.setContents(this.quill.clipboard.convert(value));
84 else
85 this.quill.setText('');
86 }
87 }
88 registerOnChange(fn) {
89 this.onModelChange = fn;
90 }
91 registerOnTouched(fn) {
92 this.onModelTouched = fn;
93 }
94 getQuill() {
95 return this.quill;
96 }
97 get readonly() {
98 return this._readonly;
99 }
100 set readonly(val) {
101 this._readonly = val;
102 if (this.quill) {
103 if (this._readonly)
104 this.quill.disable();
105 else
106 this.quill.enable();
107 }
108 }
109}
110Editor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
111Editor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Editor, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onInit: "onInit" }, host: { classAttribute: "p-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
112 <div [ngClass]="'p-editor-container'" [class]="styleClass">
113 <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate">
114 <ng-content select="p-header"></ng-content>
115 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
116 </div>
117 <div class="p-editor-toolbar" *ngIf="!toolbar && !headerTemplate">
118 <span class="ql-formats">
119 <select class="ql-header">
120 <option value="1">Heading</option>
121 <option value="2">Subheading</option>
122 <option selected>Normal</option>
123 </select>
124 <select class="ql-font">
125 <option selected>Sans Serif</option>
126 <option value="serif">Serif</option>
127 <option value="monospace">Monospace</option>
128 </select>
129 </span>
130 <span class="ql-formats">
131 <button class="ql-bold" aria-label="Bold" type="button"></button>
132 <button class="ql-italic" aria-label="Italic" type="button"></button>
133 <button class="ql-underline" aria-label="Underline" type="button"></button>
134 </span>
135 <span class="ql-formats">
136 <select class="ql-color"></select>
137 <select class="ql-background"></select>
138 </span>
139 <span class="ql-formats">
140 <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button>
141 <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button>
142 <select class="ql-align">
143 <option selected></option>
144 <option value="center">center</option>
145 <option value="right">right</option>
146 <option value="justify">justify</option>
147 </select>
148 </span>
149 <span class="ql-formats">
150 <button class="ql-link" aria-label="Insert Link" type="button"></button>
151 <button class="ql-image" aria-label="Insert Image" type="button"></button>
152 <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button>
153 </span>
154 <span class="ql-formats">
155 <button class="ql-clean" aria-label="Remove Styles" type="button"></button>
156 </span>
157 </div>
158 <div class="p-editor-content" [ngStyle]="style"></div>
159 </div>
160 `, isInline: true, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
161i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Editor, decorators: [{
162 type: Component,
163 args: [{ selector: 'p-editor', template: `
164 <div [ngClass]="'p-editor-container'" [class]="styleClass">
165 <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate">
166 <ng-content select="p-header"></ng-content>
167 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
168 </div>
169 <div class="p-editor-toolbar" *ngIf="!toolbar && !headerTemplate">
170 <span class="ql-formats">
171 <select class="ql-header">
172 <option value="1">Heading</option>
173 <option value="2">Subheading</option>
174 <option selected>Normal</option>
175 </select>
176 <select class="ql-font">
177 <option selected>Sans Serif</option>
178 <option value="serif">Serif</option>
179 <option value="monospace">Monospace</option>
180 </select>
181 </span>
182 <span class="ql-formats">
183 <button class="ql-bold" aria-label="Bold" type="button"></button>
184 <button class="ql-italic" aria-label="Italic" type="button"></button>
185 <button class="ql-underline" aria-label="Underline" type="button"></button>
186 </span>
187 <span class="ql-formats">
188 <select class="ql-color"></select>
189 <select class="ql-background"></select>
190 </span>
191 <span class="ql-formats">
192 <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button>
193 <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button>
194 <select class="ql-align">
195 <option selected></option>
196 <option value="center">center</option>
197 <option value="right">right</option>
198 <option value="justify">justify</option>
199 </select>
200 </span>
201 <span class="ql-formats">
202 <button class="ql-link" aria-label="Insert Link" type="button"></button>
203 <button class="ql-image" aria-label="Insert Image" type="button"></button>
204 <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button>
205 </span>
206 <span class="ql-formats">
207 <button class="ql-clean" aria-label="Remove Styles" type="button"></button>
208 </span>
209 </div>
210 <div class="p-editor-content" [ngStyle]="style"></div>
211 </div>
212 `, providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
213 'class': 'p-element'
214 }, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"] }]
215 }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onTextChange: [{
216 type: Output
217 }], onSelectionChange: [{
218 type: Output
219 }], toolbar: [{
220 type: ContentChild,
221 args: [Header]
222 }], style: [{
223 type: Input
224 }], styleClass: [{
225 type: Input
226 }], placeholder: [{
227 type: Input
228 }], formats: [{
229 type: Input
230 }], modules: [{
231 type: Input
232 }], bounds: [{
233 type: Input
234 }], scrollingContainer: [{
235 type: Input
236 }], debug: [{
237 type: Input
238 }], onInit: [{
239 type: Output
240 }], templates: [{
241 type: ContentChildren,
242 args: [PrimeTemplate]
243 }], readonly: [{
244 type: Input
245 }] } });
246class EditorModule {
247}
248EditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
249EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule], exports: [Editor, SharedModule] });
250EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, imports: [[CommonModule], SharedModule] });
251i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, decorators: [{
252 type: NgModule,
253 args: [{
254 imports: [CommonModule],
255 exports: [Editor, SharedModule],
256 declarations: [Editor]
257 }]
258 }] });
259
260/**
261 * Generated bundle index. Do not edit.
262 */
263
264export { EDITOR_VALUE_ACCESSOR, Editor, EditorModule };
Note: See TracBrowser for help on using the repository browser.