feat(markdown): updating navigator docked mode

apps/docs-app/src/app/content/components/component-demos/markdown-navigator/demos/markdown-navigator-demo-basic/markdown-navigator-demo-basic.component.scss

@@ -1,4 +1,3 @@
 :host {
   width: 100%;
-  background-color: white;
 }

docs/WHAT_IS_COVALENT.md

@@ -8,42 +8,42 @@ Covalent is a UI Platform focused on solving common enterprise needs. Covalent f
 
 Covalent modules live in separated npm packages:
 
-**@covalent/core**
+### @covalent/core
 
 - Bundled with 20+ UI components
 - Including: Fully pre-made layouts, data table, wizard stepper, custom pipes, services, utility functions and more
 
-**@covalent/echarts**
+### @covalent/echarts
 
 - Atomic components made to facilitate visualizations
 - 9+ chart types including: bar, scatter, treemap and more
 
-**@covalent/highlight**
+### @covalent/highlight
 
 - Syntax highlighting with support for many languages
 
-**@covalent/markdown-parser**
+### @covalent/markdown-parser
 
 - Parse Github flavored markdown
 
-**@covalent/flavored-markdown**
+### @covalent/flavored-markdown
 
 - Turn markdown into material components
 
-**@covalent/markdown-navigator**
+### @covalent/markdown-navigator
 
 - Navigate through different sources of markdown
 - Draggable window for showing inline documentation
 
-**@covalent/dynamic-forms**
+### @covalent/dynamic-forms
 
 - Build forms from a JS object
 
-**@covalent/code-editor**
+### @covalent/code-editor
 
 - Multi-language code editor
 
-**@covalent/text-editor**
+### @covalent/text-editor
 
 - Simple markdown text editor component
 

libs/angular/common/src/common.module.ts

@@ -1,8 +1,8 @@
 import { Type } from '@angular/core';
 import { NgModule } from '@angular/core';
-
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { MAT_ICON_DEFAULT_OPTIONS } from '@angular/material/icon';
 
 /**
  * Directives
@@ -36,6 +36,11 @@ const TD_PIPES: Type<any>[] = [
   TdTruncatePipe,
 ];
 
+const TD_DEFAULT_ICON_OPTIONS = {
+  provide: MAT_ICON_DEFAULT_OPTIONS,
+  useValue: { fontSet: 'material-symbols-outlined' },
+};
+
 /**
  * Services
  */
@@ -47,6 +52,6 @@ import { IconService } from './services/icon.service';
   imports: [FormsModule, CommonModule],
   declarations: [TD_DIRECTIVES, TD_PIPES, TD_VALIDATORS],
   exports: [FormsModule, CommonModule, TD_DIRECTIVES, TD_PIPES, TD_VALIDATORS],
-  providers: [RouterPathService, IconService],
+  providers: [RouterPathService, IconService, TD_DEFAULT_ICON_OPTIONS],
 })
 export class CovalentCommonModule {}

libs/angular/common/styles/font/_font.scss

