Merge pull request #24 from DSI-HUG/fix-scss

fix: theming

.vscode/settings.json

@@ -23,7 +23,7 @@
         "editor.defaultFormatter": "vscode.html-language-features"
     },
     "[scss]": {
-        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
+        "editor.defaultFormatter": "HookyQR.beautify"
     },
     "npm.exclude": "**/{dist,tmp}{,/**}",
     "npm.scriptExplorerExclude": [

angular.json

@@ -601,5 +601,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }

projects/core/package.json

@@ -21,8 +21,23 @@
     ],
     "sideEffects": false,
     "exports": {
-        ".": {
-            "sass": "./styles"
+        "./theme": {
+            "sass": "./styles/_theme.scss"
+        },
+        "./themeVariables": {
+            "sass": "./styles/_themeVariables.scss"
+        },
+        "./menu": {
+            "sass": "./styles/mixins/_menu.scss"
+        },
+        "./menu-theme": {
+            "sass": "./styles/mixins/_menu-theme.scss"
+        },
+        "./loader-theme": {
+            "sass": "./styles/mixins/_loader-theme.scss"
+        },
+        "./icon-theme": {
+            "sass": "./styles/mixins/_icon-theme.scss"
         }
     },
     "scripts": {

projects/core/src/styles/_theme.scss

@@ -1,15 +1,13 @@
 @use '@angular/material' as mat;
 @use './themeVariables' as themeVariables;
 @use './mixins/material-icons-theme' as materialIconsTheme;
-@use './mixins/ngx-components-theme' as ngxComponentsTheme;
 
 @import './roboto';
 
 // Include theme styles for core and each component used in the app
 @include mat.core();
 @include mat.all-component-themes(themeVariables.$theme);
-@include materialIconsTheme.material-icons-theme();
-@include ngxComponentsTheme.all-component-themes(themeVariables.$theme);
+@include materialIconsTheme.theme();
 
 body#hug-ngx {
     margin: 0;

projects/core/src/styles/mixins/_icon-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin icon-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

projects/core/src/styles/mixins/loader-theme.scss → projects/core/src/styles/mixins/_loader-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin loader-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
 
     .loader {

projects/core/src/styles/mixins/material-icons-theme.scss → projects/core/src/styles/mixins/_material-icons-theme.scss

@@ -4,7 +4,7 @@
 
 $fontFamily: "Material Symbols Outlined Variable";
 
-@mixin material-icons-theme {
+@mixin theme {
     .mat-icon {
         font-family: $fontFamily;
 

projects/core/src/styles/mixins/_menu-theme.scss

@@ -1,6 +1,6 @@
 @use "@angular/material" as mat;
 
-@mixin menu-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
 
     .ngx-menu,

projects/demo-app/src/app/app.component.html

@@ -1 +1,31 @@
-<b>Hello World</b>
+<div class="demo-container"
+     [class.demo-is-mobile]="mobileQuery.matches">
+    <mat-toolbar color="primary"
+                 class="demo-toolbar">
+        <button mat-icon-button (click)="snav.toggle()">
+            <mat-icon>menu</mat-icon>
+        </button>
+        <h1 class="demo-app-name">@hug/ngx-components Demo</h1>
+    </mat-toolbar>
+
+    <mat-sidenav-container class="demo-sidenav-container"
+                           [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
+        <mat-sidenav #snav
+                     [mode]="mobileQuery.matches ? 'over' : 'side'"
+                     [fixedInViewport]="mobileQuery.matches"
+                     fixedTopGap="56">
+            <mat-nav-list>
+                <mat-list-item title="Overlay"
+                               routerLink="/overlay"
+                               routerLinkActive="active">
+                    <mat-icon mat-list-icon>menu</mat-icon>
+                    <span mat-line>Overlay</span>
+                </mat-list-item>
+            </mat-nav-list>
+        </mat-sidenav>
+
+        <mat-sidenav-content>
+            <router-outlet></router-outlet>
+        </mat-sidenav-content>
+    </mat-sidenav-container>
+</div>

projects/demo-app/src/app/app.component.scss

@@ -0,0 +1,33 @@
+:host {
+    .demo-container {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .demo-is-mobile .demo-toolbar {
+        position: fixed;
+        /* Make sure the toolbar will stay on top of the content as it scrolls past. */
+        z-index: 2;
+    }
+
+    h1.demo-app-name {
+        margin-left: 8px;
+    }
+
+    .demo-sidenav-container {
+        /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
+       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
+        flex: 1;
+    }
+
+    .demo-is-mobile .demo-sidenav-container {
+        /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
+       `<body>` to be our scrolling element for mobile layouts. */
+        flex: 1 0 auto;
+    }
+}

projects/demo-app/src/app/app.component.ts

@@ -1,14 +1,44 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterOutlet } from '@angular/router';
 
+
 @Component({
     selector: 'app-root',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [RouterOutlet],
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    imports: [
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        NgIf,
+        NgFor,
+        RouterOutlet
+    ]
 })
-export class AppComponent {
-    public title = 'demo-app';
+export class AppComponent implements OnDestroy {
+    protected mobileQuery: MediaQueryList;
+
+    private _mobileQueryListener: () => void;
+
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private media = inject(MediaMatcher);
+
+    public constructor() {
+        this.mobileQuery = this.media.matchMedia('(max-width: 600px)');
+        this._mobileQueryListener = (): void => this.changeDetectorRef.detectChanges();
+        this.mobileQuery.addListener(this._mobileQueryListener);
+    }
+
+    public ngOnDestroy(): void {
+        this.mobileQuery.removeListener(this._mobileQueryListener);
+    }
 }

projects/demo-app/src/app/app.routes.ts

@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const appRoutes: Routes = [
+    { path: '', redirectTo: 'overlay', pathMatch: 'full' },
+    { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } },
+    { path: '**', redirectTo: 'overlay', pathMatch: 'prefix' }
+];