@talrace/ngx-noder 0.0.3 → 0.0.5

package/lib/+shared/add-link-dialog/add-link-dialog.component.d.ts

@@ -13,6 +13,7 @@ export declare class AddLinkDialogComponent {
     dialogRef: MatDialogRef<AddLinkDialogComponent>;
     data: AddLinkDialogOptions;
     private fb;
+    modal: boolean;
     form: FormGroup<{
         text: FormControl<string>;
         link: FormControl<string>;

package/lib/+shared/confirm-dialog/confirm-dialog.component.d.ts

@@ -9,6 +9,7 @@ export interface IDialogData {
 export declare class ConfirmDialogComponent {
     data: IDialogData;
     private ref;
+    modal: boolean;
     constructor(data: IDialogData, ref: MatDialogRef<ConfirmDialogComponent>);
     onClose(status: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogComponent, never>;

package/lib/+shared/editor/core/editor.d.ts

@@ -4,11 +4,12 @@ import { Subscription } from 'rxjs';
 import { BreakTypes } from './enums/break-types.enum';
 import { CommandsService } from '../../services/commands.service';
 import { DocxModel } from '../../../models/generated/docx.model';
-import { EditorService } from '../interaction/editor.service';
 import { EditSession } from './edit.session';
+import { EditorService } from '../interaction/editor.service';
 import { ElementDataModel } from '../custom-components/external-element/models/element-data.model';
 import { ElementModel } from '../../../models/generated/element.model';
 import { EventEmitting } from './base/event-emitting';
+import { IToolbarStyles } from './interfaces/toolbar-styles.interface';
 import { ImageDataModel } from '../../../models/generated/image-data.model';
 import { ImageModel } from '../../../models/generated/image.model';
 import { InputHandler } from '../interaction/input.handler';
@@ -16,9 +17,8 @@ import { InsertBreakModel } from '../../../models/generated/insert-break.model';
 import { InsertElementModel } from '../../../models/generated/insert-element.model';
 import { InsertImageModel } from '../../../models/generated/insert-image.model';
 import { InsertLinkModel } from '../../../models/generated/insert-link.model';
-import { InsertTableModel } from '../../../models/generated/insert-table.model';
 import { InsertTabModel } from '../../../models/generated/insert-tab.model';
-import { IToolbarStyles } from './interfaces/toolbar-styles.interface';
+import { InsertTableModel } from '../../../models/generated/insert-table.model';
 import { LinkDataModel } from '../../../models/generated/link-data.model';
 import { MouseHandler } from '../interaction/mouse.handler';
 import { NoderEdgeComponent } from './components/edges/edge.component';

package/lib/+shared/editor/core/helpers/rendering.helper.d.ts

@@ -7,7 +7,7 @@ import { ICustomComponents } from '../../custom-components/shared/interfaces/cus
 import { Paragraph } from '../paging/paragraph';
 import { TextLineInfo } from '../paging/text-line-info';
 export declare class RenderingHelper {
-    static createLineElement(lineInfo: TextLineInfo, numberingOffsetLeft: number): HTMLElement;
+    static createLineElement(lineInfo: TextLineInfo, numberingOffsetLeft: number, scalingRatio: number): HTMLElement;
     static renderContentSimpleLine(domContent: {
         currentElement: HTMLElement;
         parentNode: Node;
@@ -15,8 +15,8 @@ export declare class RenderingHelper {
     static renderContentWrappedLine(domContent: {
         currentElement: HTMLElement;
         parentNode: Node;
-    }, splits: number[], currentParagraph: Paragraph, formatsExt: FormatExtModel[], distance: DistanceModel, customContentService: CustomContentService, customComponents: ICustomComponents, breaks?: BreakModel[]): void;
-    static renderNumberingMarker(paragraph: Paragraph, layerElement: HTMLElement): HTMLElement;
+    }, splits: number[], currentParagraph: Paragraph, formatsExt: FormatExtModel[], distance: DistanceModel, customContentService: CustomContentService, customComponents: ICustomComponents, scalingRatio: number, breaks?: BreakModel[]): void;
+    static renderNumberingMarker(paragraph: Paragraph, layerElement: HTMLElement, scalingRatio: number): HTMLElement;
     static createDivContainer(className: string): HTMLDivElement;
     private static renderFormatContent;
     private static renderTextWithCustomContent;

package/lib/+shared/editor/custom-components/shared/abstract/base.component.d.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { CustomContent } from '../types/custom-content';
+import { GeneralPropertiesModel } from '../../../execution/models/general-properties.model';
 import { ObserverComponent } from '../../../../abstract/observer.component';
 import * as i0 from "@angular/core";
 export declare abstract class BaseNoderComponent extends ObserverComponent {
@@ -9,6 +10,7 @@ export declare abstract class BaseNoderComponent extends ObserverComponent {
     get insertIndex(): number;
     set insertIndex(val: number);
     contentWidth: number;
+    generalProperties: GeneralPropertiesModel;
     protected _height: number;
     get height(): number;
     protected _width: number;
@@ -20,5 +22,5 @@ export declare abstract class BaseNoderComponent extends ObserverComponent {
     focus(): void;
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseNoderComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseNoderComponent, never, never, { "content": { "alias": "content"; "required": false; }; "sessionId": { "alias": "sessionId"; "required": false; }; "contentWidth": { "alias": "contentWidth"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseNoderComponent, never, never, { "content": { "alias": "content"; "required": false; }; "sessionId": { "alias": "sessionId"; "required": false; }; "contentWidth": { "alias": "contentWidth"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/+shared/editor/custom-components/shared/services/custom-content/custom-content.service.d.ts

@@ -17,7 +17,7 @@ export declare class CustomContentService {
     private injector;
     elements: ExternalElementModel[];
     constructor(componentService: ComponentService, injector: Injector);
-    generateComponents(model: ContentsInterface, sessionId: number, properties: GeneralPropertiesModel, document: Document): ICustomComponents;
+    generateComponents(model: ContentsInterface, sessionId: number, generalProperties: GeneralPropertiesModel, document: Document): ICustomComponents;
     generateElementComponents(elements: ElementModel[], sessionId: number, contentWidth: number): ComponentRef<BaseNoderComponent>[];
     isFragmentContainComponent(components: ICustomComponents, textFragment: string, fragmentDistance: DistanceModel): boolean;
     getComponents(components: ICustomComponents, distance: DistanceModel): ComponentRef<BaseNoderComponent>[];

package/lib/+shared/editor/custom-components/table/components/table-cell.component.d.ts

@@ -21,12 +21,12 @@ export declare class NoderTableCellComponent {
     columnIndex: number;
     width: number;
     parentSessionId: number;
+    generalProperties: GeneralPropertiesModel;
     heightChanged: (rowIndex: number, cellIndex: number, height: number) => void;
     startResizing: (cellResizerParameters: CellResizerParametersModel) => void;
     isHighlighted: boolean;
     sessionId: number;
     cellSession: SessionModel;
-    properties: GeneralPropertiesModel;
     get session(): EditSession;
     get renderer(): Renderer | VirtualRenderer;
     container: ElementRef<HTMLElement>;
@@ -41,5 +41,5 @@ export declare class NoderTableCellComponent {
     private addEventListeners;
     private pagesCountChangedHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<NoderTableCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NoderTableCellComponent, "app-noder-table-cell", never, { "table": { "alias": "table"; "required": false; }; "cell": { "alias": "cell"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "cellIndex": { "alias": "cellIndex"; "required": false; }; "columnIndex": { "alias": "columnIndex"; "required": false; }; "width": { "alias": "width"; "required": false; }; "parentSessionId": { "alias": "parentSessionId"; "required": false; }; "heightChanged": { "alias": "heightChanged"; "required": false; }; "startResizing": { "alias": "startResizing"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NoderTableCellComponent, "app-noder-table-cell", never, { "table": { "alias": "table"; "required": false; }; "cell": { "alias": "cell"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "cellIndex": { "alias": "cellIndex"; "required": false; }; "columnIndex": { "alias": "columnIndex"; "required": false; }; "width": { "alias": "width"; "required": false; }; "parentSessionId": { "alias": "parentSessionId"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; "heightChanged": { "alias": "heightChanged"; "required": false; }; "startResizing": { "alias": "startResizing"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/+shared/editor/custom-components/table/components/table.component.d.ts

@@ -6,7 +6,6 @@ import { CellResizerParametersModel } from '../models/cell-resizer-parameters.mo
 import { ComponentService } from '../../shared/services/component/component.service';
 import { EditSession } from '../../../core/edit.session';
 import { EditorService } from '../../../interaction/editor.service';
-import { GeneralPropertiesModel } from '../../../execution/models/general-properties.model';
 import { OverlayService } from '../../shared/services/overlay/overlay.service';
 import { RowDataModel } from '../models/row-data.model';
 import { RowModel } from '../../../../../models/generated/row.model';
@@ -25,7 +24,6 @@ export declare class NoderTableComponent extends BaseNoderComponent implements O
     resizer: CellResizer;
     resizerEl: HTMLDivElement;
     rowMatrix: RowDataModel[];
-    properties: GeneralPropertiesModel;
     splits: number[];
     readonly minRowHeight = 19;
     readonly borderSize = 1;

package/lib/+shared/editor/editor.component.d.ts

@@ -7,8 +7,6 @@ import { ComponentService } from './custom-components/shared/services/component/
 import { DocxModel } from '../../models/generated/docx.model';
 import { Editor } from './core/editor';
 import { EditorService } from './interaction/editor.service';
-import { ElementDataModel } from './custom-components/external-element/models/element-data.model';
-import { ExternalElementModel } from './custom-components/external-element/models/external-element.model';
 import { ExternalSidenavModel } from './custom-components/external-element/models/external-sidenav.model';
 import { RegulatorService } from './execution/regulator.service';
 import * as i0 from "@angular/core";
@@ -21,7 +19,7 @@ export declare class EditorComponent implements OnDestroy {
     private commandsService;
     private clipboard;
     get isViewOnly$(): Observable<boolean>;
-    customPageWidth?: number;
+    customPageWidth?: number | null;
     set content(model: DocxModel);
     get content(): DocxModel;
     private _content;
@@ -30,14 +28,12 @@ export declare class EditorComponent implements OnDestroy {
     sidenav: MatDrawer;
     class: string;
     editor: Editor;
-    elements: ExternalElementModel[];
     sidenavProperties: ExternalSidenavModel;
     readonly subscriptions: Subscription[];
     private sidenavComponentRef;
     constructor(cdr: ChangeDetectorRef, componentService: ComponentService, editorService: EditorService, injector: Injector, regulatorService: RegulatorService, commandsService: CommandsService, clipboard: Clipboard);
     ngOnDestroy(): void;
     initEditor(content: DocxModel): void;
-    createElement(model: ElementDataModel): void;
     toggleSidenavSubscription(): Subscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EditorComponent, "app-editor", never, { "customPageWidth": { "alias": "customPageWidth"; "required": false; }; "content": { "alias": "content"; "required": false; }; }, {}, never, never, false, never>;

package/lib/+shared/editor/editor.module.d.ts

@@ -3,21 +3,20 @@ import { ExternalElementInterface } from './custom-components/external-element/e
 import { ExternalSidenavModel } from './custom-components/external-element/models/external-sidenav.model';
 import * as i0 from "@angular/core";
 import * as i1 from "./editor.component";
-import * as i2 from "./custom-components/external-element/element-toolbar/element-toolbar.component";
-import * as i3 from "./core/components/edges/edge.component";
-import * as i4 from "./custom-components/image/components/image.component";
-import * as i5 from "./custom-components/tab/tab.component";
-import * as i6 from "./custom-components/table/components/table-cell.component";
-import * as i7 from "./custom-components/table/components/table.component";
-import * as i8 from "./custom-components/image/resizer/resizer.component";
-import * as i9 from "./custom-components/table/overlay-menu/overlay-menu.component";
-import * as i10 from "@angular/common";
-import * as i11 from "@angular/material/button";
-import * as i12 from "@angular/material/dialog";
-import * as i13 from "@angular/material/icon";
-import * as i14 from "@angular/material/sidenav";
-import * as i15 from "@angular/material/tooltip";
-import * as i16 from "@angular/forms";
+import * as i2 from "./core/components/edges/edge.component";
+import * as i3 from "./custom-components/image/components/image.component";
+import * as i4 from "./custom-components/tab/tab.component";
+import * as i5 from "./custom-components/table/components/table-cell.component";
+import * as i6 from "./custom-components/table/components/table.component";
+import * as i7 from "./custom-components/image/resizer/resizer.component";
+import * as i8 from "./custom-components/table/overlay-menu/overlay-menu.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/dialog";
+import * as i12 from "@angular/material/icon";
+import * as i13 from "@angular/material/sidenav";
+import * as i14 from "@angular/material/tooltip";
+import * as i15 from "@angular/forms";
 export interface INoderOptions {
     sidenav?: Partial<ExternalSidenavModel>;
     elementService: Type<ExternalElementInterface>;
@@ -25,6 +24,6 @@ export interface INoderOptions {
 export declare class EditorModule {
     static forRoot(options?: INoderOptions): ModuleWithProviders<EditorModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorModule, [typeof i1.EditorComponent, typeof i2.ElementToolbarComponent, typeof i3.NoderEdgeComponent, typeof i4.NoderImageComponent, typeof i5.NoderTabComponent, typeof i6.NoderTableCellComponent, typeof i7.NoderTableComponent, typeof i8.ResizerComponent, typeof i9.TableOverlayMenuComponent], [typeof i10.CommonModule, typeof i11.MatButtonModule, typeof i12.MatDialogModule, typeof i13.MatIconModule, typeof i14.MatSidenavModule, typeof i15.MatTooltipModule, typeof i16.ReactiveFormsModule], [typeof i1.EditorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorModule, [typeof i1.EditorComponent, typeof i2.NoderEdgeComponent, typeof i3.NoderImageComponent, typeof i4.NoderTabComponent, typeof i5.NoderTableCellComponent, typeof i6.NoderTableComponent, typeof i7.ResizerComponent, typeof i8.TableOverlayMenuComponent], [typeof i9.CommonModule, typeof i10.MatButtonModule, typeof i11.MatDialogModule, typeof i12.MatIconModule, typeof i13.MatSidenavModule, typeof i14.MatTooltipModule, typeof i15.ReactiveFormsModule], [typeof i1.EditorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EditorModule>;
 }

package/lib/+shared/editor/execution/models/general-properties.model.d.ts

@@ -3,5 +3,6 @@ export declare class GeneralPropertiesModel {
     defaultTabWidth: number;
     numberings: NumberingModel[];
     maxEdgeHeight: number;
+    scalingRatio: number;
     constructor(fields?: Partial<GeneralPropertiesModel>);
 }

package/lib/+shared/editor/execution/regulator.service.d.ts

@@ -1,8 +1,8 @@
 import { ElementRef } from '@angular/core';
 import { CustomContentService } from '../custom-components/shared/services/custom-content/custom-content.service';
 import { DocxModel } from '../../../models/generated/docx.model';
-import { EditorService } from '../interaction/editor.service';
 import { EditSession } from '../core/edit.session';
+import { EditorService } from '../interaction/editor.service';
 import { GeneralPropertiesModel } from './models/general-properties.model';
 import { MarginModel } from '../core/models/margin.model';
 import { NoderEdgeComponent } from '../core/components/edges/edge.component';
@@ -22,7 +22,7 @@ export declare class RegulatorService {
     sessionIdIncrement: number;
     edgeEditingPage: number | null;
     constructor(customContentService: CustomContentService, editorService: EditorService);
-    addMainSession(model: DocxModel, margins: MarginModel, pageWidth: number, container: ElementRef<HTMLElement>): void;
+    addMainSession(model: DocxModel, pageWidth: number, scalingRatio: number, container: ElementRef<HTMLElement>): void;
     addCellSession(table: TableModel, margins: MarginModel, component: NoderTableCellComponent, properties: GeneralPropertiesModel): SessionModel;
     addEdgeSession(component: NoderEdgeComponent): SessionModel;
     removeSession(sessionId: number): void;

package/lib/+shared/editor-title/editor-title.component.d.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Mode } from '../enums/mode.enum';
+import * as i0 from "@angular/core";
+export declare class EditorTitleComponent {
+    private cdr;
+    title: string;
+    set rename$(value: Observable<void>);
+    changeMode: EventEmitter<Mode>;
+    renameDocumentTitle: EventEmitter<string>;
+    titleSpan: ElementRef<HTMLElement>;
+    selectedMode: Mode;
+    modeOptions: {
+        id: Mode;
+        text: string;
+        icon: string;
+    }[];
+    constructor(cdr: ChangeDetectorRef);
+    onRenameTitle(event: FocusEvent): void;
+    onFocus(event: MouseEvent): void;
+    private setTitleActive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditorTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditorTitleComponent, "app-editor-title", never, { "title": { "alias": "title"; "required": false; }; "rename$": { "alias": "rename$"; "required": false; }; }, { "changeMode": "changeMode"; "renameDocumentTitle": "renameDocumentTitle"; }, never, never, true, never>;
+}

package/lib/+shared/editor-toolbar/editor-toolbar.component.d.ts

@@ -1,44 +1,45 @@
 import { EventEmitter } from '@angular/core';
-import { Alignment } from './enums/alignment.enum';
-import { CustomIconService } from '../services/custom-icon.service';
+import { ElementDataModel } from '../editor/custom-components/external-element/models/element-data.model';
 import { IToolbarStyles } from '../editor/core/interfaces/toolbar-styles.interface';
 import { NumberingLevelModel } from '../../models/generated/numbering-level.model';
-import { NumberingTemplateType } from './enums/numbering-template-type.enum';
-import { NumberingType } from './enums/numbering-type.enum';
 import { OperationsHistoryInfoModel } from '../editor/operation-history/operations-history-info.model';
 import { ParagraphStyleModel } from '../../models/generated/paragraph-style.model';
 import { TextStyleModel } from '../../models/generated/text-style.model';
 import * as i0 from "@angular/core";
 export declare class EditorToolbarComponent {
-    private customIconService;
+    showActions: boolean;
     isViewOnly: boolean;
-    set styles(value: IToolbarStyles);
-    get styles(): IToolbarStyles;
-    private _styles;
-    set historyInfo(value: OperationsHistoryInfoModel);
-    canUndo: boolean;
-    canRedo: boolean;
-    numberingType: NumberingType | null;
-    numberingTemplateType: NumberingTemplateType | null;
-    changeTextStyle: EventEmitter<TextStyleModel>;
+    hasSelection: boolean;
+    clipboardData: string;
+    historyInfo: OperationsHistoryInfoModel;
+    styles: IToolbarStyles;
+    openFileFromDisk: EventEmitter<any>;
+    addCustomElement: EventEmitter<ElementDataModel>;
+    saveAs: EventEmitter<any>;
+    print: EventEmitter<void>;
+    insertPageBreak: EventEmitter<any>;
+    createDocument: EventEmitter<any>;
+    insertImage: EventEmitter<any>;
+    rename: EventEmitter<any>;
+    delete: EventEmitter<string>;
+    openEditMenu: EventEmitter<any>;
+    redo: EventEmitter<void>;
+    undo: EventEmitter<void>;
+    cutSelected: EventEmitter<any>;
+    copySelected: EventEmitter<any>;
+    pasteClipboardData: EventEmitter<any>;
+    selectAll: EventEmitter<any>;
+    removeSelected: EventEmitter<any>;
+    insertLink: EventEmitter<any>;
+    createElement: EventEmitter<ElementDataModel>;
     changeParagraphStyle: EventEmitter<ParagraphStyleModel>;
+    changeTextStyle: EventEmitter<TextStyleModel>;
     setNumberingTemplateType: EventEmitter<NumberingLevelModel[]>;
     removeNumberings: EventEmitter<void>;
-    redo: EventEmitter<void>;
-    undo: EventEmitter<void>;
-    print: EventEmitter<void>;
-    constructor(customIconService: CustomIconService);
-    onApplyFontFamily(font: string): void;
-    onApplyFontSize(size: number): void;
-    onApplyBold(bold: boolean): void;
-    onApplyUnderline(underline: boolean): void;
-    onApplyItalic(italic: boolean): void;
-    onApplyFontColor(color: string): void;
-    onApplyHighlightColor(color: string): void;
-    onApplyAlignment(alignment: Alignment): void;
-    onSetNumberingTemplateType(templateType: NumberingTemplateType): void;
-    onRemoveNumberings(): void;
-    private checkFontLoadedAndApplyStyle;
+    insertTable: EventEmitter<{
+        rows: number;
+        columns: number;
+    }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditorToolbarComponent, "app-editor-toolbar", never, { "isViewOnly": { "alias": "isViewOnly"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "historyInfo": { "alias": "historyInfo"; "required": false; }; }, { "changeTextStyle": "changeTextStyle"; "changeParagraphStyle": "changeParagraphStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "redo": "redo"; "undo": "undo"; "print": "print"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditorToolbarComponent, "app-editor-toolbar", never, { "showActions": { "alias": "showActions"; "required": false; }; "isViewOnly": { "alias": "isViewOnly"; "required": false; }; "hasSelection": { "alias": "hasSelection"; "required": false; }; "clipboardData": { "alias": "clipboardData"; "required": false; }; "historyInfo": { "alias": "historyInfo"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; }, { "openFileFromDisk": "openFileFromDisk"; "addCustomElement": "addCustomElement"; "saveAs": "saveAs"; "print": "print"; "insertPageBreak": "insertPageBreak"; "createDocument": "createDocument"; "insertImage": "insertImage"; "rename": "rename"; "delete": "delete"; "openEditMenu": "openEditMenu"; "redo": "redo"; "undo": "undo"; "cutSelected": "cutSelected"; "copySelected": "copySelected"; "pasteClipboardData": "pasteClipboardData"; "selectAll": "selectAll"; "removeSelected": "removeSelected"; "insertLink": "insertLink"; "createElement": "createElement"; "changeParagraphStyle": "changeParagraphStyle"; "changeTextStyle": "changeTextStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertTable": "insertTable"; }, never, never, false, never>;
 }

package/lib/+shared/editor-toolbar/editor-toolbar.module.d.ts

@@ -6,23 +6,26 @@ import * as i4 from "./font-size/font-size.component";
 import * as i5 from "./font-style/font-style.component";
 import * as i6 from "./format/format.component";
 import * as i7 from "./heading/heading.component";
-import * as i8 from "./numbering/numbering.component";
-import * as i9 from "./print/print.component";
-import * as i10 from "./undo-redo/undo-redo.component";
-import * as i11 from "./zoom/zoom.component";
-import * as i12 from "@angular/common";
-import * as i13 from "@angular/forms";
-import * as i14 from "@angular/material/autocomplete";
-import * as i15 from "@angular/material/button";
-import * as i16 from "@angular/material/button-toggle";
-import * as i17 from "@angular/material/icon";
-import * as i18 from "@angular/material/input";
-import * as i19 from "@angular/material/menu";
-import * as i20 from "@angular/material/select";
-import * as i21 from "@angular/material/toolbar";
-import * as i22 from "ngx-colors";
+import * as i8 from "./menu-dropdowns/menu-dropdowns.component";
+import * as i9 from "./numbering/numbering.component";
+import * as i10 from "./print/print.component";
+import * as i11 from "./toolbar-actions/toolbar-actions.component";
+import * as i12 from "./undo-redo/undo-redo.component";
+import * as i13 from "./zoom/zoom.component";
+import * as i14 from "@angular/common";
+import * as i15 from "@angular/forms";
+import * as i16 from "../insert-table/insert-table.component";
+import * as i17 from "@angular/material/autocomplete";
+import * as i18 from "@angular/material/button";
+import * as i19 from "@angular/material/button-toggle";
+import * as i20 from "@angular/material/icon";
+import * as i21 from "@angular/material/input";
+import * as i22 from "@angular/material/menu";
+import * as i23 from "@angular/material/select";
+import * as i24 from "@angular/material/toolbar";
+import * as i25 from "ngx-colors";
 export declare class EditorToolbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorToolbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorToolbarModule, [typeof i1.ColorPickerComponent, typeof i2.EditorToolbarComponent, typeof i3.FontComponent, typeof i3.FontComponent, typeof i4.FontSizeComponent, typeof i4.FontSizeComponent, typeof i5.FontStyleComponent, typeof i5.FontStyleComponent, typeof i6.FormatComponent, typeof i6.FormatComponent, typeof i7.HeadingComponent, typeof i7.HeadingComponent, typeof i8.NumberingComponent, typeof i9.PrintComponent, typeof i10.UndoRedoComponent, typeof i11.ZoomComponent], [typeof i12.CommonModule, typeof i13.FormsModule, typeof i14.MatAutocompleteModule, typeof i15.MatButtonModule, typeof i16.MatButtonToggleModule, typeof i17.MatIconModule, typeof i18.MatInputModule, typeof i19.MatMenuModule, typeof i20.MatSelectModule, typeof i21.MatToolbarModule, typeof i22.NgxColorsModule, typeof i13.ReactiveFormsModule], [typeof i2.EditorToolbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorToolbarModule, [typeof i1.ColorPickerComponent, typeof i2.EditorToolbarComponent, typeof i3.FontComponent, typeof i3.FontComponent, typeof i4.FontSizeComponent, typeof i4.FontSizeComponent, typeof i5.FontStyleComponent, typeof i5.FontStyleComponent, typeof i6.FormatComponent, typeof i6.FormatComponent, typeof i7.HeadingComponent, typeof i7.HeadingComponent, typeof i8.MenuDropdownsComponent, typeof i9.NumberingComponent, typeof i10.PrintComponent, typeof i11.ToolbarActionsComponent, typeof i12.UndoRedoComponent, typeof i13.ZoomComponent], [typeof i14.CommonModule, typeof i15.FormsModule, typeof i16.InsertTableComponent, typeof i17.MatAutocompleteModule, typeof i18.MatButtonModule, typeof i19.MatButtonToggleModule, typeof i20.MatIconModule, typeof i21.MatInputModule, typeof i22.MatMenuModule, typeof i23.MatSelectModule, typeof i24.MatToolbarModule, typeof i25.NgxColorsModule, typeof i15.ReactiveFormsModule], [typeof i2.EditorToolbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EditorToolbarModule>;
 }

package/lib/+shared/editor-toolbar/menu-dropdowns/menu-dropdowns.component.d.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectorRef, EventEmitter, Injector } from '@angular/core';
+import { MatMenu } from '@angular/material/menu';
+import { Alignment } from '../enums/alignment.enum';
+import { CustomIconService } from '../../services/custom-icon.service';
+import { ElementDataModel } from '../../editor/custom-components/external-element/models/element-data.model';
+import { ExternalElementModel } from '../../editor/custom-components/external-element/models/external-element.model';
+import { IToolbarStyles } from '../../editor/core/interfaces/toolbar-styles.interface';
+import { NumberingLevelModel } from '../../../models/generated/numbering-level.model';
+import { NumberingTemplateType } from '../enums/numbering-template-type.enum';
+import { OperationsHistoryInfoModel } from '../../editor/operation-history/operations-history-info.model';
+import { ParagraphStyleModel } from '../../../models/generated/paragraph-style.model';
+import { TextStyleModel } from '../../../models/generated/text-style.model';
+import * as i0 from "@angular/core";
+export declare class MenuDropdownsComponent {
+    private cdr;
+    private injector;
+    private customIconService;
+    isViewOnly: boolean;
+    hasSelection: boolean;
+    clipboardData: string;
+    set historyInfo(value: OperationsHistoryInfoModel);
+    set styles(value: IToolbarStyles);
+    get styles(): IToolbarStyles;
+    private _styles;
+    openFileFromDisk: EventEmitter<any>;
+    addCustomElement: EventEmitter<ElementDataModel>;
+    saveAs: EventEmitter<void>;
+    print: EventEmitter<void>;
+    insertPageBreak: EventEmitter<void>;
+    createDocument: EventEmitter<void>;
+    insertImage: EventEmitter<any>;
+    rename: EventEmitter<void>;
+    delete: EventEmitter<void>;
+    openEditMenu: EventEmitter<void>;
+    redo: EventEmitter<void>;
+    undo: EventEmitter<void>;
+    cutSelected: EventEmitter<void>;
+    copySelected: EventEmitter<void>;
+    pasteClipboardData: EventEmitter<void>;
+    selectAll: EventEmitter<void>;
+    removeSelected: EventEmitter<void>;
+    insertLink: EventEmitter<void>;
+    createElement: EventEmitter<ElementDataModel>;
+    changeParagraphStyle: EventEmitter<ParagraphStyleModel>;
+    changeTextStyle: EventEmitter<TextStyleModel>;
+    setNumberingTemplateType: EventEmitter<NumberingLevelModel[]>;
+    removeNumberings: EventEmitter<void>;
+    insertTable: EventEmitter<{
+        rows: number;
+        columns: number;
+    }>;
+    tableInsertMenu: MatMenu;
+    canUndo: boolean;
+    canRedo: boolean;
+    numberingTemplateType: NumberingTemplateType | null;
+    numberingTemplateTypes: typeof NumberingTemplateType;
+    showInsertTableMenu: boolean;
+    readonly elements: ExternalElementModel[];
+    readonly alignments: typeof Alignment;
+    constructor(cdr: ChangeDetectorRef, injector: Injector, customIconService: CustomIconService);
+    onOpenFileFromDisk(event: any): void;
+    onInsertImage(event: any): void;
+    onSelectFormat(alignment: Alignment): void;
+    onApplyBold(): void;
+    onApplyUnderline(): void;
+    onApplyItalic(): void;
+    onSelectNumberingTemplate(numberingTemplateType: NumberingTemplateType): void;
+    onTableInsertMenuClosed(): void;
+    onCreate(model: ExternalElementModel): Promise<void>;
+    private checkFontLoadedAndApplyStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuDropdownsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuDropdownsComponent, "app-menu-dropdowns", never, { "isViewOnly": { "alias": "isViewOnly"; "required": false; }; "hasSelection": { "alias": "hasSelection"; "required": false; }; "clipboardData": { "alias": "clipboardData"; "required": false; }; "historyInfo": { "alias": "historyInfo"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; }, { "openFileFromDisk": "openFileFromDisk"; "addCustomElement": "addCustomElement"; "saveAs": "saveAs"; "print": "print"; "insertPageBreak": "insertPageBreak"; "createDocument": "createDocument"; "insertImage": "insertImage"; "rename": "rename"; "delete": "delete"; "openEditMenu": "openEditMenu"; "redo": "redo"; "undo": "undo"; "cutSelected": "cutSelected"; "copySelected": "copySelected"; "pasteClipboardData": "pasteClipboardData"; "selectAll": "selectAll"; "removeSelected": "removeSelected"; "insertLink": "insertLink"; "createElement": "createElement"; "changeParagraphStyle": "changeParagraphStyle"; "changeTextStyle": "changeTextStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertTable": "insertTable"; }, never, never, false, never>;
+}

package/lib/+shared/editor-toolbar/toolbar-actions/toolbar-actions.component.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter, Injector } from '@angular/core';
+import { Alignment } from '../enums/alignment.enum';
+import { CustomIconService } from '../../services/custom-icon.service';
+import { ElementDataModel } from '../../editor/custom-components/external-element/models/element-data.model';
+import { ExternalElementModel } from '../../editor/custom-components/external-element/models/external-element.model';
+import { IToolbarStyles } from '../../editor/core/interfaces/toolbar-styles.interface';
+import { NumberingLevelModel } from '../../../models/generated/numbering-level.model';
+import { NumberingTemplateType } from '../enums/numbering-template-type.enum';
+import { NumberingType } from '../enums/numbering-type.enum';
+import { OperationsHistoryInfoModel } from '../../editor/operation-history/operations-history-info.model';
+import { ParagraphStyleModel } from '../../../models/generated/paragraph-style.model';
+import { TextStyleModel } from '../../../models/generated/text-style.model';
+import * as i0 from "@angular/core";
+export declare class ToolbarActionsComponent {
+    private customIconService;
+    private injector;
+    isViewOnly: boolean;
+    set historyInfo(value: OperationsHistoryInfoModel);
+    set styles(value: IToolbarStyles);
+    get styles(): IToolbarStyles;
+    private _styles;
+    print: EventEmitter<void>;
+    redo: EventEmitter<void>;
+    undo: EventEmitter<void>;
+    changeParagraphStyle: EventEmitter<ParagraphStyleModel>;
+    changeTextStyle: EventEmitter<TextStyleModel>;
+    setNumberingTemplateType: EventEmitter<NumberingLevelModel[]>;
+    removeNumberings: EventEmitter<void>;
+    createElement: EventEmitter<ElementDataModel>;
+    canUndo: boolean;
+    canRedo: boolean;
+    numberingType: NumberingType | null;
+    numberingTemplateType: NumberingTemplateType | null;
+    elements: ExternalElementModel[];
+    constructor(customIconService: CustomIconService, injector: Injector);
+    onApplyFontFamily(font: string): void;
+    onApplyFontSize(size: number): void;
+    onApplyBold(bold: boolean): void;
+    onApplyUnderline(underline: boolean): void;
+    onApplyItalic(italic: boolean): void;
+    onApplyFontColor(color: string): void;
+    onApplyHighlightColor(color: string): void;
+    onApplyAlignment(alignment: Alignment): void;
+    onSetNumberingTemplateType(templateType: NumberingTemplateType): void;
+    onCreateElement(model: ExternalElementModel): Promise<void>;
+    private checkFontLoadedAndApplyStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarActionsComponent, "app-toolbar-actions", never, { "isViewOnly": { "alias": "isViewOnly"; "required": false; }; "historyInfo": { "alias": "historyInfo"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; }, { "print": "print"; "redo": "redo"; "undo": "undo"; "changeParagraphStyle": "changeParagraphStyle"; "changeTextStyle": "changeTextStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "createElement": "createElement"; }, never, never, false, never>;
+}

package/lib/+shared/helpers/scaling.helper.d.ts

@@ -0,0 +1,4 @@
+export declare class ScalingHelper {
+    static getRatio(current: number, original: number): number;
+    static scale(initial: number, scale: number): number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talrace/ngx-noder",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^17.0.4",

package/public-api.d.ts

@@ -20,7 +20,7 @@ export * from './lib/+shared/editor/operations/enums/command-type.enum';
 export * from './lib/+shared/editor/store/editor.actions';
 export * from './lib/+shared/editor/editor.component';
 export * from './lib/+shared/editor/editor.module';
-export * from './lib/+shared/editor-header/editor-header.component';
+export * from './lib/+shared/editor-title/editor-title.component';
 export * from './lib/+shared/editor-search/editor-search-dialog.component';
 export * from './lib/+shared/editor-toolbar/enums/alignment.enum';
 export * from './lib/+shared/editor-toolbar/editor-toolbar.component';

package/src/_ngx-noder.theme.scss

@@ -1,22 +1,24 @@
 @use '@angular/material' as mat;
 @import 'lib/+shared/add-link-dialog/add-link-dialog.theme';
-@import 'lib/+shared/editor/theme';
-@import 'lib/+shared/editor-toolbar/theme';
-@import 'lib/+shared/editor-header/editor-header.theme';
 @import 'lib/+shared/confirm-dialog/theme';
+@import 'lib/+shared/editor-title/editor-title.theme';
+@import 'lib/+shared/editor-toolbar/theme';
+@import 'lib/+shared/editor/theme';
 @import 'lib/+shared/insert-table/insert-table.theme';
 @import 'scss/mixins';
 
 @mixin ngx-noder-theme($theme) {
     $font-family: roboto, helvetica, neue, 'Helvetica', Arial, sans-serif;
-    $custom-typography: mat.define-typography-config($font-family: $font-family);
-    @include mat.all-component-typographies($custom-typography);
+    $custom-typography: mat.define-typography-config(
+        $font-family: $font-family
+    );
     @include add-link-dialog-component($theme);
-    @include form-field-theme($theme);
+    @include confirm-dialog-theme($theme);
     @include editor-theme($theme);
+    @include editor-title-component-theme($theme);
     @include editor-toolbar-theme($theme);
-    @include editor-header-component-theme($theme);
-    @include confirm-dialog-theme($theme);
+    @include form-field-theme($theme);
     @include insert-table-component($theme);
+    @include mat.all-component-typographies($custom-typography);
     @include scrollbar-theme($theme);
 }

package/src/lib/+shared/add-link-dialog/_add-link-dialog.theme.scss

@@ -7,14 +7,14 @@
 
     app-add-link-dialog {
         .mat-mdc-dialog-actions .apply-btn {
-            color: mat.get-color-from-palette($foreground, button-text);
+            color: mat.get-color-from-palette($foreground, noder-button-raised-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, disabled-button);
+                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, button-background);
+                background-color: mat.get-color-from-palette($background, noder-button-raised-enabled);
             }
         }
     }