@leanix/components 0.4.654 → 0.4.655
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.
|
@@ -10468,7 +10468,7 @@ class RichTextEditorToolbarComponent {
|
|
|
10468
10468
|
this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
|
|
10469
10469
|
}
|
|
10470
10470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: "editor" }, ngImport: i0, template: "<div class=\"toolbar\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.list' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.orderedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.justify' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.table' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: "editor" }, ngImport: i0, template: "<div class=\"toolbar\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10472
10472
|
}
|
|
10473
10473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
|
|
10474
10474
|
type: Component,
|
|
@@ -10480,8 +10480,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
10480
10480
|
OptionComponent,
|
|
10481
10481
|
ExtensionEnabledPipe,
|
|
10482
10482
|
TranslatePipe,
|
|
10483
|
-
LinkModalComponent
|
|
10484
|
-
|
|
10483
|
+
LinkModalComponent,
|
|
10484
|
+
TooltipDirective
|
|
10485
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
|
|
10485
10486
|
}], propDecorators: { editor: [{
|
|
10486
10487
|
type: Input,
|
|
10487
10488
|
args: [{ required: true }]
|