@phuong-tran-redoc/document-engine-angular 0.0.36 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6054,7 +6054,7 @@ class ToolbarComponent {
|
|
|
6054
6054
|
this.toolbarService.emit('printValue');
|
|
6055
6055
|
}
|
|
6056
6056
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6057
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6057
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n [class.active]=\"editor.isActive('pageBreak')\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6058
6058
|
}
|
|
6059
6059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
6060
6060
|
type: Component,
|
|
@@ -6067,7 +6067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
6067
6067
|
SelectOptionDirective,
|
|
6068
6068
|
ToolbarBubbleMenuComponent,
|
|
6069
6069
|
EditorBubbleMenuComponent,
|
|
6070
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
|
|
6070
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n [class.active]=\"editor.isActive('pageBreak')\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
|
|
6071
6071
|
}], propDecorators: { editor: [{
|
|
6072
6072
|
type: Input
|
|
6073
6073
|
}], capabilities: [{
|