@talrace/ngx-noder 0.0.4 → 0.0.6

package/src/lib/+shared/confirm-dialog/_theme.scss

@@ -7,23 +7,23 @@
 
     app-confirm-dialog {
         .title {
-            color: mat.get-color-from-palette($foreground, base);
-            border-bottom-color: mat.get-color-from-palette($foreground, divider);
+            color: mat.get-color-from-palette($foreground, noder-base);
+            border-bottom-color: mat.get-color-from-palette($foreground, noder-divider);
         }
 
         .content {
-            color: mat.get-color-from-palette($foreground, text);
+            color: mat.get-color-from-palette($foreground, noder-text);
         }
 
         .actions .delete-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);
             }
         }
     }

package/src/lib/+shared/editor/_editor.theme.scss

@@ -5,31 +5,100 @@
     $background: map.get($theme, background);
     $foreground: map.get($theme, foreground);
 
-    .container {
-        background-color: mat.get-color-from-palette($background, editor-background);
+    app-editor {
+        .container {
+            background-color: mat.get-color-from-palette($background, noder-editor-background);
 
-        .page {
-            background-color: mat.get-color-from-palette($background, page-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);
+            }
         }
     }
 
-    .drawer-container {
-        .mat-mdc-button {
-            border: 1px solid mat.get-color-from-palette($foreground, form-field-border);
+    .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);
+            }
         }
+    }
 
-        .mat-button-toggle-button {
-            background-color: mat.get-color-from-palette($background, button-input-background);
-            color: mat.get-color-from-palette($foreground, button-input-text);
+    app-editor,
+    .noder-modal {
+        /* stylelint-disable no-descending-specificity */
+        .mat-drawer {
+            background-color: mat.get-color-from-palette($background, noder-editor-mat-drawer);
         }
 
-        .mat-button-toggle-button:hover {
-            background-color: mat.get-color-from-palette($background, button-input-hover);
+        .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);
         }
 
-        .mat-button-toggle-checked button {
-            background-color: mat.get-color-from-palette($background, button-input-checked);
-            color: mat.get-color-from-palette($foreground, button-toggle-checked);
+        .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/lib/+shared/editor/_theme.scss

@@ -1,7 +1,5 @@
-@import './custom-components/external-element/element-toolbar/element-toolbar.theme';
 @import './editor.theme';
 
 @mixin editor-theme($theme) {
-    @include element-toolbar-theme($theme);
     @include editor-component-theme($theme);
 }

package/src/lib/+shared/editor-title/_editor-title.theme.scss

@@ -0,0 +1,28 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin editor-title-component-theme($theme) {
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
+
+    app-editor-title {
+        background-color: mat.get-color-from-palette($background, noder-editor-header);
+
+        .file-name {
+            color: mat.get-color-from-palette($foreground, noder-editor-header-text);
+        }
+
+        .editor-mode .mat-mdc-icon-button {
+            color: mat.get-color-from-palette($foreground, noder-button-header);
+
+            .mat-mdc-button-persistent-ripple::before {
+                background-color: mat.get-color-from-palette($background, 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);
+            }
+        }
+    }
+}

package/src/lib/+shared/editor-toolbar/_editor-toolbar.theme.scss

@@ -2,32 +2,9 @@
 @use 'sass:map';
 
 @mixin editor-toolbar-component($theme) {
-    $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
     app-editor-toolbar {
-        background-color: mat.get-color-from-palette($background, editor-toolbar);
-        border-color: mat.get-color-from-palette($foreground, editor-toolbar-border);
-
-        input {
-            background-color: mat.get-color-from-palette($background, editor-toolbar);
-            color: mat.get-color-from-palette($foreground, text);
-        }
-
-        mat-button-toggle {
-            background-color: mat.get-color-from-palette($background, editor-toolbar);
-        }
-
-        .mat-button-toggle-checked mat-icon {
-            color: mat.get-color-from-palette($foreground, selected-button-icon);
-        }
-
-        button:hover {
-            background-color: mat.get-color-from-palette($background, focused-button);
-        }
-
-        .separator {
-            border-color: mat.get-color-from-palette($foreground, text);
-        }
+        background-color: mat.get-color-from-palette($background, noder-editor-toolbar-transparent);
     }
 }

package/src/lib/+shared/editor-toolbar/_theme.scss

@@ -1,7 +1,21 @@
-@import './numbering/numbering.theme';
 @import './editor-toolbar.theme';
+@import './font-size/font-size.theme';
+@import './font-style/font-style.theme';
+@import './font/font.theme';
+@import './format/format.theme';
+@import './menu-dropdowns/menu-dropdowns.theme';
+@import './numbering/numbering.theme';
+@import './toolbar-actions/toolbar-actions.theme';
+@import './undo-redo/undo-redo.theme';
 
 @mixin editor-toolbar-theme($theme) {
-    @include numbering-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 numbering-component($theme);
+    @include toolbar-actions-component($theme);
+    @include undo-redo-component($theme);
 }

package/src/lib/+shared/editor-toolbar/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-font {
+        .mat-mdc-button:not(:disabled) {
+            color: mat.get-color-from-palette($foreground, noder-button-text);
+        }
+    }
+}

package/src/lib/+shared/editor-toolbar/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-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/+shared/editor-toolbar/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-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/+shared/editor-toolbar/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-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/+shared/editor-toolbar/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-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/+shared/editor-toolbar/numbering/_numbering.theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @use '@angular/material' as mat;
 @use 'sass:map';
 
@@ -5,25 +6,65 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    .list-marker, .list-number {
-        mat-icon {
-            stroke: mat.get-color-from-palette($foreground, numbering-line);
+    .dropdown-numbering-overlay,
+    app-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);
 
-            .line {
-                fill: mat.get-color-from-palette($foreground, numbering-line);
+            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);
+                }
             }
 
