teso business feb 6th commit

3 years ago · 1120c6d893
345 changed files with 9025 additions and 55115 deletions
--- a/angular.json
+++ b/angular.json
@ -3,7 +3,7 @@
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
-        "fuse": {
+        "teso": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
@ -42,14 +42,14 @@
                        ],
                        "stylePreprocessorOptions": {
                            "includePaths": [
-                                "src/@fuse/styles"
+                                "src/@teso/styles"
                            ]
                        },
                        "styles": [
-                            "src/@fuse/styles/tailwind.scss",
-                            "src/@fuse/styles/themes.scss",
+                            "src/@teso/styles/tailwind.scss",
+                            "src/@teso/styles/themes.scss",
                            "src/styles/vendors.scss",
-                            "src/@fuse/styles/main.scss",
+                            "src/@teso/styles/main.scss",
                            "src/styles/styles.scss",
                            "src/styles/tailwind.scss"
                        ],
@ -89,10 +89,10 @@
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "configurations": {
                        "production": {
-                            "browserTarget": "fuse:build:production"
+                            "browserTarget": "teso:build:production"
                        },
                        "development": {
-                            "browserTarget": "fuse:build:development"
+                            "browserTarget": "teso:build:development"
                        }
                    },
                    "defaultConfiguration": "development"
