@entake/particle 21.0.0 → 21.0.1
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.
|
@@ -3681,7 +3681,9 @@ class ProfilePicComponent {
|
|
|
3681
3681
|
* Image URL of the profile pic
|
|
3682
3682
|
*/
|
|
3683
3683
|
set imageUrl(imageUrl) {
|
|
3684
|
-
|
|
3684
|
+
if (imageUrl) {
|
|
3685
|
+
this.url = `url(${imageUrl})`;
|
|
3686
|
+
}
|
|
3685
3687
|
}
|
|
3686
3688
|
url = null;
|
|
3687
3689
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -3911,11 +3913,11 @@ class RichTextComponent {
|
|
|
3911
3913
|
this.editor.commands.focus(position);
|
|
3912
3914
|
}
|
|
3913
3915
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3916
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3915
3917
|
}
|
|
3916
3918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, decorators: [{
|
|
3917
3919
|
type: Component,
|
|
3918
|
-
args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
|
|
3920
|
+
args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
|
|
3919
3921
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideControls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], editorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorClass", required: false }] }], readonly: [{
|
|
3920
3922
|
type: Input
|
|
3921
3923
|
}], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }], textChanged: [{ type: i0.Output, args: ["textChanged"] }] } });
|