@talrace/ngx-noder 0.0.17 → 0.0.19

package/lib/apart-components/add-link-dialog/add-link-dialog.component.d.ts

@@ -1,24 +1,15 @@
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
-export declare class AddLinkDialogOptions {
-    title: string;
-    text: string;
-    textPlaceholder: string;
-    link: string;
-    linkPlaceholder: string;
-    constructor(fields?: Partial<AddLinkDialogOptions>);
-}
 export declare class AddLinkDialogComponent {
     dialogRef: MatDialogRef<AddLinkDialogComponent>;
-    data: AddLinkDialogOptions;
     private fb;
     modal: boolean;
     form: FormGroup<{
         text: FormControl<string>;
         link: FormControl<string>;
     }>;
-    constructor(dialogRef: MatDialogRef<AddLinkDialogComponent>, data: AddLinkDialogOptions, fb: FormBuilder);
+    constructor(dialogRef: MatDialogRef<AddLinkDialogComponent>, fb: FormBuilder);
     onClose(): void;
     onApply(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AddLinkDialogComponent, never>;

package/lib/apart-components/editor-title/editor-title.component.d.ts

@@ -1,23 +1,25 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 import { Mode } from '../../editor/interaction/mode.enum';
 import * as i0 from "@angular/core";
 export declare class EditorTitleComponent {
     private cdr;
+    private translateService;
     selectedMode: Mode;
     showTitle: boolean;
     title: string;
-    defaultFileName: string;
+    defaultFileName: any;
     set rename$(value: Observable<void>);
     changeMode: EventEmitter<Mode>;
     renameDocumentTitle: EventEmitter<string>;
     titleSpan: ElementRef<HTMLElement>;
     modeOptions: {
         id: Mode;
-        text: string;
+        text: any;
         icon: string;
     }[];
-    constructor(cdr: ChangeDetectorRef);
+    constructor(cdr: ChangeDetectorRef, translateService: TranslateService);
     onRenameTitle(event: FocusEvent): void;
     onFocus(event: MouseEvent): void;
     private setTitleActive;

package/lib/apart-components/editor-toolbar/components/base-toolbar.component.d.ts

@@ -45,5 +45,5 @@ export declare abstract class BaseToolbarComponent extends DestroyComponent {
     private historyInfoSubscription;
     private stylesSubscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseToolbarComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseToolbarComponent, never, never, {}, { "print": "print"; "redo": "redo"; "undo": "undo"; "createElement": "createElement"; "changeTextStyle": "changeTextStyle"; "changeParagraphStyle": "changeParagraphStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertImage": "insertImage"; "insertLink": "insertLink"; "insertTable": "insertTable"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseToolbarComponent, never, never, {}, { "print": "print"; "redo": "redo"; "undo": "undo"; "createElement": "createElement"; "changeTextStyle": "changeTextStyle"; "changeParagraphStyle": "changeParagraphStyle"; "setNumberingTemplateType": "setNumberingTemplateType"; "removeNumberings": "removeNumberings"; "insertImage": "insertImage"; "insertLink": "insertLink"; "insertTable": "insertTable"; }, never, never, true, never>;
 }

package/lib/apart-components/editor-toolbar/editor-mobile-toolbar/editor-mobile-toolbar.component.d.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, EventEmitter, Injector } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { CustomIconService } from '../shared/services/custom-icon.service';
 import { EditorService } from '../../../editor/interaction/editor.service';
 import { EditorToolbarMode } from '../shared/enums/editor-toolbar-mode.enum';
@@ -7,6 +8,7 @@ import { ToolbarActionsComponent } from '../components/toolbar-actions/toolbar-a
 import * as i0 from "@angular/core";
 export declare class EditorMobileToolbarComponent extends ToolbarActionsComponent {
     toolbarCoreService: ToolbarCoreService;
+    private translateService;
     openFileFromDisk: EventEmitter<void>;
     createDocument: EventEmitter<void>;
     saveAs: EventEmitter<void>;
@@ -16,7 +18,7 @@ export declare class EditorMobileToolbarComponent extends ToolbarActionsComponen
     textFormat: EventEmitter<void>;
     editorToolbarMode: typeof EditorToolbarMode;
     readonly actionsMenuMods: EditorToolbarMode[];
-    constructor(cdr: ChangeDetectorRef, customIconService: CustomIconService, editorService: EditorService, injector: Injector, toolbarCoreService: ToolbarCoreService);
+    constructor(cdr: ChangeDetectorRef, customIconService: CustomIconService, editorService: EditorService, injector: Injector, toolbarCoreService: ToolbarCoreService, translateService: TranslateService);
     onInsertLink(): void;
     onInsertTable(): void;
     onTextFormat(): void;

package/lib/apart-components/editor-toolbar/editor-toolbar.module.d.ts

@@ -3,30 +3,30 @@ import * as i1 from "./editor-mobile-toolbar/editor-mobile-toolbar.component";
 import * as i2 from "./editor-toolbar/editor-toolbar.component";
 import * as i3 from "./components/buttons/font-style/font-style.component";
 import * as i4 from "./components/buttons/format/format.component";
-import * as i5 from "./components/buttons/heading/heading.component";
-import * as i6 from "./components/menu-dropdowns/menu-dropdowns.component";
-import * as i7 from "./components/menu-dropdowns-mobile/menu-dropdowns-mobile.component";
-import * as i8 from "./components/buttons/numbering/numbering.component";
-import * as i9 from "./components/buttons/print/print.component";
-import * as i10 from "./components/toolbar-actions/toolbar-actions.component";
-import * as i11 from "./components/buttons/undo-redo/undo-redo.component";
-import * as i12 from "./components/buttons/zoom/zoom.component";
-import * as i13 from "./components/buttons/color-picker/color-picker.component";
-import * as i14 from "@angular/common";
-import * as i15 from "./components/buttons/font/font.component";
-import * as i16 from "./components/buttons/font-size/font-size.component";
-import * as i17 from "../insert-table/insert-table.component";
-import * as i18 from "../insert-table-mobile/insert-table-mobile.component";
-import * as i19 from "@angular/material/autocomplete";
-import * as i20 from "@angular/material/button";
-import * as i21 from "@angular/material/button-toggle";
-import * as i22 from "@angular/material/expansion";
-import * as i23 from "@angular/material/icon";
-import * as i24 from "@angular/material/menu";
-import * as i25 from "@angular/forms";
-import * as i26 from "../text-format-mobile/text-format-mobile.component";
+import * as i5 from "./components/menu-dropdowns/menu-dropdowns.component";
+import * as i6 from "./components/menu-dropdowns-mobile/menu-dropdowns-mobile.component";
+import * as i7 from "./components/buttons/numbering/numbering.component";
+import * as i8 from "./components/buttons/print/print.component";
+import * as i9 from "./components/toolbar-actions/toolbar-actions.component";
+import * as i10 from "./components/buttons/undo-redo/undo-redo.component";
+import * as i11 from "./components/buttons/zoom/zoom.component";
+import * as i12 from "./components/buttons/color-picker/color-picker.component";
+import * as i13 from "@angular/common";
+import * as i14 from "./components/buttons/font/font.component";
+import * as i15 from "./components/buttons/font-size/font-size.component";
+import * as i16 from "../insert-table/insert-table.component";
+import * as i17 from "../insert-table-mobile/insert-table-mobile.component";
+import * as i18 from "@angular/material/autocomplete";
+import * as i19 from "@angular/material/button";
+import * as i20 from "@angular/material/button-toggle";
+import * as i21 from "@angular/material/expansion";
+import * as i22 from "@angular/material/icon";
+import * as i23 from "@angular/material/menu";
+import * as i24 from "@angular/forms";
+import * as i25 from "../text-format-mobile/text-format-mobile.component";
+import * as i26 from "@ngx-translate/core";
 export declare class EditorToolbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorToolbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorToolbarModule, [typeof i1.EditorMobileToolbarComponent, typeof i2.EditorToolbarComponent, typeof i3.FontStyleComponent, typeof i3.FontStyleComponent, typeof i4.FormatComponent, typeof i4.FormatComponent, typeof i5.HeadingComponent, typeof i5.HeadingComponent, typeof i6.MenuDropdownsComponent, typeof i7.MenuDropdownsMobileComponent, typeof i8.NumberingComponent, typeof i9.PrintComponent, typeof i10.ToolbarActionsComponent, typeof i11.UndoRedoComponent, typeof i12.ZoomComponent], [typeof i13.ColorPickerComponent, typeof i14.CommonModule, typeof i15.FontComponent, typeof i16.FontSizeComponent, typeof i17.InsertTableComponent, typeof i18.InsertTableMobileComponent, typeof i19.MatAutocompleteModule, typeof i20.MatButtonModule, typeof i21.MatButtonToggleModule, typeof i22.MatExpansionModule, typeof i23.MatIconModule, typeof i24.MatMenuModule, typeof i25.ReactiveFormsModule, typeof i26.TextFormatMobileComponent], [typeof i1.EditorMobileToolbarComponent, typeof i2.EditorToolbarComponent, typeof i6.MenuDropdownsComponent, typeof i7.MenuDropdownsMobileComponent, typeof i10.ToolbarActionsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorToolbarModule, [typeof i1.EditorMobileToolbarComponent, typeof i2.EditorToolbarComponent, typeof i3.FontStyleComponent, typeof i4.FormatComponent, typeof i5.MenuDropdownsComponent, typeof i6.MenuDropdownsMobileComponent, typeof i7.NumberingComponent, typeof i8.PrintComponent, typeof i9.ToolbarActionsComponent, typeof i10.UndoRedoComponent, typeof i11.ZoomComponent], [typeof i12.ColorPickerComponent, typeof i13.CommonModule, typeof i14.FontComponent, typeof i15.FontSizeComponent, typeof i16.InsertTableComponent, typeof i17.InsertTableMobileComponent, typeof i18.MatAutocompleteModule, typeof i19.MatButtonModule, typeof i20.MatButtonToggleModule, typeof i21.MatExpansionModule, typeof i22.MatIconModule, typeof i23.MatMenuModule, typeof i24.ReactiveFormsModule, typeof i25.TextFormatMobileComponent, typeof i26.TranslateModule], [typeof i1.EditorMobileToolbarComponent, typeof i2.EditorToolbarComponent, typeof i5.MenuDropdownsComponent, typeof i6.MenuDropdownsMobileComponent, typeof i9.ToolbarActionsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EditorToolbarModule>;
 }

package/lib/editor/components/edges/edge.component.d.ts

@@ -1,4 +1,5 @@
-import { ElementRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { DestroyComponent } from '../shared/abstract/destroy.component';
 import { EdgeModel } from '../../../models/generated/edge.model';
 import { EdgeType } from './edge-type.enum';
@@ -14,11 +15,14 @@ import * as i0 from "@angular/core";
 export declare class NoderEdgeComponent extends DestroyComponent {
     private regulatorService;
     private editorService;
+    private cdr;
+    private translateService;
     model: EdgeModel;
     generalProperties: GeneralPropertiesModel;
     margins: MarginModel;
     width: number;
     parentSessionId: number;
+    isEvenEdgesExist: boolean;
     set type(val: EdgeType);
     get type(): EdgeType;
     private _type;
@@ -26,19 +30,22 @@ export declare class NoderEdgeComponent extends DestroyComponent {
     edgeSession: SessionModel;
     editModeClass: string;
     typeContainerPosition: string;
+    edgeNameByType: string;
+    initialized: boolean;
     get session(): EditSession;
     get renderer(): Renderer | VirtualRenderer;
     get contentHeight(): number;
     container: ElementRef<HTMLElement>;
     typeContainer: ElementRef<HTMLElement>;
     private _height;
-    constructor(regulatorService: RegulatorService, editorService: EditorService);
+    constructor(regulatorService: RegulatorService, editorService: EditorService, cdr: ChangeDetectorRef, translateService: TranslateService);
     ngOnDestroy(): void;
     initialize(): void;
     enterEditMode(): void;
     leaveEditMode(): void;
+    private getEdgeNameByType;
     private applyHeight;
     private pagesCountChangedHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<NoderEdgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NoderEdgeComponent, "app-nod-edge", never, { "model": { "alias": "model"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; "margins": { "alias": "margins"; "required": false; }; "width": { "alias": "width"; "required": false; }; "parentSessionId": { "alias": "parentSessionId"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NoderEdgeComponent, "app-nod-edge", never, { "model": { "alias": "model"; "required": false; }; "generalProperties": { "alias": "generalProperties"; "required": false; }; "margins": { "alias": "margins"; "required": false; }; "width": { "alias": "width"; "required": false; }; "parentSessionId": { "alias": "parentSessionId"; "required": false; }; "isEvenEdgesExist": { "alias": "isEvenEdgesExist"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/editor/components/edges/edges.d.ts

@@ -27,6 +27,4 @@ export declare class Edges {
     getUniquePageTypes(): PageType[];
     private createComponents;
     private getComponent;
-    private setEdgeNameToComponents;
-    private getEdgeNameByType;
 }

package/lib/editor/components/external-element/external.component.d.ts

@@ -13,5 +13,5 @@ export declare abstract class ExternalComponent extends BaseNoderComponent {
     changeElementHeight(height: number): void;
     changeElementWidth(width: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ExternalComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ExternalComponent, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ExternalComponent, never, never, {}, {}, never, never, true, never>;
 }

package/lib/editor/components/external-element/models/external-element.model.d.ts

@@ -1,8 +1,8 @@
 import { Type } from '@angular/core';
 import { BaseNoderComponent } from '../../shared/abstract/base.component';
 export declare class ExternalElementModel {
-    name: string;
-    title: string;
+    nameTranslate: string;
+    nameId: string;
     icon: string;
     type: number;
     componentType: Type<BaseNoderComponent>;
@@ -12,7 +12,7 @@ export declare class ExternalElementModel {
         width: number;
         height: number;
     }>;
-    constructor(name: string, title: string, icon: string, type: number, componentType: Type<BaseNoderComponent>, factoryMethod: () => Promise<{
+    constructor(nameTranslate: string, nameId: string, icon: string, type: number, componentType: Type<BaseNoderComponent>, factoryMethod: () => Promise<{
         guid: string;
         type: number;
         width: number;

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

@@ -24,5 +24,5 @@ export declare abstract class BaseNoderComponent extends DestroyComponent {
     blur(): void;
     receiveStyle(_textStyle: TextStyleModel): 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; }; "generalProperties": { "alias": "generalProperties"; "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, true, never>;
 }

package/lib/editor/components/shared/abstract/destroy.component.d.ts

@@ -5,5 +5,5 @@ export declare abstract class DestroyComponent implements OnDestroy {
     destroy$: Subject<boolean>;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DestroyComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DestroyComponent, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DestroyComponent, never, never, {}, {}, never, never, true, never>;
 }

package/lib/editor/components/table/overlay-menu/overlay-menu.component.d.ts

@@ -1,3 +1,4 @@
+import { TranslateService } from '@ngx-translate/core';
 import { EditorService } from '../../../interaction/editor.service';
 import { OverlayService } from '../../shared/services/overlay.service';
 import { SelectionRangeModel } from '../models/selection-range.model';
@@ -5,6 +6,7 @@ import * as i0 from "@angular/core";
 export declare class TableOverlayMenuComponent {
     private editorService;
     private overlayService;
+    private translateService;
     selectionRange: SelectionRangeModel;
     targets: SelectionRangeModel;
     canRemoveRows: boolean;
@@ -23,7 +25,7 @@ export declare class TableOverlayMenuComponent {
         removeRowsMessage: string;
         removeColumnsMessage: string;
     };
-    constructor(editorService: EditorService, overlayService: OverlayService);
+    constructor(editorService: EditorService, overlayService: OverlayService, translateService: TranslateService);
     ngOnInit(): void;
     processInsertMenuItems(): void;
     onInsertRowsAbove(): void;

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

@@ -18,6 +18,7 @@ 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";
+import * as i16 from "@ngx-translate/core";
 export interface INoderOptions {
     sidenav?: Partial<ExternalSidenavModel>;
     imageApiService?: Type<ImageApiService>;
@@ -26,6 +27,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.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 ɵ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 i16.TranslateModule], [typeof i1.EditorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EditorModule>;
 }

package/lib/editor/gadgets/scrollbar.d.ts

@@ -11,6 +11,7 @@ export declare class ScrollBar {
     element: HTMLElement;
     inner: HTMLElement;
     isVisible: boolean;
+    private skipEvent;
     get scrollTop(): number;
     private _scrollTop;
     private coeff;

package/lib/translate/noder-translate.loader.d.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslationObject } from '@ngx-translate/core';
+import * as i0 from "@angular/core";
+export declare class NoderTranslateLoader extends TranslateHttpLoader {
+    constructor(http: HttpClient);
+    getTranslation(lang: string): Observable<TranslationObject>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoderTranslateLoader, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NoderTranslateLoader>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talrace/ngx-noder",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^17.3.12",
@@ -8,6 +8,8 @@
     "@angular/forms": "^17.3.12",
     "@angular/material": "^17.3.6",
     "@angular/router": "^17.3.12",
+    "@ngx-translate/core": "^16.0.3",
+    "@ngx-translate/http-loader": "^16.0.0",
     "@ngxs/router-plugin": "^3.8.2",
     "@ngxs/store": "^3.8.2",
     "material-icons": "^1.13.12",
@@ -27,8 +29,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/talrace-ngx-noder.mjs",
-      "esm": "./esm2022/talrace-ngx-noder.mjs",
       "default": "./fesm2022/talrace-ngx-noder.mjs"
     }
   }

package/public-api.d.ts

@@ -18,6 +18,7 @@ export * from './lib/editor/gadgets/history/operations-history-info.model';
 export * from './lib/editor/operations/enums/command-type.enum';
 export * from './lib/editor/components/editor.component';
 export * from './lib/editor/editor.module';
+export * from './lib/translate/noder-translate.loader';
 export * from './lib/apart-components/editor-title-mobile/editor-title-mobile.component';
 export * from './lib/apart-components/editor-title/editor-title.component';
 export * from './lib/apart-components/editor-search/editor-search-dialog.component';

package/src/lib/apart-components/add-link-dialog/_add-link-dialog.theme.scss

@@ -2,19 +2,16 @@
 @use 'sass:map';
 
 @mixin add-link-dialog-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-add-link-dialog {
         .mat-mdc-dialog-actions .apply-btn {
-            color: mat.get-color-from-palette($foreground, noder-button-raised-text);
+            color: map.get($theme, foreground-palette, noder-button-raised-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-enabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-enabled);
             }
         }
     }

package/src/lib/apart-components/add-link-mobile/_add-link-mobile.theme.scss

@@ -2,23 +2,20 @@
 @use 'sass:map';
 
 @mixin add-link-mobile-component($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-add-link-mobile {
         .title {
-            color: mat.get-color-from-palette($foreground, noder-modal-text);
+            color: map.get($theme, foreground-palette, noder-modal-text);
         }
 
         .mdc-fab {
-            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
+            color: map.get($theme, foreground-palette, noder-button-fab-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+                background-color: map.get($theme, background-palette, noder-button-sidenav-fab);
             }
         }
     }

package/src/lib/apart-components/confirm-dialog/_theme.scss

@@ -2,28 +2,25 @@
 @use 'sass:map';
 
 @mixin confirm-dialog-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-confirm-dialog {
         .title {
-            color: mat.get-color-from-palette($foreground, noder-base);
-            border-bottom-color: mat.get-color-from-palette($foreground, noder-divider);
+            color: map.get($theme, foreground-palette, noder-base);
+            border-bottom-color: map.get($theme, foreground-palette, noder-divider);
         }
 
         .content {
-            color: mat.get-color-from-palette($foreground, noder-text);
+            color: map.get($theme, foreground-palette, noder-text);
         }
 
         .actions .delete-btn {
-            color: mat.get-color-from-palette($foreground, noder-button-raised-text);
+            color: map.get($theme, foreground-palette, noder-button-raised-text);
 
             &:disabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-disabled);
             }
 
             &:enabled {
-                background-color: mat.get-color-from-palette($background, noder-button-raised-enabled);
+                background-color: map.get($theme, background-palette, noder-button-raised-enabled);
             }
         }
     }

package/src/lib/apart-components/editor-title/_editor-title.theme.scss

@@ -2,26 +2,23 @@
 @use 'sass:map';
 
 @mixin editor-title-component-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-editor-title {
-        background-color: mat.get-color-from-palette($background, noder-editor-header);
+        background-color: map.get($theme, background-palette, noder-editor-header);
 
         .file-name {
-            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+            color: map.get($theme, foreground-palette, noder-editor-header-text);
         }
 
         .editor-mode .mat-mdc-icon-button {
-            color: mat.get-color-from-palette($foreground, noder-button-header);
+            color: map.get($theme, foreground-palette, noder-button-header);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
             }
 
             &.selected-mode {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
-                color: mat.get-color-from-palette($foreground, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
+                color: map.get($theme, foreground-palette, noder-button-header-selected);
             }
         }
     }

package/src/lib/apart-components/editor-title-mobile/_editor-title-mobile.theme.scss

@@ -2,41 +2,38 @@
 @use 'sass:map';
 
 @mixin editor-title-mobile-component-theme($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     .noder-editor-title-mobile-menu {
         background-color: transparent;
         box-shadow: none !important;
 
         .mat-mdc-icon-button {
-            background-color: mat.get-color-from-palette($background, noder-editor-header);
-            color: mat.get-color-from-palette($foreground, noder-button-header);
+            background-color: map.get($theme, background-palette, noder-editor-header);
+            color: map.get($theme, foreground-palette, noder-button-header);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-editor-header);
+                background-color: map.get($theme, background-palette, noder-editor-header);
             }
         }
     }
 
     app-nod-editor-title-mobile {
-        background-color: mat.get-color-from-palette($background, noder-editor-header);
+        background-color: map.get($theme, background-palette, noder-editor-header);
 
         .file-name {
-            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+            color: map.get($theme, foreground-palette, noder-editor-header-text);
         }
 
         .editor-mode .mat-mdc-icon-button {
-            background-color: mat.get-color-from-palette($background, noder-button-header-selected);
-            color: mat.get-color-from-palette($foreground, noder-button-header-selected);
+            background-color: map.get($theme, background-palette, noder-button-header-selected);
+            color: map.get($theme, foreground-palette, noder-button-header-selected);
 
             .mat-mdc-button-persistent-ripple::before {
-                background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+                background-color: map.get($theme, background-palette, noder-button-header-selected);
             }
         }
 
         .circle {
-            background-color: mat.get-color-from-palette($background, noder-button-header-selected);
+            background-color: map.get($theme, background-palette, noder-button-header-selected);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/_editor-toolbar.theme.scss

@@ -2,26 +2,23 @@
 @use 'sass:map';
 
 @mixin editor-toolbar-component($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
     app-nod-editor-toolbar {
-        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+        background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
     }
 
     app-nod-editor-mobile-toolbar {
-        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+        background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
 
         .mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         .separator {
-            border-color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            border-color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
 
         button:hover {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-hover);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/color-picker/_color-picker.theme.scss

@@ -2,11 +2,9 @@
 @use 'sass:map';
 
 @mixin color-picker-component($theme) {
-    $foreground: map.get($theme, foreground);
-
     app-nod-color-picker {
         .color-text {
-            color: mat.get-color-from-palette($foreground, noder-button-text);
+            color: map.get($theme, foreground-palette, noder-button-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font/_font.theme.scss

@@ -2,11 +2,9 @@
 @use 'sass:map';
 
 @mixin font-component($theme) {
-    $foreground: map.get($theme, foreground);
-
     app-nod-font {
         .mat-mdc-button:not(:disabled) {
-            color: mat.get-color-from-palette($foreground, noder-button-text);
+            color: map.get($theme, foreground-palette, noder-button-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font-size/_font-size.theme.scss

@@ -2,13 +2,10 @@
 @use 'sass:map';
 
 @mixin font-size-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-font-size {
         input {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-text);
         }
     }
 }

package/src/lib/apart-components/editor-toolbar/components/buttons/font-style/_font-style.theme.scss

@@ -2,20 +2,17 @@
 @use 'sass:map';
 
 @mixin font-style-component($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     app-nod-font-style {
         mat-button-toggle {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
         }
 
         .mat-button-toggle-checked mat-icon {
-            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-button-selected);
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-button-selected);
         }
 
         .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-checked);
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-checked);
         }
     }
 }