-            .bullet {
-                stroke: mat.get-color-from-palette($foreground, numbering-bullet);
+            .mat-icon {
+                background-color: mat.get-color-from-palette($background, noder-numbering);
+
+                &:hover {
+                    background-color: mat.get-color-from-palette($background, noder-numbering-hover);
+                }
             }
 
-            .filled {
-                fill: mat.get-color-from-palette($foreground, numbering-bullet);
+            .selected,
+            .selected:hover {
+                border-color: mat.get-color-from-palette($background, noder-selected-numbering-border);
             }
         }
 
-        mat-icon:hover {
-            background-color: mat.get-color-from-palette($background, numbering-hover);
+        .list-number rect:not(:last-child) {
+            fill: mat.get-color-from-palette($foreground, noder-numbering-line);
         }
     }
 }

package/src/lib/+shared/editor-toolbar/toolbar-actions/_toolbar-actions.theme.scss

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

package/src/lib/+shared/editor-toolbar/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-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/+shared/insert-table/_insert-table.theme.scss

@@ -6,17 +6,20 @@
     $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);
+        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/scss/_mixins.scss

@@ -5,45 +5,10 @@
     $background: map.get($theme, background);
 
     ::-webkit-scrollbar-track {
-        background-color: mat.get-color-from-palette($background, scrollbar-track);
+        background-color: mat.get-color-from-palette($background, noder-scrollbar-track);
     }
 
     ::-webkit-scrollbar-thumb {
-        background: mat.get-color-from-palette($background, scrollbar-thumb);
+        background: mat.get-color-from-palette($background, noder-scrollbar-thumb);
     }
 }
-
-@mixin form-field-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    .mdc-text-field:not(.mdc-text-field--invalid) {
-        .mdc-notched-outline > * {
-            border-color: mat.get-color-from-palette($foreground, form-field-border);
-        }
-
-        &.mdc-text-field--disabled {
-            border-color: mat.get-color-from-palette($foreground, 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, form-field-border-focused);
-            }
-        }
-    }
-
-    $form-field-light-primary: mat.define-palette($black-palette);
-    $form-field-light-theme: mat.define-light-theme(
-            (
-                color: (
-                    primary: $form-field-light-primary,
-                    accent: $light-accent,
-                    warn: $light-warn
-                ),
-                density: 0
-            )
-    );
-
-    @include mat.form-field-color($form-field-light-theme);
-}

package/esm2022/lib/+shared/editor/custom-components/external-element/element-toolbar/element-toolbar.component.mjs

@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ElementDataModel } from '../models/element-data.model';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/material/button";
-import * as i3 from "@angular/material/icon";
-import * as i4 from "@angular/material/tooltip";
-export class ElementToolbarComponent {
-    constructor() {
-        this.isDisabled = false;
-        this.createElement = new EventEmitter();
-        this.isHide = false;
-    }
-    changeVisibility() {
-        this.isHide = !this.isHide;
-    }
-    async create(model) {
-        const data = await model.factoryMethod();
-        const element = new ElementDataModel(model.type, data.width, data.height, data.guid);
-        this.createElement.emit(element);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElementToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ElementToolbarComponent, selector: "app-element-toolbar", inputs: { isDisabled: "isDisabled", elements: "elements" }, outputs: { createElement: "createElement" }, ngImport: i0, template: "<button\n    class=\"menu\"\n    mat-raised-button\n    (click)=\"changeVisibility()\">\n    <div class=\"icon\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-menu-circle\"></mat-icon>\n    </div>\n</button>\n<div\n    class=\"menu-items\"\n    *ngIf=\"!isHide\">\n    <div class=\"empty-place\"></div>\n    <button\n        *ngFor=\"let element of elements\"\n        mat-icon-button\n        matTooltip=\"{{ element.name }}\"\n        matTooltipPosition=\"left\"\n        (click)=\"create(element)\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{position:absolute}.mat-mdc-button.mat-mdc-button-base,.mat-mdc-raised-button.mat-mdc-button-base,.mat-mdc-unelevated-button.mat-mdc-button-base,.mat-mdc-outlined-button.mat-mdc-button-base{padding-right:21px}.menu-items{z-index:1;top:24px;position:absolute;max-width:50px;display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:1px 2px 5px #0000001a}.menu-items .empty-place{height:24px}.menu{border-radius:30px 0 0 30px;min-width:56px;width:56px;height:48px;z-index:2}.menu .icon mat-icon{height:22px;width:24px;font-size:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ElementToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-element-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"menu\"\n    mat-raised-button\n    (click)=\"changeVisibility()\">\n    <div class=\"icon\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"icon-menu-circle\"></mat-icon>\n    </div>\n</button>\n<div\n    class=\"menu-items\"\n    *ngIf=\"!isHide\">\n    <div class=\"empty-place\"></div>\n    <button\n        *ngFor=\"let element of elements\"\n        mat-icon-button\n        matTooltip=\"{{ element.name }}\"\n        matTooltipPosition=\"left\"\n        (click)=\"create(element)\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"nc-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{position:absolute}.mat-mdc-button.mat-mdc-button-base,.mat-mdc-raised-button.mat-mdc-button-base,.mat-mdc-unelevated-button.mat-mdc-button-base,.mat-mdc-outlined-button.mat-mdc-button-base{padding-right:21px}.menu-items{z-index:1;top:24px;position:absolute;max-width:50px;display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:1px 2px 5px #0000001a}.menu-items .empty-place{height:24px}.menu{border-radius:30px 0 0 30px;min-width:56px;width:56px;height:48px;z-index:2}.menu .icon mat-icon{height:22px;width:24px;font-size:24px}\n"] }]
-        }], propDecorators: { isDisabled: [{
-                type: Input
-            }], elements: [{
-                type: Input
-            }], createElement: [{
-                type: Output
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC10b29sYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub2Rlci9zcmMvbGliLytzaGFyZWQvZWRpdG9yL2N1c3RvbS1jb21wb25lbnRzL2V4dGVybmFsLWVsZW1lbnQvZWxlbWVudC10b29sYmFyL2VsZW1lbnQtdG9vbGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbm9kZXIvc3JjL2xpYi8rc2hhcmVkL2VkaXRvci9jdXN0b20tY29tcG9uZW50cy9leHRlcm5hbC1lbGVtZW50L2VsZW1lbnQtdG9vbGJhci9lbGVtZW50LXRvb2xiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7O0FBU2hFLE1BQU0sT0FBTyx1QkFBdUI7SUFOcEM7UUFPYSxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBSWxCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFL0QsV0FBTSxHQUFHLEtBQUssQ0FBQztLQVdsQjtJQVRHLGdCQUFnQjtRQUNaLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQy9CLENBQUM7SUFFRCxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQTJCO1FBQ3BDLE1BQU0sSUFBSSxHQUFHLE1BQU0sS0FBSyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3pDLE1BQU0sT0FBTyxHQUFHLElBQUksZ0JBQWdCLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JGLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7OEdBakJRLHVCQUF1QjtrR0FBdkIsdUJBQXVCLG9LQ1hwQyxxc0JBMEJBOzsyRkRmYSx1QkFBdUI7a0JBTm5DLFNBQVM7K0JBQ0kscUJBQXFCLG1CQUdkLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEVsZW1lbnREYXRhTW9kZWwgfSBmcm9tICcuLi9tb2RlbHMvZWxlbWVudC1kYXRhLm1vZGVsJztcbmltcG9ydCB7IEV4dGVybmFsRWxlbWVudE1vZGVsIH0gZnJvbSAnLi4vbW9kZWxzL2V4dGVybmFsLWVsZW1lbnQubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2FwcC1lbGVtZW50LXRvb2xiYXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9lbGVtZW50LXRvb2xiYXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2VsZW1lbnQtdG9vbGJhci5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEVsZW1lbnRUb29sYmFyQ29tcG9uZW50IHtcbiAgICBASW5wdXQoKSBpc0Rpc2FibGVkID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBlbGVtZW50czogRXh0ZXJuYWxFbGVtZW50TW9kZWxbXTtcblxuICAgIEBPdXRwdXQoKSBjcmVhdGVFbGVtZW50ID0gbmV3IEV2ZW50RW1pdHRlcjxFbGVtZW50RGF0YU1vZGVsPigpO1xuXG4gICAgaXNIaWRlID0gZmFsc2U7XG5cbiAgICBjaGFuZ2VWaXNpYmlsaXR5KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmlzSGlkZSA9ICF0aGlzLmlzSGlkZTtcbiAgICB9XG5cbiAgICBhc3luYyBjcmVhdGUobW9kZWw6IEV4dGVybmFsRWxlbWVudE1vZGVsKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgICAgIGNvbnN0IGRhdGEgPSBhd2FpdCBtb2RlbC5mYWN0b3J5TWV0aG9kKCk7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBuZXcgRWxlbWVudERhdGFNb2RlbChtb2RlbC50eXBlLCBkYXRhLndpZHRoLCBkYXRhLmhlaWdodCwgZGF0YS5ndWlkKTtcbiAgICAgICAgdGhpcy5jcmVhdGVFbGVtZW50LmVtaXQoZWxlbWVudCk7XG4gICAgfVxufVxuIiwiPGJ1dHRvblxuICAgIGNsYXNzPVwibWVudVwiXG4gICAgbWF0LXJhaXNlZC1idXR0b25cbiAgICAoY2xpY2spPVwiY2hhbmdlVmlzaWJpbGl0eSgpXCI+XG4gICAgPGRpdiBjbGFzcz1cImljb25cIj5cbiAgICAgICAgPG1hdC1pY29uXG4gICAgICAgICAgICBmb250U2V0PVwibmMtaWNvblwiXG4gICAgICAgICAgICBmb250SWNvbj1cImljb24tbWVudS1jaXJjbGVcIj48L21hdC1pY29uPlxuICAgIDwvZGl2PlxuPC9idXR0b24+XG48ZGl2XG4gICAgY2xhc3M9XCJtZW51LWl0ZW1zXCJcbiAgICAqbmdJZj1cIiFpc0hpZGVcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZW1wdHktcGxhY2VcIj48L2Rpdj5cbiAgICA8YnV0dG9uXG4gICAgICAgICpuZ0Zvcj1cImxldCBlbGVtZW50IG9mIGVsZW1lbnRzXCJcbiAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgIG1hdFRvb2x0aXA9XCJ7eyBlbGVtZW50Lm5hbWUgfX1cIlxuICAgICAgICBtYXRUb29sdGlwUG9zaXRpb249XCJsZWZ0XCJcbiAgICAgICAgKGNsaWNrKT1cImNyZWF0ZShlbGVtZW50KVwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJpc0Rpc2FibGVkXCI+XG4gICAgICAgIDxtYXQtaWNvblxuICAgICAgICAgICAgZm9udFNldD1cIm5jLWljb25cIlxuICAgICAgICAgICAgZm9udEljb249XCJ7eyBlbGVtZW50Lmljb24gfX1cIj48L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=