@ -100,7 +100,7 @@
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
-                        "browserTarget": "fuse:build"
+                        "browserTarget": "teso:build"
                    }
                },
                "test": {
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,20 +1,19 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html

-module.exports = function (config)
-{
+module.exports = function(config) {
    config.set({
-        basePath           : '',
-        frameworks         : ['jasmine', '@angular-devkit/build-angular'],
-        plugins            : [
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
-        client             : {
-            jasmine     : {
+        client: {
+            jasmine: {
                // you can add configuration options for Jasmine here
                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
                // for example, you can disable the random execution with `random: false`
@ -25,21 +24,21 @@ module.exports = function (config)
        jasmineHtmlReporter: {
            suppressAll: true // removes the duplicated traces
        },
-        coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/fuse'),
-            subdir   : '.',
+        coverageReporter: {
+            dir: require('path').join(__dirname, './coverage/teso'),
+            subdir: '.',
            reporters: [
-                {type: 'html'},
-                {type: 'text-summary'}
+                { type: 'html' },
+                { type: 'text-summary' }
            ]
        },
-        reporters          : ['progress', 'kjhtml'],
-        port               : 9876,
-        colors             : true,
-        logLevel           : config.LOG_INFO,
-        autoWatch          : true,
-        browsers           : ['Chrome'],
-        singleRun          : false,
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
        restartOnFileChange: true
    });
-};
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -40,7 +40,7 @@
        "lodash-es": "4.17.21",
        "moment": "2.29.1",
        "ng-apexcharts": "1.5.12",
-        "ngx-markdown": "12.0.1",
+        "ngx-markdown": "^12.1.0",
        "ngx-quill": "14.3.0",
        "node.js": "^0.0.1-security",
        "perfect-scrollbar": "1.5.2",
@ -62,7 +62,7 @@
        "@angular-eslint/eslint-plugin-template": "12.3.1",
        "@angular-eslint/schematics": "^13.0.1",
        "@angular-eslint/template-parser": "12.3.1",
-        "@angular/cli": "^13.0.3",
+        "@angular/cli": "^13.2.2",
        "@angular/compiler-cli": "13.0.2",
        "@tailwindcss/aspect-ratio": "0.2.1",
        "@tailwindcss/line-clamp": "0.2.1",
--- a/src/@fuse/animations/index.ts
+++ b/src/@fuse/animations/index.ts
@ -1 +0,0 @@
-export * from '@fuse/animations/public-api';
--- a/src/@fuse/components/alert/alert.component.html
+++ b/src/@fuse/components/alert/alert.component.html
@ -1,82 +0,0 @@
-<div
-    class="fuse-alert-container"
-    *ngIf="!dismissible || dismissible && !dismissed"
-    [@fadeIn]="!dismissed"
-    [@fadeOut]="!dismissed">
-
-    <!-- Border -->
-    <div
-        class="fuse-alert-border"
-        *ngIf="appearance === 'border'"></div>
-
-    <!-- Icon -->
-    <div
-        class="fuse-alert-icon"
-        *ngIf="showIcon">
-
-        <!-- Custom icon -->
-        <div class="fuse-alert-custom-icon">
-            <ng-content select="[fuseAlertIcon]"></ng-content>
-        </div>
-
-        <!-- Default icons -->
-        <div class="fuse-alert-default-icon">
-
-            <mat-icon
-                *ngIf="type === 'primary'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'accent'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'warn'"
-                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'basic'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'info'"
-                [svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'success'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'warning'"
-                [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
-
-            <mat-icon
-                *ngIf="type === 'error'"
-                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
-
-        </div>
-
-    </div>
-
-    <!-- Content -->
-    <div class="fuse-alert-content">
-
-        <div class="fuse-alert-title">
-            <ng-content select="[fuseAlertTitle]"></ng-content>
-        </div>
-
-        <div class="fuse-alert-message">
-            <ng-content></ng-content>
-        </div>
-
-    </div>
-
-    <!-- Dismiss button -->
-    <button
-        class="fuse-alert-dismiss-button"
-        mat-icon-button
-        (click)="dismiss()">
-        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
-    </button>
-
-</div>
--- a/src/@fuse/components/alert/index.ts
+++ b/src/@fuse/components/alert/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/alert/public-api';
--- a/src/@fuse/components/alert/public-api.ts
+++ b/src/@fuse/components/alert/public-api.ts
@ -1,4 +0,0 @@
-export * from '@fuse/components/alert/alert.component';
-export * from '@fuse/components/alert/alert.module';
-export * from '@fuse/components/alert/alert.service';
-export * from '@fuse/components/alert/alert.types';
--- a/src/@fuse/components/card/card.component.html
+++ b/src/@fuse/components/card/card.component.html
@ -1,30 +0,0 @@
-<!-- Flippable card -->
-<ng-container *ngIf="flippable">
-
-    <!-- Front -->
-    <div class="fuse-card-front">
-        <ng-content select="[fuseCardFront]"></ng-content>
-    </div>
-
-    <!-- Back -->
-    <div class="fuse-card-back">
-        <ng-content select="[fuseCardBack]"></ng-content>
-    </div>
-
-</ng-container>
-
-<!-- Normal card -->
-<ng-container *ngIf="!flippable">
-
-    <!-- Content -->
-    <ng-content></ng-content>
-
-    <!-- Expansion -->
-    <div
-        class="fuse-card-expansion"
-        *ngIf="expanded"
-        [@expandCollapse]>
-        <ng-content select="[fuseCardExpansion]"></ng-content>
-    </div>
-
-</ng-container>
--- a/src/@fuse/components/card/index.ts
+++ b/src/@fuse/components/card/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/card/public-api';
--- a/src/@fuse/components/card/public-api.ts
+++ b/src/@fuse/components/card/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/components/card/card.component';
-export * from '@fuse/components/card/card.module';
--- a/src/@fuse/components/date-range/date-range.component.html
+++ b/src/@fuse/components/date-range/date-range.component.html
@ -1,101 +0,0 @@
-<div
-    class="range"
-    (click)="openPickerPanel()"
-    #pickerPanelOrigin>
-
-    <div class="start">
-        <div class="date">{{range.startDate}}</div>
-        <div
-            class="time"
-            *ngIf="range.startTime">{{range.startTime}}</div>
-    </div>
-
-    <div class="separator">-</div>
-
-    <div class="end">
-        <div class="date">{{range.endDate}}</div>
-        <div
-            class="time"
-            *ngIf="range.endTime">{{range.endTime}}</div>
-    </div>
-
-</div>
-
-<ng-template #pickerPanel>
-
-    <!-- Start -->
-    <div class="start">
-
-        <div class="month">
-            <div class="month-header">
-                <button
-                    class="previous-button"
-                    mat-icon-button
-                    (click)="prev()"
-                    tabindex="1">
-                    <mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon>
-                </button>
-                <div class="month-label">{{getMonthLabel(1)}}</div>
-            </div>
-            <mat-month-view
-                [(activeDate)]="activeDates.month1"
-                [dateFilter]="dateFilter()"
-                [dateClass]="dateClass()"
-                (click)="$event.stopImmediatePropagation()"
-                (selectedChange)="onSelectedDateChange($event)"
-                #matMonthView1>
-            </mat-month-view>
-        </div>
-
-        <mat-form-field
-            class="fuse-mat-no-subscript time start-time"
-            *ngIf="timeRange">
-            <input
-                matInput
-                [autocomplete]="'off'"
-                [formControl]="startTimeFormControl"
-                (blur)="updateStartTime($event)"
-                tabindex="3">
-            <mat-label>Start time</mat-label>
-        </mat-form-field>
-
-    </div>
-
-    <!-- End -->
-    <div class="end">
-
-        <div class="month">
-            <div class="month-header">
-                <div class="month-label">{{getMonthLabel(2)}}</div>
-                <button
-                    class="next-button"
-                    mat-icon-button
-                    (click)="next()"
-                    tabindex="2">
-                    <mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon>
-                </button>
-            </div>
-            <mat-month-view
-                [(activeDate)]="activeDates.month2"
-                [dateFilter]="dateFilter()"
-                [dateClass]="dateClass()"
-                (click)="$event.stopImmediatePropagation()"
-                (selectedChange)="onSelectedDateChange($event)"
-                #matMonthView2>
-            </mat-month-view>
-        </div>
-
-        <mat-form-field
-            class="fuse-mat-no-subscript time end-time"
-            *ngIf="timeRange">
-            <input
-                matInput
-                [formControl]="endTimeFormControl"
-                (blur)="updateEndTime($event)"
-                tabindex="4">
-            <mat-label>End time</mat-label>
-        </mat-form-field>
-
-    </div>
-
-</ng-template>
--- a/src/@fuse/components/date-range/index.ts
+++ b/src/@fuse/components/date-range/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/date-range/public-api';
--- a/src/@fuse/components/date-range/public-api.ts
+++ b/src/@fuse/components/date-range/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/components/date-range/date-range.component';
-export * from '@fuse/components/date-range/date-range.module';
--- a/src/@fuse/components/drawer/drawer.component.html
+++ b/src/@fuse/components/drawer/drawer.component.html
@ -1,3 +0,0 @@
-<div class="fuse-drawer-content">
-    <ng-content></ng-content>
-</div>
--- a/src/@fuse/components/drawer/drawer.types.ts
+++ b/src/@fuse/components/drawer/drawer.types.ts
@ -1,7 +0,0 @@
-export type FuseDrawerMode =
-    | 'over'
-    | 'side';
-
-export type FuseDrawerPosition =
-    | 'left'
-    | 'right';
--- a/src/@fuse/components/drawer/index.ts
+++ b/src/@fuse/components/drawer/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/drawer/public-api';
--- a/src/@fuse/components/drawer/public-api.ts
+++ b/src/@fuse/components/drawer/public-api.ts
@ -1,4 +0,0 @@
-export * from '@fuse/components/drawer/drawer.component';
-export * from '@fuse/components/drawer/drawer.module';
-export * from '@fuse/components/drawer/drawer.service';
-export * from '@fuse/components/drawer/drawer.types';
--- a/src/@fuse/components/fullscreen/index.ts
+++ b/src/@fuse/components/fullscreen/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/fullscreen/public-api';
--- a/src/@fuse/components/fullscreen/public-api.ts
+++ b/src/@fuse/components/fullscreen/public-api.ts
@ -1,3 +0,0 @@
-export * from '@fuse/components/fullscreen/fullscreen.component';
-export * from '@fuse/components/fullscreen/fullscreen.module';
-export * from '@fuse/components/fullscreen/fullscreen.types';
--- a/src/@fuse/components/highlight/highlight.component.html
+++ b/src/@fuse/components/highlight/highlight.component.html
@ -1,9 +0,0 @@
-<ng-content></ng-content>
-
-<!-- @formatter:off -->
-<ng-template let-highlightedCode="highlightedCode" let-lang="lang">
-<div class="fuse-highlight fuse-highlight-code-container">
-<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
-</div>
-</ng-template>
-<!-- @formatter:on -->
--- a/src/@fuse/components/highlight/highlight.component.scss
+++ b/src/@fuse/components/highlight/highlight.component.scss
@ -1,3 +0,0 @@
-textarea[fuse-highlight] {
-    display: none;
-}
--- a/src/@fuse/components/highlight/index.ts
+++ b/src/@fuse/components/highlight/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/highlight/public-api';
--- a/src/@fuse/components/highlight/public-api.ts
+++ b/src/@fuse/components/highlight/public-api.ts
@ -1,3 +0,0 @@
-export * from '@fuse/components/highlight/highlight.component';
-export * from '@fuse/components/highlight/highlight.module';
-export * from '@fuse/components/highlight/highlight.service';
--- a/src/@fuse/components/masonry/index.ts
+++ b/src/@fuse/components/masonry/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/masonry/public-api';
--- a/src/@fuse/components/masonry/public-api.ts
+++ b/src/@fuse/components/masonry/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/components/masonry/masonry.component';
-export * from '@fuse/components/masonry/masonry.module';
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@ -1,126 +0,0 @@
-<!-- Item wrapper -->
-<div
-    class="fuse-horizontal-navigation-item-wrapper"
-    [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
-    <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-horizontal-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-horizontal-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)"
-            mat-menu-item>
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
-        <div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-</div>
-
-<!-- Item template -->
-<ng-template #itemTemplate>
-
-    <!-- Icon -->
-    <ng-container *ngIf="item.icon">
-        <mat-icon
-            class="fuse-horizontal-navigation-item-icon"
-            [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
-    </ng-container>
-
-    <!-- Title & Subtitle -->
-    <div class="fuse-horizontal-navigation-item-title-wrapper">
-        <div class="fuse-horizontal-navigation-item-title">
-            <span [ngClass]="item.classes?.title">
-                {{item.title}}
-            </span>
-        </div>
-        <ng-container *ngIf="item.subtitle">
-            <div class="fuse-horizontal-navigation-item-subtitle text-hint">
-                <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
-                </span>
-            </div>
-        </ng-container>
-    </div>
-
-    <!-- Badge -->
-    <ng-container *ngIf="item.badge">
-        <div class="fuse-horizontal-navigation-item-badge">
-            <div
-                class="fuse-horizontal-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
-            </div>
-        </div>
-    </ng-container>
-
-</ng-template>
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
@ -1,121 +0,0 @@
-<ng-container *ngIf="!child">
-    <div
-        [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
-                 'fuse-horizontal-navigation-menu-active-forced': item.active}"
-        [matMenuTriggerFor]="matMenu"
-        (onMenuOpen)="triggerChangeDetection()"
-        (onMenuClose)="triggerChangeDetection()"
-        #trigger="matMenuTrigger">
-        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
-    </div>
-</ng-container>
-
-<mat-menu
-    class="fuse-horizontal-navigation-menu-panel"
-    [overlapTrigger]="false"
-    #matMenu="matMenu">
-
-    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
-        <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-            <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    [disabled]="item.disabled"
-                    mat-menu-item>
-                    <fuse-horizontal-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-basic-item>
-                </div>
-            </ng-container>
-
-            <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    [disabled]="item.disabled"
-                    [matMenuTriggerFor]="branch.matMenu"
-                    mat-menu-item>
-                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
-                    <fuse-horizontal-navigation-branch-item
-                        [child]="true"
-                        [item]="item"
-                        [name]="name"
-                        #branch></fuse-horizontal-navigation-branch-item>
-                </div>
-            </ng-container>
-
-            <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    mat-menu-item>
-                    <fuse-horizontal-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-divider-item>
-                </div>
-            </ng-container>
-
-        </ng-container>
-
-    </ng-container>
-
-</mat-menu>
-
-<!-- Item template -->
-<ng-template
-    let-item
-    #itemTemplate>
-
-    <div
-        class="fuse-horizontal-navigation-item-wrapper"
-        [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
-        [ngClass]="item.classes?.wrapper">
-
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
-                         'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-
-            <!-- Icon -->
-            <ng-container *ngIf="item.icon">
-                <mat-icon
-                    class="fuse-horizontal-navigation-item-icon"
-                    [ngClass]="item.classes?.icon"
-                    [svgIcon]="item.icon"></mat-icon>
-            </ng-container>
-
-            <!-- Title & Subtitle -->
-            <div class="fuse-horizontal-navigation-item-title-wrapper">
-                <div class="fuse-horizontal-navigation-item-title">
-                    <span [ngClass]="item.classes?.title">
-                        {{item.title}}
-                    </span>
-                </div>
-                <ng-container *ngIf="item.subtitle">
-                    <div class="fuse-horizontal-navigation-item-subtitle text-hint">
-                        <span [ngClass]="item.classes?.subtitle">
-                            {{item.subtitle}}
-                        </span>
-                    </div>
-                </ng-container>
-            </div>
-
-            <!-- Badge -->
-            <ng-container *ngIf="item.badge">
-                <div class="fuse-horizontal-navigation-item-badge">
-                    <div
-                        class="fuse-horizontal-navigation-item-badge-content"
-                        [ngClass]="item.badge.classes">
-                        {{item.badge.title}}
-                    </div>
-                </div>
-            </ng-container>
-        </div>
-    </div>
-
-</ng-template>
--- a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
@ -1,4 +0,0 @@
-<!-- Divider -->
-<div
-    class="fuse-horizontal-navigation-item-wrapper divider"
-    [ngClass]="item.classes?.wrapper"></div>
--- a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
@ -1,4 +0,0 @@
-<!-- Spacer -->
-<div
-    class="fuse-horizontal-navigation-item-wrapper"
-    [ngClass]="item.classes?.wrapper"></div>
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.html
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.html
@ -1,36 +0,0 @@
-<div class="fuse-horizontal-navigation-wrapper">
-
-    <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
-        <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-            <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <fuse-horizontal-navigation-basic-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-basic-item>
-            </ng-container>
-
-            <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
-                <fuse-horizontal-navigation-branch-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-branch-item>
-            </ng-container>
-
-            <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
-                <fuse-horizontal-navigation-spacer-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-spacer-item>
-            </ng-container>
-
-        </ng-container>
-
-    </ng-container>
-
-</div>
--- a/src/@fuse/components/navigation/index.ts
+++ b/src/@fuse/components/navigation/index.ts
@ -1 +0,0 @@
-export * from '@fuse/components/navigation/public-api';
--- a/src/@fuse/components/navigation/navigation.module.ts
+++ b/src/@fuse/components/navigation/navigation.module.ts
@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
-import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
-import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
-import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
-import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
-import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
-import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
-import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
-import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
-import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
-import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
-import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
-
-@NgModule({
-    declarations: [
-        FuseHorizontalNavigationBasicItemComponent,
-        FuseHorizontalNavigationBranchItemComponent,
-        FuseHorizontalNavigationDividerItemComponent,
-        FuseHorizontalNavigationSpacerItemComponent,
-        FuseHorizontalNavigationComponent,
-        FuseVerticalNavigationAsideItemComponent,
-        FuseVerticalNavigationBasicItemComponent,
-        FuseVerticalNavigationCollapsableItemComponent,
-        FuseVerticalNavigationDividerItemComponent,
-        FuseVerticalNavigationGroupItemComponent,
-        FuseVerticalNavigationSpacerItemComponent,
-        FuseVerticalNavigationComponent
-    ],
-    imports     : [
-        CommonModule,
-        RouterModule,
-        MatButtonModule,
-        MatDividerModule,
-        MatIconModule,
-        MatMenuModule,
-        MatTooltipModule,
-        FuseScrollbarModule
-    ],
-    exports     : [
-        FuseHorizontalNavigationComponent,
-        FuseVerticalNavigationComponent
-    ]
-})
-export class FuseNavigationModule
-{
-}
--- a/src/@fuse/components/navigation/public-api.ts
+++ b/src/@fuse/components/navigation/public-api.ts
@ -1,5 +0,0 @@
-export * from '@fuse/components/navigation/horizontal/horizontal.component';
-export * from '@fuse/components/navigation/vertical/vertical.component';
-export * from '@fuse/components/navigation/navigation.module';
-export * from '@fuse/components/navigation/navigation.service';
-export * from '@fuse/components/navigation/navigation.types';
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
@ -1,103 +0,0 @@
-<div
-    class="fuse-vertical-navigation-item-wrapper"
-    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
-    <div
-        class="fuse-vertical-navigation-item"
-        [ngClass]="{'fuse-vertical-navigation-item-active': active,
-                    'fuse-vertical-navigation-item-disabled': item.disabled,
-                    'fuse-vertical-navigation-item-active-forced': item.active}"
-        [matTooltip]="item.tooltip || ''">
-
-        <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
-
-        <!-- Title & Subtitle -->
-        <div class="fuse-vertical-navigation-item-title-wrapper">
-            <div class="fuse-vertical-navigation-item-title">
-                <span [ngClass]="item.classes?.title">
-                    {{item.title}}
-                </span>
-            </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
-        </div>
-
-        <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
-            </div>
-        </ng-container>
-
-    </div>
-
-</div>
-
-<ng-container *ngIf="!skipChildren">
-
-    <div class="fuse-vertical-navigation-item-children">
-
-        <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
-            <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-                <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
-                    <fuse-vertical-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
-                </ng-container>
-
-                <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
-                    <fuse-vertical-navigation-collapsable-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
-
-                <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
-                    <fuse-vertical-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
-                </ng-container>
-
-                <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
-                    <fuse-vertical-navigation-group-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-group-item>
-                </ng-container>
-
-                <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
-                    <fuse-vertical-navigation-spacer-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
-                </ng-container>
-
-            </ng-container>
-
-        </ng-container>
-
-    </div>
-
-</ng-container>
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@ -1,127 +0,0 @@
-<!-- Item wrapper -->
-<div
-    class="fuse-vertical-navigation-item-wrapper"
-    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
-    <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
-        <div
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
-
-    <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
-        <div
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-    <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
-        <div
-            class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
-
-</div>
-
-<!-- Item template -->
-<ng-template #itemTemplate>
-
-    <!-- Icon -->
-    <ng-container *ngIf="item.icon">
-        <mat-icon
-            class="fuse-vertical-navigation-item-icon"
-            [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
-    </ng-container>
-
-    <!-- Title & Subtitle -->
-    <div class="fuse-vertical-navigation-item-title-wrapper">
-        <div class="fuse-vertical-navigation-item-title">
-            <span [ngClass]="item.classes?.title">
-                {{item.title}}
-            </span>
-        </div>
-        <ng-container *ngIf="item.subtitle">
-            <div class="fuse-vertical-navigation-item-subtitle">
-                <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
-                </span>
-            </div>
-        </ng-container>
-    </div>
-
-    <!-- Badge -->
-    <ng-container *ngIf="item.badge">
-        <div class="fuse-vertical-navigation-item-badge">
-            <div
-                class="fuse-vertical-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
-            </div>
-        </div>
-    </ng-container>
-
-</ng-template>
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
@ -1,106 +0,0 @@
-<div
-    class="fuse-vertical-navigation-item-wrapper"
-    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
-    <div
-        class="fuse-vertical-navigation-item"
-        [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
-        [matTooltip]="item.tooltip || ''"
-        (click)="toggleCollapsable()">
-
-        <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
-
-        <!-- Title & Subtitle -->
-        <div class="fuse-vertical-navigation-item-title-wrapper">
-            <div class="fuse-vertical-navigation-item-title">
-                <span [ngClass]="item.classes?.title">
-                    {{item.title}}
-                </span>
-            </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
-        </div>
-
-        <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
-            </div>
-        </ng-container>
-
-        <!-- Arrow -->
-        <mat-icon
-            class="fuse-vertical-navigation-item-arrow icon-size-4"
-            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-
-    </div>
-
-</div>
-
-<div
-    class="fuse-vertical-navigation-item-children"
-    *ngIf="!isCollapsed"
-    @expandCollapse>
-
-    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
-        <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-            <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <fuse-vertical-navigation-basic-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-basic-item>
-            </ng-container>
-
-            <!-- Collapsable -->
-            <ng-container *ngIf="item.type === 'collapsable'">
-                <fuse-vertical-navigation-collapsable-item
-                    [item]="item"
-                    [name]="name"
-                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-            </ng-container>
-
-            <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
-                <fuse-vertical-navigation-divider-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-divider-item>
-            </ng-container>
-
-            <!-- Group -->
-            <ng-container *ngIf="item.type === 'group'">
-                <fuse-vertical-navigation-group-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-group-item>
-            </ng-container>
-
-            <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
-                <fuse-vertical-navigation-spacer-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-spacer-item>
-            </ng-container>
-
-        </ng-container>
-
-    </ng-container>
-
-</div>
--- a/src/@fuse/components/navigation/vertical/components/divider/divider.component.html
+++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.html
@ -1,4 +0,0 @@
-<!-- Divider -->
-<div
-    class="fuse-vertical-navigation-item-wrapper divider"
-    [ngClass]="item.classes?.wrapper"></div>
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.html
@ -1,91 +0,0 @@
-<!-- Item wrapper -->
-<div
-    class="fuse-vertical-navigation-item-wrapper"
-    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
-    <div class="fuse-vertical-navigation-item">
-
-        <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
-
-        <!-- Title & Subtitle -->
-        <div class="fuse-vertical-navigation-item-title-wrapper">
-            <div class="fuse-vertical-navigation-item-title">
-                <span [ngClass]="item.classes?.title">
-                    {{item.title}}
-                </span>
-            </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
-        </div>
-
-        <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
-            </div>
-        </ng-container>
-
-    </div>
-
-</div>
-
-<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
-    <!-- Skip the hidden items -->
-    <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-        <!-- Basic -->
-        <ng-container *ngIf="item.type === 'basic'">
-            <fuse-vertical-navigation-basic-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-basic-item>
-        </ng-container>
-
-        <!-- Collapsable -->
-        <ng-container *ngIf="item.type === 'collapsable'">
-            <fuse-vertical-navigation-collapsable-item
-                [item]="item"
-                [name]="name"
-                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-        </ng-container>
-
-        <!-- Divider -->
-        <ng-container *ngIf="item.type === 'divider'">
-            <fuse-vertical-navigation-divider-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-divider-item>
-        </ng-container>
-
-        <!-- Group -->
-        <ng-container *ngIf="item.type === 'group'">
-            <fuse-vertical-navigation-group-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-group-item>
-        </ng-container>
-
-        <!-- Spacer -->
-        <ng-container *ngIf="item.type === 'spacer'">
-            <fuse-vertical-navigation-spacer-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-spacer-item>
-        </ng-container>
-
-    </ng-container>
-
-</ng-container>
--- a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
+++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
@ -1,4 +0,0 @@
-<!-- Spacer -->
-<div
-    class="fuse-vertical-navigation-item-wrapper"
-    [ngClass]="item.classes?.wrapper"></div>
--- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
@ -1,110 +0,0 @@
-/* Variables */
-$fuse-vertical-navigation-compact-width: 112;
-
-fuse-vertical-navigation {
-
-    /* Compact appearance overrides */
-    &.fuse-vertical-navigation-appearance-compact {
-        width: #{$fuse-vertical-navigation-compact-width}px;
-        min-width: #{$fuse-vertical-navigation-compact-width}px;
-        max-width: #{$fuse-vertical-navigation-compact-width}px;
-
-        /* Left positioned */
-        &.fuse-vertical-navigation-position-left {
-
-            /* Side mode */
-            &.fuse-vertical-navigation-mode-side {
-                margin-left: -#{$fuse-vertical-navigation-compact-width}px;
-            }
-
-            /* Opened */
-            &.fuse-vertical-navigation-opened {
-                margin-left: 0;
-            }
-        }
-
-        /* Right positioned */
-        &.fuse-vertical-navigation-position-right {
-
-            /* Side mode */
-            &.fuse-vertical-navigation-mode-side {
-                margin-right: -#{$fuse-vertical-navigation-compact-width}px;
-            }
-
-            /* Opened */
-            &.fuse-vertical-navigation-opened {
-                margin-right: 0;
-            }
-
-            /* Aside wrapper */
-            .fuse-vertical-navigation-aside-wrapper {
-                left: auto;
-                right: #{$fuse-vertical-navigation-compact-width}px;
-            }
-        }
-
-        /* Wrapper */
-        .fuse-vertical-navigation-wrapper {
-
-            /* Content */
-            .fuse-vertical-navigation-content {
-
-                > fuse-vertical-navigation-aside-item,
-                > fuse-vertical-navigation-basic-item {
-
-                    .fuse-vertical-navigation-item-wrapper {
-                        margin: 4px 8px 0 8px;
-
-                        .fuse-vertical-navigation-item {
-                            flex-direction: column;
-                            justify-content: center;
-                            padding: 12px;
-                            border-radius: 6px;
-
-                            .fuse-vertical-navigation-item-icon {
-                                margin-right: 0;
-                            }
-
-                            .fuse-vertical-navigation-item-title-wrapper {
-                                margin-top: 8px;
-
-                                .fuse-vertical-navigation-item-title {
-                                    font-size: 12px;
-                                    font-weight: 500;
-                                    text-align: center;
-                                    line-height: 16px;
-                                }
-
-                                .fuse-vertical-navigation-item-subtitle {
-                                    display: none !important;
-                                }
-                            }
-
-                            .fuse-vertical-navigation-item-badge {
-                                position: absolute;
-                                top: 12px;
-                                left: 64px;
-                            }
-                        }
-                    }
-
-                    > fuse-vertical-navigation-collapsable-item {
-                        display: none
-                    }
-
-                    > fuse-vertical-navigation-group-item {
-
-                        > .fuse-vertical-navigation-item-wrapper {
-                            display: none
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Aside wrapper */
-        .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-compact-width}px;
-        }
-    }
-}
--- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
@ -1,189 +0,0 @@
-/* Variables */
-$fuse-vertical-navigation-width: 280;
-$fuse-vertical-navigation-dense-width: 80;
-
-fuse-vertical-navigation {
-
-    /* Dense appearance overrides */
-    &.fuse-vertical-navigation-appearance-dense {
-
-        &:not(.fuse-vertical-navigation-mode-over) {
-            width: #{$fuse-vertical-navigation-dense-width}px;
-            min-width: #{$fuse-vertical-navigation-dense-width}px;
-            max-width: #{$fuse-vertical-navigation-dense-width}px;
-
-            /* Left positioned */
-            &.fuse-vertical-navigation-position-left {
-
-                /* Side mode */
-                &.fuse-vertical-navigation-mode-side {
-                    margin-left: -#{$fuse-vertical-navigation-dense-width}px;
-                }
-
-                /* Opened */
-                &.fuse-vertical-navigation-opened {
-                    margin-left: 0;
-                }
-            }
-
-            /* Right positioned */
-            &.fuse-vertical-navigation-position-right {
-
-                /* Side mode */
-                &.fuse-vertical-navigation-mode-side {
-                    margin-right: -#{$fuse-vertical-navigation-dense-width}px;
-                }
-
-                /* Opened */
-                &.fuse-vertical-navigation-opened {
-                    margin-right: 0;
-                }
-
-                /* Aside wrapper */
-                .fuse-vertical-navigation-aside-wrapper {
-                    left: auto;
-                    right: #{$fuse-vertical-navigation-dense-width}px;
-                }
-
-                &.fuse-vertical-navigation-hover {
-
-                    .fuse-vertical-navigation-aside-wrapper {
-                        left: auto;
-                        right: #{$fuse-vertical-navigation-width}px;
-                    }
-                }
-            }
-        }
-
-        /* Wrapper */
-        .fuse-vertical-navigation-wrapper {
-
-            /* Content */
-            .fuse-vertical-navigation-content {
-
-                fuse-vertical-navigation-aside-item,
-                fuse-vertical-navigation-basic-item,
-                fuse-vertical-navigation-collapsable-item,
-                fuse-vertical-navigation-group-item {
-
-                    .fuse-vertical-navigation-item-wrapper {
-
-                        .fuse-vertical-navigation-item {
-                            width: #{$fuse-vertical-navigation-width}px - 24px;
-                            min-width: #{$fuse-vertical-navigation-width}px - 24px;
-                            max-width: #{$fuse-vertical-navigation-width}px - 24px;
-
-                            .fuse-vertical-navigation-item-arrow,
-                            .fuse-vertical-navigation-item-badge,
-                            .fuse-vertical-navigation-item-title-wrapper {
-                                transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-                            }
-                        }
-                    }
-                }
-
-                fuse-vertical-navigation-group-item {
-
-                    &:first-of-type {
-                        margin-top: 0;
-                    }
-                }
-            }
-        }
-
-        &:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) {
-
-            /* Wrapper */
-            .fuse-vertical-navigation-wrapper {
-
-                /* Content */
-                .fuse-vertical-navigation-content {
-
-                    .fuse-vertical-navigation-item-wrapper {
-
-                        .fuse-vertical-navigation-item {
-                            padding: 10px 16px;
-
-                            .fuse-vertical-navigation-item-arrow,
-                            .fuse-vertical-navigation-item-badge,
-                            .fuse-vertical-navigation-item-title-wrapper {
-                                white-space: nowrap;
-                                opacity: 0;
-                            }
-                        }
-                    }
-
-                    fuse-vertical-navigation-collapsable-item {
-
-                        .fuse-vertical-navigation-item-children {
-                            display: none;
-                        }
-                    }
-
-                    fuse-vertical-navigation-group-item {
-
-                        > .fuse-vertical-navigation-item-wrapper {
-
-                            .fuse-vertical-navigation-item {
-
-                                &:before {
-                                    content: '';
-                                    position: absolute;
-                                    top: 20px;
-                                    width: 23px;
-                                    border-top-width: 2px;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Aside wrapper */
-        .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-dense-width}px;
-        }
-
-        /* Hover */
-        &.fuse-vertical-navigation-hover {
-
-            .fuse-vertical-navigation-wrapper {
-                width: #{$fuse-vertical-navigation-width}px;
-
-                .fuse-vertical-navigation-content {
-
-                    .fuse-vertical-navigation-item-wrapper {
-
-                        .fuse-vertical-navigation-item {
-
-                            .fuse-vertical-navigation-item-arrow,
-                            .fuse-vertical-navigation-item-badge,
-                            .fuse-vertical-navigation-item-title-wrapper {
-                                white-space: nowrap;
-                                animation: removeWhiteSpaceNoWrap 1ms linear 350ms;
-                                animation-fill-mode: forwards;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .fuse-vertical-navigation-aside-wrapper {
-                left: #{$fuse-vertical-navigation-width}px;
-            }
-        }
-    }
-}
-
-@keyframes removeWhiteSpaceNoWrap {
-    0% {
-        white-space: nowrap
-    }
-    99% {
-        white-space: nowrap
-    }
-    100% {
-        white-space: normal;
-    }
-}
--- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
@ -1,97 +0,0 @@
-/* Variables */
-$fuse-vertical-navigation-thin-width: 80;
-
-fuse-vertical-navigation {
-
-    /* Thin appearance overrides */
-    &.fuse-vertical-navigation-appearance-thin {
-        width: #{$fuse-vertical-navigation-thin-width}px;
-        min-width: #{$fuse-vertical-navigation-thin-width}px;
-        max-width: #{$fuse-vertical-navigation-thin-width}px;
-
-        /* Left positioned */
-        &.fuse-vertical-navigation-position-left {
-
-            &.fuse-vertical-navigation-mode-side {
-                margin-left: -#{$fuse-vertical-navigation-thin-width}px;
-            }
-
-            &.fuse-vertical-navigation-opened {
-                margin-left: 0;
-            }
-        }
-
-        /* Right positioned */
-        &.fuse-vertical-navigation-position-right {
-
-            &.fuse-vertical-navigation-mode-side {
-                margin-right: -#{$fuse-vertical-navigation-thin-width}px;
-            }
-
-            &.fuse-vertical-navigation-opened {
-                margin-right: 0;
-            }
-
-            .fuse-vertical-navigation-aside-wrapper {
-                left: auto;
-                right: #{$fuse-vertical-navigation-thin-width}px;
-            }
-        }
-
-        /* Wrapper */
-        .fuse-vertical-navigation-wrapper {
-
-            /* Content */
-            .fuse-vertical-navigation-content {
-
-                > fuse-vertical-navigation-aside-item,
-                > fuse-vertical-navigation-basic-item {
-                    flex-direction: column;
-                    justify-content: center;
-                    height: 64px;
-                    min-height: 64px;
-                    max-height: 64px;
-                    padding: 0 16px;
-
-                    .fuse-vertical-navigation-item-wrapper {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        .fuse-vertical-navigation-item {
-                            justify-content: center;
-                            padding: 12px;
-                            border-radius: 4px;
-
-                            .fuse-vertical-navigation-item-icon {
-                                margin: 0;
-                            }
-
-                            .fuse-vertical-navigation-item-arrow,
-                            .fuse-vertical-navigation-item-badge-content,
-                            .fuse-vertical-navigation-item-title-wrapper {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-
-                > fuse-vertical-navigation-collapsable-item {
-                    display: none
-                }
-
-                > fuse-vertical-navigation-group-item {
-
-                    > .fuse-vertical-navigation-item-wrapper {
-                        display: none
-                    }
-                }
-            }
-        }
-
-        /* Aside wrapper */
-        .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-thin-width}px;
-        }
-    }
-}
--- a/src/@fuse/components/navigation/vertical/vertical.component.html
+++ b/src/@fuse/components/navigation/vertical/vertical.component.html
@ -1,122 +0,0 @@
-<div class="fuse-vertical-navigation-wrapper">
-
-    <!-- Header -->
-    <div class="fuse-vertical-navigation-header">
-        <ng-content select="[fuseVerticalNavigationHeader]"></ng-content>
-    </div>
-
-    <!-- Content -->
-    <div
-        class="fuse-vertical-navigation-content"
-        fuseScrollbar
-        [fuseScrollbarOptions]="{wheelPropagation: inner, suppressScrollX: true}"
-        #navigationContent>
-
-        <!-- Content header -->
-        <div class="fuse-vertical-navigation-content-header">
-            <ng-content select="[fuseVerticalNavigationContentHeader]"></ng-content>
-        </div>
-
-        <!-- Items -->
-        <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
-            <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-                <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside'">
-                    <fuse-vertical-navigation-aside-item
-                        [item]="item"
-                        [name]="name"
-                        [activeItemId]="activeAsideItemId"
-                        [autoCollapse]="autoCollapse"
-                        [skipChildren]="true"
-                        (click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
-                </ng-container>
-
-                <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
-                    <fuse-vertical-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
-                </ng-container>
-
-                <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
-                    <fuse-vertical-navigation-collapsable-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
-
-                <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
-                    <fuse-vertical-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
-                </ng-container>
-
-                <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
-                    <fuse-vertical-navigation-group-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
-                </ng-container>
-
-                <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
-                    <fuse-vertical-navigation-spacer-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
-                </ng-container>
-
-            </ng-container>
-
-        </ng-container>
-
-        <!-- Content footer -->
-        <div class="fuse-vertical-navigation-content-footer">
-            <ng-content select="[fuseVerticalNavigationContentFooter]"></ng-content>
-        </div>
-
-    </div>
-
-    <!-- Footer -->
-    <div class="fuse-vertical-navigation-footer">
-        <ng-content select="[fuseVerticalNavigationFooter]"></ng-content>
-    </div>
-
-</div>
-
-<!-- Aside -->
-<ng-container *ngIf="activeAsideItemId">
-    <div
-        class="fuse-vertical-navigation-aside-wrapper"
-        fuseScrollbar
-        [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
-        [@fadeInLeft]="position === 'left'"
-        [@fadeInRight]="position === 'right'"
-        [@fadeOutLeft]="position === 'left'"
-        [@fadeOutRight]="position === 'right'">
-
-        <!-- Items -->
-        <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
-            <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
-                <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
-                    <fuse-vertical-navigation-aside-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
-                </ng-container>
-
-            </ng-container>
-
-        </ng-container>
-
-    </div>
-</ng-container>
--- a/src/@fuse/directives/scroll-reset/index.ts
+++ b/src/@fuse/directives/scroll-reset/index.ts
@ -1 +0,0 @@
-export * from '@fuse/directives/scroll-reset/public-api';
--- a/src/@fuse/directives/scroll-reset/public-api.ts
+++ b/src/@fuse/directives/scroll-reset/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
-export * from '@fuse/directives/scroll-reset/scroll-reset.module';
--- a/src/@fuse/directives/scroll-reset/scroll-reset.module.ts
+++ b/src/@fuse/directives/scroll-reset/scroll-reset.module.ts
@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive';
-
-@NgModule({
-    declarations: [
-        FuseScrollResetDirective
-    ],
-    exports     : [
-        FuseScrollResetDirective
-    ]
-})
-export class FuseScrollResetModule
-{
-}
--- a/src/@fuse/directives/scrollbar/index.ts
+++ b/src/@fuse/directives/scrollbar/index.ts
@ -1 +0,0 @@
-export * from '@fuse/directives/scrollbar/public-api';
--- a/src/@fuse/directives/scrollbar/public-api.ts
+++ b/src/@fuse/directives/scrollbar/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/directives/scrollbar/scrollbar.directive';
-export * from '@fuse/directives/scrollbar/scrollbar.module';
--- a/src/@fuse/directives/scrollbar/scrollbar.module.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.module.ts
@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
-
-@NgModule({
-    declarations: [
-        FuseScrollbarDirective
-    ],
-    exports     : [
-        FuseScrollbarDirective
-    ]
-})
-export class FuseScrollbarModule
-{
-}
--- a/src/@fuse/index.ts
+++ b/src/@fuse/index.ts
@ -1 +0,0 @@
-export * from './fuse.module';
--- a/src/@fuse/lib/mock-api/index.ts
+++ b/src/@fuse/lib/mock-api/index.ts
@ -1 +0,0 @@
-export * from '@fuse/lib/mock-api/public-api';
--- a/src/@fuse/lib/mock-api/mock-api.constants.ts
+++ b/src/@fuse/lib/mock-api/mock-api.constants.ts
@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>('FUSE_MOCK_API_DEFAULT_DELAY');
--- a/src/@fuse/lib/mock-api/public-api.ts
+++ b/src/@fuse/lib/mock-api/public-api.ts
@ -1,5 +0,0 @@
-export * from '@fuse/lib/mock-api/mock-api.constants';
-export * from '@fuse/lib/mock-api/mock-api.module';
-export * from '@fuse/lib/mock-api/mock-api.service';
-export * from '@fuse/lib/mock-api/mock-api.types';
-export * from '@fuse/lib/mock-api/mock-api.utils';
--- a/src/@fuse/pipes/find-by-key/find-by-key.module.ts
+++ b/src/@fuse/pipes/find-by-key/find-by-key.module.ts
@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
-
-@NgModule({
-    declarations: [
-        FuseFindByKeyPipe
-    ],
-    exports     : [
-        FuseFindByKeyPipe
-    ]
-})
-export class FuseFindByKeyPipeModule
-{
-}
--- a/src/@fuse/pipes/find-by-key/index.ts
+++ b/src/@fuse/pipes/find-by-key/index.ts
@ -1 +0,0 @@
-export * from '@fuse/pipes/find-by-key/public-api';
--- a/src/@fuse/pipes/find-by-key/public-api.ts
+++ b/src/@fuse/pipes/find-by-key/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/pipes/find-by-key/find-by-key.pipe';
-export * from '@fuse/pipes/find-by-key/find-by-key.module';
--- a/src/@fuse/services/config/config.constants.ts
+++ b/src/@fuse/services/config/config.constants.ts
@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
--- a/src/@fuse/services/config/index.ts
+++ b/src/@fuse/services/config/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/config/public-api';
--- a/src/@fuse/services/config/public-api.ts
+++ b/src/@fuse/services/config/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/services/config/config.module';
-export * from '@fuse/services/config/config.service';
--- a/src/@fuse/services/confirmation/index.ts
+++ b/src/@fuse/services/confirmation/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/confirmation/public-api';
--- a/src/@fuse/services/confirmation/public-api.ts
+++ b/src/@fuse/services/confirmation/public-api.ts
@ -1,3 +0,0 @@
-export * from '@fuse/services/confirmation/confirmation.module';
-export * from '@fuse/services/confirmation/confirmation.service';
-export * from '@fuse/services/confirmation/confirmation.types';
--- a/src/@fuse/services/media-watcher/index.ts
+++ b/src/@fuse/services/media-watcher/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/media-watcher/public-api';
--- a/src/@fuse/services/media-watcher/media-watcher.module.ts
+++ b/src/@fuse/services/media-watcher/media-watcher.module.ts
@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service';
-
-@NgModule({
-    providers: [
-        FuseMediaWatcherService
-    ]
-})
-export class FuseMediaWatcherModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
-    {
-    }
-}
--- a/src/@fuse/services/media-watcher/public-api.ts
+++ b/src/@fuse/services/media-watcher/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/services/media-watcher/media-watcher.module';
-export * from '@fuse/services/media-watcher/media-watcher.service';
--- a/src/@fuse/services/splash-screen/index.ts
+++ b/src/@fuse/services/splash-screen/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/splash-screen/public-api';
--- a/src/@fuse/services/splash-screen/public-api.ts
+++ b/src/@fuse/services/splash-screen/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/services/splash-screen/splash-screen.module';
-export * from '@fuse/services/splash-screen/splash-screen.service';
--- a/src/@fuse/services/splash-screen/splash-screen.module.ts
+++ b/src/@fuse/services/splash-screen/splash-screen.module.ts
@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service';
-
-@NgModule({
-    providers: [
-        FuseSplashScreenService
-    ]
-})
-export class FuseSplashScreenModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseSplashScreenService: FuseSplashScreenService)
-    {
-    }
-}
--- a/src/@fuse/services/tailwind/index.ts
+++ b/src/@fuse/services/tailwind/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/tailwind/public-api';
--- a/src/@fuse/services/tailwind/public-api.ts
+++ b/src/@fuse/services/tailwind/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/services/tailwind/tailwind.module';
-export * from '@fuse/services/tailwind/tailwind.service';
--- a/src/@fuse/services/tailwind/tailwind.module.ts
+++ b/src/@fuse/services/tailwind/tailwind.module.ts
@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
-
-@NgModule({
-    providers: [
-        FuseTailwindService
-    ]
-})
-export class FuseTailwindConfigModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseTailwindConfigService: FuseTailwindService)
-    {
-    }
-}
--- a/src/@fuse/services/utils/index.ts
+++ b/src/@fuse/services/utils/index.ts
@ -1 +0,0 @@
-export * from '@fuse/services/utils/public-api';
--- a/src/@fuse/services/utils/public-api.ts
+++ b/src/@fuse/services/utils/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/services/utils/utils.module';
-export * from '@fuse/services/utils/utils.service';
--- a/src/@fuse/services/utils/utils.module.ts
+++ b/src/@fuse/services/utils/utils.module.ts
@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-
-@NgModule({
-    providers: [
-        FuseUtilsService
-    ]
-})
-export class FuseUtilsModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseUtilsService: FuseUtilsService)
-    {
-    }
-}
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@ -1,167 +0,0 @@
-@use '@angular/material' as mat;
-@use "sass:map";
-
-/* Include the core Angular Material styles */
-@include mat.core();
-
-/* Create a base theme without color.
-    This will globally set the density and typography for all future color themes. */
-@include mat.all-component-themes((
-    color: null,
-    density: -2,
-    typography: mat.define-typography-config(
-        $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
-        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-        $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
-    )
-));
-
-/* Generate Primary, Accent and Warn palettes */
-$palettes: ();
-@each $name in (primary, accent, warn) {
-    $palettes: map.merge($palettes, (#{$name}: (
-        50: var(--fuse-#{$name}-50),
-        100: var(--fuse-#{$name}-100),
-        200: var(--fuse-#{$name}-200),
-        300: var(--fuse-#{$name}-300),
-        400: var(--fuse-#{$name}-400),
-        500: var(--fuse-#{$name}-500),
-        600: var(--fuse-#{$name}-600),
-        700: var(--fuse-#{$name}-700),
-        800: var(--fuse-#{$name}-800),
-        900: var(--fuse-#{$name}-900),
-        contrast: (
-            50: var(--fuse-on-#{$name}-50),
-            100: var(--fuse-on-#{$name}-100),
-            200: var(--fuse-on-#{$name}-200),
-            300: var(--fuse-on-#{$name}-300),
-            400: var(--fuse-on-#{$name}-400),
-            500: var(--fuse-on-#{$name}-500),
-            600: var(--fuse-on-#{$name}-600),
-            700: var(--fuse-on-#{$name}-700),
-            800: var(--fuse-on-#{$name}-800),
-            900: var(--fuse-on-#{$name}-900)
-        ),
-        default: var(--fuse-#{$name}),
-        lighter: var(--fuse-#{$name}-100),
-        darker: var(--fuse-#{$name}-700),
-        text: var(--fuse-#{$name}),
-        default-contrast: var(--fuse-on-#{$name}),
-        lighter-contrast: var(--fuse-on-#{$name}-100),
-        darker-contrast: var(--fuse-on-#{$name}-700)
-    )));
-}
-
-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
-    we don't have to generate a separate Angular Material theme for each color
-    set. We can just create one light and one dark theme and then switch the
-    CSS Custom Properties to dynamically switch the colors. */
-body.light,
-body .light {
-    $base-light-theme: mat.define-light-theme((
-        color: ($palettes)
-    ));
-
-    $light-theme: (
-        color: (
-            primary: map.get(map.get($base-light-theme, color), primary),
-            accent: map.get(map.get($base-light-theme, color), accent),
-            warn: map.get(map.get($base-light-theme, color), warn),
-            is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: (
-                base: #000000,
-                divider: #E2E8F0, /* blueGray.200 */
-                dividers: #E2E8F0, /* blueGray.200 */
-                disabled: #94A3B8, /* blueGray.400 */
-                disabled-button: #94A3B8, /* blueGray.400 */
-                disabled-text: #94A3B8, /* blueGray.400 */
-                elevation: #000000,
-                hint-text: #94A3B8, /* blueGray.400 */
-                secondary-text: #64748B, /* blueGray.500 */
-                icon: #64748B, /* blueGray.500 */
-                icons: #64748B, /* blueGray.500 */
-                mat-icon: #64748B, /* blueGray.500 */
-                text: #1E293B, /* blueGray.800 */
-                slider-min: #1E293B, /* blueGray.800 */
-                slider-off: #CBD5E1, /* blueGray.300 */
-                slider-off-active: #94A3B8 /* blueGray.400 */
-            ),
-            background: (
-                status-bar: #CBD5E1, /* blueGray.300 */
-                app-bar: #FFFFFF,
-                background: #F1F5F9, /* blueGray.100 */
-                hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
-                card: #FFFFFF,
-                dialog: #FFFFFF,
-                disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
-                raised-button: #FFFFFF,
-                focused-button: #64748B, /* blueGray.500 */
-                selected-button: #E2E8F0, /* blueGray.200 */
-                selected-disabled-button: #E2E8F0, /* blueGray.200 */
-                disabled-button-toggle: #CBD5E1, /* blueGray.300 */
-                unselected-chip: #E2E8F0, /* blueGray.200 */
-                disabled-list-option: #CBD5E1, /* blueGray.300 */
-                tooltip: #1E293B /* blueGray.800 */
-            )
-        )
-    );
-
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
-}
-
-body.dark,
-body .dark {
-    $base-dark-theme: mat.define-dark-theme((
-        color: ($palettes)
-    ));
-
-    $dark-theme: (
-        color: (
-            primary: map.get(map.get($base-dark-theme, color), primary),
-            accent: map.get(map.get($base-dark-theme, color), accent),
-            warn: map.get(map.get($base-dark-theme, color), warn),
-            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: (
-                base: #FFFFFF,
-                divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-                dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-                disabled: #475569, /* blueGray.600 */
-                disabled-button: #1E293B, /* blueGray.800 */
-                disabled-text: #475569, /* blueGray.600 */
-                elevation: #000000,
-                hint-text: #64748B, /* blueGray.500 */
-                secondary-text: #94A3B8, /* blueGray.400 */
-                icon: #F1F5F9, /* blueGray.100 */
-                icons: #F1F5F9, /* blueGray.100 */
-                mat-icon: #94A3B8, /* blueGray.400 */
-                text: #FFFFFF,
-                slider-min: #FFFFFF,
-                slider-off: #64748B, /* blueGray.500 */
-                slider-off-active: #94A3B8 /* blueGray.400 */
-            ),
-            background: (
-                status-bar: #0F172A, /* blueGray.900 */
-                app-bar: #0F172A, /* blueGray.900 */
-                background: #0F172A, /* blueGray.900 */
-                hover: rgba(255, 255, 255, 0.05),
-                card: #1E293B, /* blueGray.800 */
-                dialog: #1E293B, /* blueGray.800 */
-                disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
-                raised-button: #0F172A, /* blueGray.900 */
-                focused-button: #E2E8F0, /* blueGray.200 */
-                selected-button: rgba(255, 255, 255, 0.05),
-                selected-disabled-button: #1E293B, /* blueGray.800 */
-                disabled-button-toggle: #0F172A, /* blueGray.900 */
-                unselected-chip: #475569, /* blueGray.600 */
-                disabled-list-option: #E2E8F0, /* blueGray.200 */
-                tooltip: #64748B /* blueGray.500 */
-            )
-        )
-    );
-
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($dark-theme);
-}
--- a/src/@fuse/tailwind/plugins/utilities.js
+++ b/src/@fuse/tailwind/plugins/utilities.js
@ -1,75 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-const utilities = plugin(({
-    addComponents
-}) =>
-{
-    /*
-    * Add base components. These are very important for everything to look
-    * correct. We are adding these to the 'components' layer because they must
-    * be defined before pretty much everything else.
-    */
-    addComponents(
-        {
-            '.mat-icon'       : {
-                '--tw-text-opacity': '1',
-                color              : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))'
-            },
-            '.text-default'   : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important'
-            },
-            '.text-secondary' : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important'
-            },
-            '.text-hint'      : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important'
-            },
-            '.text-disabled'  : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important'
-            },
-            '.divider'        : {
-                color: 'var(--fuse-divider) !important'
-            },
-            '.bg-card'        : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important'
-            },
-            '.bg-default'     : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important'
-            },
-            '.bg-dialog'      : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
-            },
-            '.ring-bg-default': {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important'
-            },
-            '.ring-bg-card'   : {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
-            }
-        },
-        {
-            variants: ['dark', 'responsive', 'group-hover', 'hover']
-        }
-    );
-
-    addComponents(
-        {
-            '.bg-hover': {
-                backgroundColor: 'var(--fuse-bg-hover) !important'
-            }
-        },
-        {
-            variants: ['dark', 'group-hover', 'hover']
-        }
-    );
-});
-
-module.exports = utilities;
--- a/src/@fuse/validators/index.ts
+++ b/src/@fuse/validators/index.ts
@ -1 +0,0 @@
-export * from '@fuse/validators/public-api';
--- a/src/@fuse/validators/public-api.ts
+++ b/src/@fuse/validators/public-api.ts
@ -1 +0,0 @@
-export * from '@fuse/validators/validators';
--- a/src/@fuse/version/fuse-version.ts
+++ b/src/@fuse/version/fuse-version.ts
@ -1,3 +0,0 @@
-import { Version } from '@fuse/version/version';
-
-export const FUSE_VERSION = new Version('13.6.2').full;
--- a/src/@fuse/version/index.ts
+++ b/src/@fuse/version/index.ts
@ -1 +0,0 @@
-export * from '@fuse/version/public-api';
--- a/src/@fuse/version/public-api.ts
+++ b/src/@fuse/version/public-api.ts
@ -1,2 +0,0 @@
-export * from '@fuse/version/fuse-version';
-export * from '@fuse/version/version';
--- a/src/@teso/animations/defaults.ts
+++ b/src/@teso/animations/defaults.ts
@ -1,4 +1,4 @@
-export class FuseAnimationCurves
+export class tesoAnimationCurves
 {
    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
@ -6,7 +6,7 @@ export class FuseAnimationCurves
    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
 }

-export class FuseAnimationDurations
+export class tesoAnimationDurations
 {
    static complex = '375ms';
    static entering = '225ms';
--- a/src/@teso/animations/expand-collapse.ts
+++ b/src/@teso/animations/expand-collapse.ts
@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import { tesoAnimationCurves, tesoAnimationDurations } from '@teso/animations/defaults';

 // -----------------------------------------------------------------------------------------------------
 // @ Expand / collapse
@ -24,7 +24,7 @@ const expandCollapse = trigger('expandCollapse',
            animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
--- a/src/@teso/animations/fade.ts
+++ b/src/@teso/animations/fade.ts
@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import { tesoAnimationCurves, tesoAnimationDurations } from '@teso/animations/defaults';

 // -----------------------------------------------------------------------------------------------------
 // @ Fade in
@ -25,7 +25,7 @@ const fadeIn = trigger('fadeIn',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -58,7 +58,7 @@ const fadeInTop = trigger('fadeInTop',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -91,7 +91,7 @@ const fadeInBottom = trigger('fadeInBottom',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -124,7 +124,7 @@ const fadeInLeft = trigger('fadeInLeft',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -157,7 +157,7 @@ const fadeInRight = trigger('fadeInRight',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -188,7 +188,7 @@ const fadeOut = trigger('fadeOut',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -221,7 +221,7 @@ const fadeOutTop = trigger('fadeOutTop',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -254,7 +254,7 @@ const fadeOutBottom = trigger('fadeOutBottom',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -287,7 +287,7 @@ const fadeOutLeft = trigger('fadeOutLeft',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -320,7 +320,7 @@ const fadeOutRight = trigger('fadeOutRight',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
--- a/src/@teso/animations/index.ts
+++ b/src/@teso/animations/index.ts
@ -0,0 +1 @@
+export * from '@teso/animations/public-api';
--- a/src/@teso/animations/public-api.ts
+++ b/src/@teso/animations/public-api.ts
@ -1,10 +1,10 @@
-import { expandCollapse } from '@fuse/animations/expand-collapse';
-import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
-import { shake } from '@fuse/animations/shake';
-import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
-import { zoomIn, zoomOut } from '@fuse/animations/zoom';
+import { expandCollapse } from '@teso/animations/expand-collapse';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@teso/animations/fade';
+import { shake } from '@teso/animations/shake';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@teso/animations/slide';
+import { zoomIn, zoomOut } from '@teso/animations/zoom';

-export const fuseAnimations = [
+export const tesoAnimations = [
    expandCollapse,
    fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
    fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
--- a/src/@teso/animations/shake.ts
+++ b/src/@teso/animations/shake.ts
--- a/src/@teso/animations/slide.ts
+++ b/src/@teso/animations/slide.ts
@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import { tesoAnimationCurves, tesoAnimationDurations } from '@teso/animations/defaults';

 // -----------------------------------------------------------------------------------------------------
 // @ Slide in top
@ -25,7 +25,7 @@ const slideInTop = trigger('slideInTop',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -56,7 +56,7 @@ const slideInBottom = trigger('slideInBottom',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -87,7 +87,7 @@ const slideInLeft = trigger('slideInLeft',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -118,7 +118,7 @@ const slideInRight = trigger('slideInRight',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -149,7 +149,7 @@ const slideOutTop = trigger('slideOutTop',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -180,7 +180,7 @@ const slideOutBottom = trigger('slideOutBottom',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -211,7 +211,7 @@ const slideOutLeft = trigger('slideOutLeft',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
@ -242,7 +242,7 @@ const slideOutRight = trigger('slideOutRight',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
--- a/src/@teso/animations/zoom.ts
+++ b/src/@teso/animations/zoom.ts
@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import { tesoAnimationCurves, tesoAnimationDurations } from '@teso/animations/defaults';

 // -----------------------------------------------------------------------------------------------------
 // @ Zoom in
@ -28,7 +28,7 @@ const zoomIn = trigger('zoomIn',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                    timings: `${tesoAnimationDurations.entering} ${tesoAnimationCurves.deceleration}`
                }
            }
        )
@ -62,7 +62,7 @@ const zoomOut = trigger('zoomOut',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                    timings: `${tesoAnimationDurations.exiting} ${tesoAnimationCurves.acceleration}`
                }
            }
        )
--- a/src/@teso/components/alert/alert.component.html
+++ b/src/@teso/components/alert/alert.component.html
@ -0,0 +1,55 @@
+<div class="teso-alert-container" *ngIf="!dismissible || dismissible && !dismissed" [@fadeIn]="!dismissed" [@fadeOut]="!dismissed">
+
+    <!-- Border -->
+    <div class="teso-alert-border" *ngIf="appearance === 'border'"></div>
+
+    <!-- Icon -->
+    <div class="teso-alert-icon" *ngIf="showIcon">
+
+        <!-- Custom icon -->
+        <div class="teso-alert-custom-icon">
+            <ng-content select="[tesoAlertIcon]"></ng-content>
+        </div>
+
+        <!-- Default icons -->
+        <div class="teso-alert-default-icon">
+
+            <mat-icon *ngIf="type === 'primary'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'accent'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'warn'" [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'basic'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'info'" [svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'success'" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'warning'" [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
+
+            <mat-icon *ngIf="type === 'error'" [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+        </div>
+
+    </div>
+
+    <!-- Content -->
+    <div class="teso-alert-content">
+
+        <div class="teso-alert-title">
+            <ng-content select="[tesoAlertTitle]"></ng-content>
+        </div>
+
+        <div class="teso-alert-message">
+            <ng-content></ng-content>
+        </div>
+
+    </div>
+
+    <!-- Dismiss button -->
+    <button class="teso-alert-dismiss-button" mat-icon-button (click)="dismiss()">
+        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
+    </button>
+
+</div>
--- a/src/@teso/components/alert/alert.component.scss
+++ b/src/@teso/components/alert/alert.component.scss
--- a/src/@teso/components/alert/alert.component.ts
+++ b/src/@teso/components/alert/alert.component.ts
@ -2,21 +2,21 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Ho
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
-import { FuseAlertService } from '@fuse/components/alert/alert.service';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { tesoAnimations } from '@teso/animations';
+import { tesoAlertAppearance, tesoAlertType } from '@teso/components/alert/alert.types';
+import { tesoAlertService } from '@teso/components/alert/alert.service';
+import { tesoUtilsService } from '@teso/services/utils/utils.service';

@Component({
-    selector       : 'fuse-alert',
+    selector       : 'teso-alert',
    templateUrl    : './alert.component.html',
    styleUrls      : ['./alert.component.scss'],
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations     : fuseAnimations,
-    exportAs       : 'fuseAlert'
+    animations     : tesoAnimations,
+    exportAs       : 'tesoAlert'
 })
-export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
+export class tesoAlertComponent implements OnChanges, OnInit, OnDestroy
 {
    /* eslint-disable @typescript-eslint/naming-convention */
    static ngAcceptInputType_dismissible: BooleanInput;
@ -24,12 +24,12 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
    static ngAcceptInputType_showIcon: BooleanInput;
    /* eslint-enable @typescript-eslint/naming-convention */

-    @Input() appearance: FuseAlertAppearance = 'soft';
+    @Input() appearance: tesoAlertAppearance = 'soft';
    @Input() dismissed: boolean = false;
    @Input() dismissible: boolean = false;
-    @Input() name: string = this._fuseUtilsService.randomId();
+    @Input() name: string = this._tesoUtilsService.randomId();
    @Input() showIcon: boolean = true;
-    @Input() type: FuseAlertType = 'primary';
+    @Input() type: tesoAlertType = 'primary';
    @Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();

    private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,8 +39,8 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseAlertService: FuseAlertService,
-        private _fuseUtilsService: FuseUtilsService
+        private _tesoAlertService: tesoAlertService,
+        private _tesoUtilsService: tesoUtilsService
    )
    {
    }
@ -55,21 +55,21 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
    @HostBinding('class') get classList(): any
    {
        return {
-            'fuse-alert-appearance-border' : this.appearance === 'border',
-            'fuse-alert-appearance-fill'   : this.appearance === 'fill',
-            'fuse-alert-appearance-outline': this.appearance === 'outline',
-            'fuse-alert-appearance-soft'   : this.appearance === 'soft',
-            'fuse-alert-dismissed'         : this.dismissed,
-            'fuse-alert-dismissible'       : this.dismissible,
-            'fuse-alert-show-icon'         : this.showIcon,
-            'fuse-alert-type-primary'      : this.type === 'primary',
-            'fuse-alert-type-accent'       : this.type === 'accent',
-            'fuse-alert-type-warn'         : this.type === 'warn',
-            'fuse-alert-type-basic'        : this.type === 'basic',
-            'fuse-alert-type-info'         : this.type === 'info',
-            'fuse-alert-type-success'      : this.type === 'success',
-            'fuse-alert-type-warning'      : this.type === 'warning',
-            'fuse-alert-type-error'        : this.type === 'error'
+            'teso-alert-appearance-border' : this.appearance === 'border',
+            'teso-alert-appearance-fill'   : this.appearance === 'fill',
+            'teso-alert-appearance-outline': this.appearance === 'outline',
+            'teso-alert-appearance-soft'   : this.appearance === 'soft',
+            'teso-alert-dismissed'         : this.dismissed,
+            'teso-alert-dismissible'       : this.dismissible,
+            'teso-alert-show-icon'         : this.showIcon,
+            'teso-alert-type-primary'      : this.type === 'primary',
+            'teso-alert-type-accent'       : this.type === 'accent',
+            'teso-alert-type-warn'         : this.type === 'warn',
+            'teso-alert-type-basic'        : this.type === 'basic',
+            'teso-alert-type-info'         : this.type === 'info',
+            'teso-alert-type-success'      : this.type === 'success',
+            'teso-alert-type-warning'      : this.type === 'warning',
+            'teso-alert-type-error'        : this.type === 'error'
        };
    }

@ -115,7 +115,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
    ngOnInit(): void
    {
        // Subscribe to the dismiss calls
-        this._fuseAlertService.onDismiss
+        this._tesoAlertService.onDismiss
            .pipe(
                filter(name => this.name === name),
                takeUntil(this._unsubscribeAll)
@ -127,7 +127,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
            });

        // Subscribe to the show calls
-        this._fuseAlertService.onShow
+        this._tesoAlertService.onShow
            .pipe(
                filter(name => this.name === name),
                takeUntil(this._unsubscribeAll)
--- a/src/@teso/components/alert/alert.module.ts
+++ b/src/@teso/components/alert/alert.module.ts
@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
+import { tesoAlertComponent } from '@teso/components/alert/alert.component';

@NgModule({
    declarations: [
-        FuseAlertComponent
+        tesoAlertComponent
    ],
    imports     : [
        CommonModule,
@ -14,9 +14,9 @@ import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
        MatIconModule
    ],
    exports     : [
-        FuseAlertComponent
+        tesoAlertComponent
    ]
 })
-export class FuseAlertModule
+export class tesoAlertModule
 {
 }
--- a/src/@teso/components/alert/alert.service.ts
+++ b/src/@teso/components/alert/alert.service.ts
@ -4,7 +4,7 @@ import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
    providedIn: 'root'
 })
-export class FuseAlertService
+export class tesoAlertService
 {
    private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
    private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
--- a/src/@teso/components/alert/alert.types.ts
+++ b/src/@teso/components/alert/alert.types.ts
@ -1,10 +1,10 @@
-export type FuseAlertAppearance =
+export type tesoAlertAppearance =
    | 'border'
    | 'fill'
    | 'outline'
    | 'soft';

-export type FuseAlertType =
+export type tesoAlertType =
    | 'primary'
    | 'accent'
    | 'warn'
--- a/src/@teso/components/alert/index.ts
+++ b/src/@teso/components/alert/index.ts
@ -0,0 +1 @@
+export * from '@teso/components/alert/public-api';
--- a/src/@teso/components/alert/public-api.ts
+++ b/src/@teso/components/alert/public-api.ts
@ -0,0 +1,4 @@
+export * from '@teso/components/alert/alert.component';
+export * from '@teso/components/alert/alert.module';
+export * from '@teso/components/alert/alert.service';
+export * from '@teso/components/alert/alert.types';
--- a/src/@teso/components/card/card.component.html
+++ b/src/@teso/components/card/card.component.html
@ -0,0 +1,27 @@
+<!-- Flippable card -->
+<ng-container *ngIf="flippable">
+
+    <!-- Front -->
+    <div class="teso-card-front">
+        <ng-content select="[tesoCardFront]"></ng-content>
+    </div>
+
+    <!-- Back -->
+    <div class="teso-card-back">
+        <ng-content select="[tesoCardBack]"></ng-content>
+    </div>
+
+</ng-container>
+
+<!-- Normal card -->
+<ng-container *ngIf="!flippable">
+
+    <!-- Content -->
+    <ng-content></ng-content>
+
+    <!-- Expansion -->
+    <div class="teso-card-expansion" *ngIf="expanded" [@expandCollapse]>
+        <ng-content select="[tesoCardExpansion]"></ng-content>
+    </div>
+
+</ng-container>
--- a/src/@teso/components/card/card.component.scss
+++ b/src/@teso/components/card/card.component.scss
@ -1,11 +1,10 @@
-fuse-card {
+teso-card {
    position: relative;
    display: flex;
    overflow: hidden;
    @apply rounded-2xl shadow bg-card;
-
    /* Flippable */
-    &.fuse-card-flippable {
+    &.teso-card-flippable {
        border-radius: 0;
        overflow: visible;
        transform-style: preserve-3d;
@ -13,24 +12,20 @@ fuse-card {
        perspective: 600px;
        background: transparent;
        @apply shadow-none;
-
-        &.fuse-card-face-back {
-
-            .fuse-card-front {
+        &.teso-card-face-back {
+            .teso-card-front {
                visibility: hidden;
                opacity: 0;
                transform: rotateY(180deg);
            }
-
-            .fuse-card-back {
+            .teso-card-back {
                visibility: visible;
                opacity: 1;
                transform: rotateY(360deg);
            }
        }
-
-        .fuse-card-front,
-        .fuse-card-back {
+        .teso-card-front,
+        .teso-card-back {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
@ -39,16 +34,14 @@ fuse-card {
            backface-visibility: hidden;
            @apply rounded-2xl shadow bg-card;
        }
-
-        .fuse-card-front {
+        .teso-card-front {
            position: relative;
            opacity: 1;
            visibility: visible;
            transform: rotateY(0deg);
            overflow: hidden;
        }
-
-        .fuse-card-back {
+        .teso-card-back {
            position: absolute;
            top: 0;
            right: 0;
@ -60,4 +53,4 @@ fuse-card {
            overflow: hidden auto;
        }
    }
-}
+}
--- a/src/@teso/components/card/card.component.ts
+++ b/src/@teso/components/card/card.component.ts
@ -1,17 +1,17 @@
 import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseCardFace } from '@fuse/components/card/card.types';
+import { tesoAnimations } from '@teso/animations';
+import { tesoCardFace } from '@teso/components/card/card.types';

@Component({
-    selector     : 'fuse-card',
+    selector     : 'teso-card',
    templateUrl  : './card.component.html',
    styleUrls    : ['./card.component.scss'],
    encapsulation: ViewEncapsulation.None,
-    animations   : fuseAnimations,
-    exportAs     : 'fuseCard'
+    animations   : tesoAnimations,
+    exportAs     : 'tesoCard'
 })
-export class FuseCardComponent implements OnChanges
+export class tesoCardComponent implements OnChanges
 {
    /* eslint-disable @typescript-eslint/naming-convention */
    static ngAcceptInputType_expanded: BooleanInput;
@ -19,7 +19,7 @@ export class FuseCardComponent implements OnChanges
    /* eslint-enable @typescript-eslint/naming-convention */

    @Input() expanded: boolean = false;
-    @Input() face: FuseCardFace = 'front';
+    @Input() face: tesoCardFace = 'front';
    @Input() flippable: boolean = false;

    /**
@ -39,10 +39,10 @@ export class FuseCardComponent implements OnChanges
    @HostBinding('class') get classList(): any
    {
        return {
-            'fuse-card-expanded'  : this.expanded,
-            'fuse-card-face-back' : this.flippable && this.face === 'back',
-            'fuse-card-face-front': this.flippable && this.face === 'front',
-            'fuse-card-flippable' : this.flippable
+            'teso-card-expanded'  : this.expanded,
+            'teso-card-face-back' : this.flippable && this.face === 'back',
+            'teso-card-face-front': this.flippable && this.face === 'front',
+            'teso-card-flippable' : this.flippable
        };
    }
			`@ -1 +0,0 @@`
			`export * from '@fuse/animations/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/alert/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/card/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/date-range/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/drawer/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/fullscreen/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/highlight/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/masonry/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/components/navigation/public-api';`
			`@ -1 +0,0 @@`
			`export * from '@fuse/directives/scroll-reset/public-api';`