@@ -1,41 +1,7 @@
 $mat-font-url: 'styles/font/' !default;
 
 @mixin covalent-material-icons() {
-  @font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url($mat-font-url + 'MaterialIcons-Regular-v48.woff2') format('woff2');
-  }
-
-  .material-icons {
-    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px; /* Preferred icon size */
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-  }
+  @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block');
 
   // Ensure our size prevails over material
   mat-icon.material-icons {

libs/angular/dialogs/src/resizable-draggable-dialog/resizable-draggable-dialog.ts

@@ -128,6 +128,7 @@ export class ResizableDraggableDialog {
       this._renderer2.setStyle(element, 'position', 'absolute');
       this._renderer2.setStyle(element, 'width', cornerWidth);
       this._renderer2.setStyle(element, 'height', cornerWidth);
+      this._renderer2.setStyle(element, 'z-index', 1);
       this._renderer2.appendChild(this._getDialogWrapper(), element);
 
       let cursor: cursors;
@@ -144,7 +145,7 @@ export class ResizableDraggableDialog {
         rightLeft = horizontalAlignment.right;
 
         const icon: HTMLElement = this._renderer2.createElement('i');
-        this._renderer2.addClass(icon, 'material-icons');
+        this._renderer2.addClass(icon, 'material-symbols-outlined');
         this._renderer2.appendChild(
           icon,
           this._renderer2.createText('filter_list')
@@ -156,6 +157,7 @@ export class ResizableDraggableDialog {
           `rotate(${315}deg) translate(0px, ${offset})`
         );
         this._renderer2.setStyle(icon, 'font-size', cornerWidth);
+        this._renderer2.setStyle(icon, 'z-index', 1);
       } else if (corner === corners.bottomLeft) {
         cursor = cursors.nesw;
         topBottom = verticalAlignment.bottom;

libs/angular/dialogs/src/window-dialog/window-dialog.component.html

@@ -10,10 +10,14 @@
         {{ title }}
       </span>
 
-      <button mat-icon-button [matTooltip]="toggleDockedStateLabel ?? ''" (click)="toggleDockedState()">
-        <mat-icon [attr.aria-label]="toggleDockedStateLabel">
-          {{ docked ? 'unfold_more' : 'unfold_less' }}
-        </mat-icon>
+      <button
+        mat-icon-button
+        [matTooltip]="toggleDockedStateLabel ?? ''"
+        (click)="toggleDockedState()"
+      >
+        <mat-icon [attr.aria-label]="toggleDockedStateLabel"
+          >dock_to_right</mat-icon
+        >
       </button>
 
       <button

libs/markdown-flavored/src/lib/cfm-list/cfm-list.component.html

@@ -7,7 +7,7 @@ <h4 matListItemTitle>
       <p *ngFor="let subline of line.sublines" matListItemLine>
         {{ subline }}
       </p>
-      <mat-divider *ngIf="!last" matListItemLine></mat-divider>
     </mat-list-item>
+    <mat-divider *ngIf="!last"></mat-divider>
   </ng-template>
 </mat-list>

libs/markdown-navigator/src/markdown-navigator-window-service/markdown-navigator-window.service.ts

@@ -145,60 +145,15 @@ export class TdMarkdownNavigatorWindowService {
   }
 
   private _handleEvents(): void {
-    let position: Point;
-    let dimensions: IDialogDimensions;
     this.markdownNavigatorWindowDialog.componentInstance.closed.subscribe(() =>
       this.close()
     );
-    this.markdownNavigatorWindowDialog.componentInstance.dockToggled.subscribe(
-      (docked: boolean) => {
-        if (docked) {
-          this.markdownNavigatorWindowDialog.componentInstance.docked = false;
-          this.markdownNavigatorWindowDialog.updateSize(
-            dimensions.width,
-            dimensions.height
-          );
-          this.markdownNavigatorWindowDialog.updatePosition({
-            top: '0px',
-            right: '0px',
-            bottom: '0px',
-            left: '0px',
-          });
-          this.dragRef.setFreeDragPosition(position);
-          this.dragRef.disabled = false;
-          this.resizableDraggableDialog.attach();
-        } else {
-          dimensions = this._getDialogSize(this.markdownNavigatorWindowDialog);
-          position = this.dragRef.getFreeDragPosition();
-          this.markdownNavigatorWindowDialog.componentInstance.docked = true;
-          this.markdownNavigatorWindowDialog.updateSize(
-            DEFAULT_WIDTH,
-            MIN_HEIGHT
-          );
-          this.markdownNavigatorWindowDialog.updatePosition(DEFAULT_POSITION);
-          this.dragRef.reset();
-          this.dragRef.disabled = true;
-          this.resizableDraggableDialog.detach();
-        }
-      }
-    );
+
     this.markdownNavigatorWindowDialog
       .afterClosed()
       .toPromise()
       .then(() => {
         this.markdownNavigatorWindowDialogsOpen--;
       });
   }
-
-  private _getDialogSize(
-    dialogRef: MatDialogRef<TdMarkdownNavigatorWindowComponent>
-  ): IDialogDimensions {
-    const { width, height } = getComputedStyle(
-      this._document.getElementById(dialogRef.id).parentElement
-    );
-    return {
-      width,
-      height,
-    };
-  }
 }