@talrace/ngx-noder 0.0.7 → 0.0.9

package/src/lib/apart-components/editor-toolbar/_theme.scss

@@ -0,0 +1,25 @@
+@import './components/buttons/color-picker/color-picker.theme';
+@import './components/buttons/font-size/font-size.theme';
+@import './components/buttons/font-style/font-style.theme';
+@import './components/buttons/font/font.theme';
+@import './components/buttons/format/format.theme';
+@import './components/buttons/numbering/numbering.theme';
+@import './components/buttons/undo-redo/undo-redo.theme';
+@import './components/menu-dropdowns-mobile/menu-dropdowns-mobile.theme';
+@import './components/menu-dropdowns/menu-dropdowns.theme';
+@import './components/toolbar-actions/toolbar-actions.theme';
+@import './editor-toolbar.theme';
+
+@mixin editor-toolbar-theme($theme) {
+    @include color-picker-component($theme);
+    @include editor-toolbar-component($theme);
+    @include font-component($theme);
+    @include font-size-component($theme);
+    @include font-style-component($theme);
+    @include format-component($theme);
+    @include menu-dropdowns-component($theme);
+    @include menu-dropdowns-mobile-component($theme);
+    @include numbering-component($theme);
+    @include toolbar-actions-component($theme);
+    @include undo-redo-component($theme);
+}

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

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+@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);
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+@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);
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+@use '@angular/material' as mat;
+@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);
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@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);
+        }
+
+        .mat-button-toggle-checked mat-icon {
+            color: mat.get-color-from-palette($foreground, 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);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/components/buttons/format/_format.theme.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin format-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    app-nod-format {
+        mat-button-toggle {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+        }
+
+        .mat-button-toggle-checked mat-icon {
+            color: mat.get-color-from-palette($foreground, 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);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/components/buttons/numbering/_numbering.theme.scss

@@ -0,0 +1,70 @@
+/* stylelint-disable no-descending-specificity */
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin numbering-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .dropdown-numbering-overlay,
+    app-nod-numbering {
+        mat-button-toggle {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+        }
+
+        .mat-button-toggle-checked mat-icon {
+            color: mat.get-color-from-palette($foreground, 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);
+        }
+
+        .list-marker,
+        .list-number {
+            border-color: mat.get-color-from-palette($background, noder-numbering-border);
+
+            mat-icon {
+                stroke: mat.get-color-from-palette($foreground, noder-numbering-line);
+
+                .line {
+                    fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+                }
+
+                .bullet {
+                    stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                }
+
+                .filled {
+                    fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                }
+
+                path {
+                    fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                    stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                }
+
+                rect:last-child {
+                    stroke: mat.get-color-from-palette($background, noder-numbering-border);
+                }
+            }
+
+            .mat-icon {
+                background-color: mat.get-color-from-palette($background, noder-numbering);
+
+                &:hover {
+                    background-color: mat.get-color-from-palette($background, noder-numbering-hover);
+                }
+            }
+
+            .selected,
+            .selected:hover {
+                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
+            }
+        }
+
+        .list-number rect:not(:last-child) {
+            fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/components/buttons/undo-redo/_undo-redo.theme.scss

@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin undo-redo-component($theme) {
+    $foreground: map.get($theme, foreground);
+
+    app-nod-undo-redo {
+        .mat-mdc-button:not(:disabled) .mat-icon {
+            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        .mat-mdc-button:disabled .mat-icon {
+            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text-disabled);
+        }
+    }
+}

package/src/lib/apart-components/editor-toolbar/components/menu-dropdowns/_menu-dropdowns.theme.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin menu-dropdowns-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    app-nod-menu-dropdowns {
+        input {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
+            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        button:hover {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+        }
+
+        .mat-mdc-button:not(:disabled) {
+            color: mat.get-color-from-palette($foreground, noder-button-text);
+        }
+    }
+
+    .noder-divider {
+        border-color: mat.get-color-from-palette($foreground, noder-divider);
+    }
+}

package/src/lib/apart-components/editor-toolbar/components/menu-dropdowns-mobile/_menu-dropdowns-mobile.theme.scss

@@ -0,0 +1,33 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin menu-dropdowns-mobile-component($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    app-nod-menu-dropdowns-mobile {
+        .mat-expansion-panel {
+            background-color: mat.get-color-from-palette($background, noder-editor-mat-drawer);
+            border-bottom-color: mat.get-color-from-palette($foreground, noder-divider);
+        }
+
+        .mat-expansion-panel-header-title {
+            color: mat.get-color-from-palette($foreground, noder-base);
+        }
+
+        .expansion-panel-content {
+            .mat-mdc-menu-item {
+                color: mat.get-color-from-palette($foreground, noder-base);
+            }
+
+            .mat-icon {
+                color: mat.get-color-from-palette($foreground, noder-base);
+            }
+        }
+
+        .composition-icon,
+        .mat-expansion-panel-header .mat-icon {
+            color: mat.get-color-from-palette($foreground, noder-base);
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin toolbar-actions-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    app-nod-toolbar-actions {
+        .mat-icon {
+            color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        .separator {
+            border-color: mat.get-color-from-palette($foreground, noder-editor-toolbar-text);
+        }
+
+        .active-button,
+        button:hover {
+            background-color: mat.get-color-from-palette($background, noder-editor-toolbar-button-hover);
+        }
+    }
+}

package/src/lib/{+shared → apart-components}/insert-table/_insert-table.theme.scss

@@ -5,18 +5,21 @@
     $background: map.get($theme, background);
     $foreground: map.get($theme, foreground);
 
-    app-insert-table {
-        background-color: mat.get-color-from-palette($background, page-header);
-        box-shadow: mat.get-color-from-palette($background, button-background, 0.12);
+    app-nod-insert-table {
+        background-color: mat.get-color-from-palette($background, noder-page-background);
 
         .cell {
-            border: 1px solid mat.get-color-from-palette($background, selected-disabled-button);
-            background-color: mat.get-color-from-palette($background, editor-background);
+            border: 1px solid mat.get-color-from-palette($background, noder-insert-table-cell-border);
+            background-color: mat.get-color-from-palette($background, noder-insert-table-cell);
 
             &.highlighted {
-                border-color: mat.get-color-from-palette($background, insert-table-cell-border-highlighted);
-                background-color: mat.get-color-from-palette($background, insert-table-cell-highlighted);
+                border-color: mat.get-color-from-palette($background, noder-insert-table-cell-border-highlighted);
+                background-color: mat.get-color-from-palette($background, noder-insert-table-cell-highlighted);
             }
         }
+
+        .table-size {
+            color: mat.get-color-from-palette($foreground, noder-insert-table-size-label);
+        }
     }
 }

package/src/lib/apart-components/insert-table-mobile/_insert-table-mobile.theme.scss

@@ -0,0 +1,54 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin insert-table-mobile-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    app-nod-insert-table-mobile {
+        .cell {
+            border-color: mat.get-color-from-palette($background, noder-insert-table-cell-border);
+            background-color: mat.get-color-from-palette($background, noder-insert-table-cell);
+
+            &.highlighted {
+                border-color: mat.get-color-from-palette($background, noder-insert-table-cell-border-highlighted);
+                background-color: mat.get-color-from-palette($background, noder-insert-table-cell-highlighted);
+            }
+        }
+
+        .mat-mdc-form-field .mdc-fab {
+            color: mat.get-color-from-palette($foreground, noder-base);
+            background-color: transparent;
+            box-shadow: none;
+        }
+
+        .separator {
+            border-color: rgba(mat.get-color-from-palette($foreground, noder-base), 0.24);
+        }
+
+        .quick-select-title {
+            color: rgba(mat.get-color-from-palette($foreground, noder-base), 0.56);
+        }
+
+        .title,
+        .input-title {
+            color: mat.get-color-from-palette($foreground, noder-modal-text);
+
+            .mat-icon {
+                color: mat.get-color-from-palette($foreground, noder-modal-text);
+            }
+        }
+
+        .actions .mdc-fab {
+            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
+
+            &:disabled {
+                background-color: mat.get-color-from-palette($background, noder-button-raised-disabled);
+            }
+
+            &:enabled {
+                background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+            }
+        }
+    }
+}

package/src/lib/apart-components/text-format-mobile/_text-format-mobile.theme.scss

@@ -0,0 +1,86 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin text-format-mobile-component($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    app-nod-text-format-mobile {
+        .title {
+            color: mat.get-color-from-palette($foreground, noder-modal-text);
+        }
+
+        .actions .mdc-fab {
+            color: mat.get-color-from-palette($foreground, noder-button-fab-text);
+            background-color: mat.get-color-from-palette($background, noder-button-sidenav-fab);
+        }
+
+        .text-style-container .mat-mdc-button {
+            background-color: mat.get-color-from-palette($background, noder-button-input-background);
+            color: mat.get-color-from-palette($foreground, noder-button-input-text);
+        }
+
+        app-nod-font .mat-mdc-button:not(:disabled) {
+            color: mat.get-color-from-palette($foreground, noder-base);
+        }
+
+        app-nod-font-size {
+            border-color: mat.get-color-from-palette($foreground, noder-base);
+
+            .mat-mdc-button:not(:disabled) {
+                color: mat.get-color-from-palette($foreground, noder-base);
+            }
+
+            input {
+                color: mat.get-color-from-palette($foreground, noder-base);
+            }
+        }
+
+        .content .content-container .mat-button-toggle-button:hover {
+            background-color: inherit;
+        }
+
+        .empty-numbering {
+            border-color: mat.get-color-from-palette($background, noder-numbering-border);
+            color: mat.get-color-from-palette($foreground, noder-base);
+
+            &.selected {
+                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
+            }
+        }
+
+        .list-number rect:not(:last-child) {
+            fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+        }
+
+        .numbering-line mat-icon {
+            border-color: mat.get-color-from-palette($background, noder-numbering-border);
+            stroke: mat.get-color-from-palette($foreground, noder-numbering-line);
+
+            .line {
+                fill: mat.get-color-from-palette($foreground, noder-numbering-line);
+            }
+
+            .bullet {
+                stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+            }
+
+            .filled {
+                fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+            }
+
+            path {
+                fill: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+                stroke: mat.get-color-from-palette($foreground, noder-numbering-bullet);
+            }
+
+            rect:last-child {
+                stroke: mat.get-color-from-palette($background, noder-numbering-border);
+            }
+
+            &.selected {
+                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
+            }
+        }
+    }
+}

package/src/lib/editor/_theme.scss

@@ -0,0 +1,5 @@
+@import './components/editor.theme';
+
+@mixin editor-theme($theme) {
+    @include editor-component-theme($theme);
+}

package/src/lib/editor/components/_editor.theme.scss

@@ -0,0 +1,112 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin editor-component-theme($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    app-nod-editor {
+        ::-webkit-scrollbar-track {
+            background-color: mat.get-color-from-palette($background, noder-scrollbar-track);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: mat.get-color-from-palette($background, noder-scrollbar-thumb);
+        }
+
+        .container {
+            background-color: mat.get-color-from-palette($background, noder-editor-background);
+
+            .page {
+                background-color: mat.get-color-from-palette($background, noder-page-background);
+            }
+        }
+
+        .drawer-container {
+            .mat-mdc-button {
+                border: 1px solid mat.get-color-from-palette($foreground, form-field-border);
+            }
+
+            .mat-button-toggle-button {
+                background-color: mat.get-color-from-palette($background, noder-button-input-background);
+                color: mat.get-color-from-palette($foreground, noder-button-input-text);
+            }
+
+            .mat-button-toggle-button:hover {
+                background-color: mat.get-color-from-palette($background, noder-button-input-hover);
+            }
+
+            .mat-button-toggle-checked button {
+                background-color: mat.get-color-from-palette($background, noder-button-input-checked);
+                color: mat.get-color-from-palette($foreground, noder-button-toggle-checked);
+            }
+        }
+    }
+
+    .noder-modal {
+        background-color: mat.get-color-from-palette($background, noder-modal-background);
+
+        .mat-mdc-menu-item {
+            color: mat.get-color-from-palette($foreground, noder-modal-text);
+
+            .mat-icon-no-color {
+                color: mat.get-color-from-palette($foreground, noder-modal-text);
+            }
+
+            .mat-mdc-menu-submenu-icon {
+                color: mat.get-color-from-palette($foreground, noder-modal-text);
+            }
+
+            &:not([disabled]):hover {
+                background-color: mat.get-color-from-palette($background, noder-modal-background-hover);
+            }
+        }
+    }
+
+    app-nod-editor,
+    .noder-modal {
+        /* stylelint-disable no-descending-specificity */
+        .mat-drawer {
+            background-color: mat.get-color-from-palette($background, noder-editor-mat-drawer);
+        }
+
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-text-field__input {
+            color: mat.get-color-from-palette($foreground, noder-text);
+            caret-color: mat.get-color-from-palette($foreground, noder-text);
+        }
+
+        .mdc-text-field:not(.mdc-text-field--invalid) {
+            &.mdc-text-field--disabled {
+                border-color: mat.get-color-from-palette($foreground, noder-form-field-border-disabled);
+
+                .mdc-floating-label {
+                    color: mat.get-color-from-palette($foreground, noder-form-field-border-disabled);
+                }
+            }
+
+            &.mdc-text-field--focused,
+            &:hover:not(.mdc-text-field--disabled) {
+                .mdc-notched-outline > * {
+                    border-color: mat.get-color-from-palette($foreground, noder-form-field-border-focused);
+                }
+
+                .mdc-floating-label {
+                    color: mat.get-color-from-palette($foreground, noder-form-field-border-focused);
+                }
+            }
+
+            .mdc-notched-outline > * {
+                border-color: mat.get-color-from-palette($foreground, noder-form-field-border);
+
+                .mdc-floating-label {
+                    color: mat.get-color-from-palette($foreground, noder-form-field-border);
+                }
+            }
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .ngx-colors-overlay .opened {
+        background-color: mat.get-color-from-palette($background, noder-editor-background);
+    }
+}

package/src/scss/_fonts.scss

@@ -0,0 +1,3 @@
+$roboto-font-path: '~roboto-fontface/fonts' !default;
+
+@import '../../../../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface';