diff --git a/.vscode/settings.json b/.vscode/settings.json
index d4cfe13c..bfdf84c8 100644
--- a/.vscode/settings.json
+++ b/.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": [
diff --git a/angular.json b/angular.json
index 900be523..13eb8537 100644
--- a/angular.json
+++ b/angular.json
@@ -601,5 +601,8 @@
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
diff --git a/projects/core/package.json b/projects/core/package.json
index 0fdc01c8..74327465 100644
--- a/projects/core/package.json
+++ b/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": {
diff --git a/projects/core/src/styles/_theme.scss b/projects/core/src/styles/_theme.scss
index 0a73fa51..b4864368 100644
--- a/projects/core/src/styles/_theme.scss
+++ b/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;
diff --git a/projects/core/src/styles/mixins/_icon-theme.scss b/projects/core/src/styles/mixins/_icon-theme.scss
index 79ab0243..edcca502 100644
--- a/projects/core/src/styles/mixins/_icon-theme.scss
+++ b/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);
diff --git a/projects/core/src/styles/mixins/loader-theme.scss b/projects/core/src/styles/mixins/_loader-theme.scss
similarity index 98%
rename from projects/core/src/styles/mixins/loader-theme.scss
rename to projects/core/src/styles/mixins/_loader-theme.scss
index 0804999c..1b014062 100644
--- a/projects/core/src/styles/mixins/loader-theme.scss
+++ b/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 {
diff --git a/projects/core/src/styles/mixins/material-icons-theme.scss b/projects/core/src/styles/mixins/_material-icons-theme.scss
similarity index 97%
rename from projects/core/src/styles/mixins/material-icons-theme.scss
rename to projects/core/src/styles/mixins/_material-icons-theme.scss
index b3ef98a9..3238bc63 100644
--- a/projects/core/src/styles/mixins/material-icons-theme.scss
+++ b/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;
diff --git a/projects/core/src/styles/mixins/_menu-theme.scss b/projects/core/src/styles/mixins/_menu-theme.scss
index faba5bf8..8c0e9b3e 100644
--- a/projects/core/src/styles/mixins/_menu-theme.scss
+++ b/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,
diff --git a/projects/core/src/styles/mixins/_ngx-components-theme.scss b/projects/core/src/styles/mixins/_ngx-components-theme.scss
deleted file mode 100644
index 783a2169..00000000
--- a/projects/core/src/styles/mixins/_ngx-components-theme.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '../../components/layout/layout-theme' as layoutTheme;
-@use '../../components/search-container/search-container-theme' as searchContainerTheme;
-@use '../../components/message-box/message-box-theme' as messageBoxTheme;
-@use '../../components/message-box-dialog/message-box-dialog-theme' as messageBoxDialogTheme;
-@use '../../components/splitter/splitter-theme' as splitterTheme;
-@use '../../components/numeric-stepper/numeric-stepper-theme' as numericStepperTheme;
-@use '../../components/user-card/user-card-theme' as userCardTheme;
-@use './icon-theme' as iconTheme;
-@use './menu-theme' as menuTheme;
-@use '../../components/status/status-theme' as statusTheme;
-@use '../../components/list-loader/list-loader-theme' as listLoaderTheme;
-
-@mixin all-component-themes($theme) {
- @include layoutTheme.layout-theme($theme);
- @include searchContainerTheme.search-container-theme($theme);
- @include messageBoxTheme.message-box-theme($theme);
- @include messageBoxDialogTheme.message-box-dialog-theme($theme);
- @include splitterTheme.splitter-theme($theme);
- @include numericStepperTheme.numeric-stepper-theme($theme);
- @include userCardTheme.user-card-theme($theme);
- @include iconTheme.icon-theme($theme);
- @include menuTheme.menu-theme($theme);
- @include statusTheme.status-theme($theme);
- @include listLoaderTheme.list-loader-theme($theme);
-}
diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
index 0f5bda97..b0ecf3fc 100644
--- a/projects/demo-app/src/app/app.component.html
+++ b/projects/demo-app/src/app/app.component.html
@@ -1 +1,31 @@
-Hello World
+
+
+
+ @hug/ngx-components Demo
+
+
+
+
+
+
+ menu
+ Overlay
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/demo-app/src/app/app.component.scss b/projects/demo-app/src/app/app.component.scss
index e69de29b..40d009e5 100644
--- a/projects/demo-app/src/app/app.component.scss
+++ b/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 `` 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
+ `` to be our scrolling element for mobile layouts. */
+ flex: 1 0 auto;
+ }
+}
diff --git a/projects/demo-app/src/app/app.component.spec.ts b/projects/demo-app/src/app/app.component.spec.ts
deleted file mode 100644
index d747e171..00000000
--- a/projects/demo-app/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [AppComponent]
- }).compileComponents();
- });
-
- it('should create the app', () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app).toBeTruthy();
- });
-
- it('should have the \'demo-app\' title property', () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app.title).toEqual('demo-app');
- });
-
- it('should render example', () => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('b')?.textContent).toContain('Hello World');
- });
-});
diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts
index 81e6cd67..6b247cbb 100644
--- a/projects/demo-app/src/app/app.component.ts
+++ b/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);
+ }
}
diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts
index dc39edb5..7ce24d14 100644
--- a/projects/demo-app/src/app/app.routes.ts
+++ b/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' }
+];
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.html b/projects/demo-app/src/app/overlay/overlay-demo.component.html
new file mode 100644
index 00000000..77892800
--- /dev/null
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.html
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+ TODO
+
+
+
+
+
+
+
+ Overlay
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
new file mode 100644
index 00000000..a98e8d8f
--- /dev/null
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
@@ -0,0 +1,30 @@
+overlay-demo {
+ #demo-deja-menu {
+ display: flex;
+ flex-flow: row;
+
+ .menu-section {
+ width: 300px;
+ margin: 0.5rem;
+ }
+
+ .end-icon {
+ align-items: flex-end;
+ }
+ }
+}
+
+.overlay-container {
+ .deja-menu-content {
+ &#anchorMenu {
+ .menu-item {
+ white-space: nowrap;
+ padding: 0.5rem 2rem;
+ }
+ }
+
+ .mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+}
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.ts b/projects/demo-app/src/app/overlay/overlay-demo.component.ts
new file mode 100644
index 00000000..8506dc0e
--- /dev/null
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { OverlayComponent } from '@hug/ngx-overlay';
+
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-overlay-demo',
+ styleUrls: ['./overlay-demo.component.scss'],
+ templateUrl: './overlay-demo.component.html',
+ standalone: true,
+ imports: [
+ CommonModule,
+ OverlayComponent,
+ FormsModule,
+ MatButtonModule,
+ MatCardModule,
+ MatIconModule,
+ MatTabsModule,
+ MatToolbarModule
+ ]
+})
+export class OverlayDemoComponent {
+ @ViewChild('contextMenu')
+ private contextMenu?: OverlayComponent;
+
+ public selected = '';
+ public items = [
+ { text: 'Refresh' },
+ { text: 'Settings' },
+ { text: 'Help', disabled: true },
+ { text: 'Sign Out' }
+ ];
+
+ public tabIndex = 1;
+
+ public select(text: string): void {
+ this.selected = text;
+ }
+
+ public onContextMenu(event: MouseEvent): boolean {
+ const parent = event.currentTarget as HTMLElement;
+ const parentRect = parent.getBoundingClientRect();
+ this.contextMenu?.show(event.pageX - parentRect.left, event.pageY - parentRect.top);
+ event.preventDefault();
+ return false;
+ }
+}
diff --git a/projects/demo-app/src/main.ts b/projects/demo-app/src/main.ts
index 4a61f92e..c68b56b6 100644
--- a/projects/demo-app/src/main.ts
+++ b/projects/demo-app/src/main.ts
@@ -1,8 +1,10 @@
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
+import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
import { AppComponent } from './app/app.component';
+import { appRoutes } from './app/app.routes';
import { environment } from './environments/environment';
if (environment.production) {
@@ -10,5 +12,8 @@ if (environment.production) {
}
bootstrapApplication(AppComponent, {
- providers: [provideAnimations()]
+ providers: [
+ provideAnimations(),
+ provideRouter(appRoutes, withPreloading(PreloadAllModules))
+ ]
}).catch(err => console.error(err));
diff --git a/projects/demo-app/src/styles.scss b/projects/demo-app/src/styles.scss
index c99331b8..472dc441 100644
--- a/projects/demo-app/src/styles.scss
+++ b/projects/demo-app/src/styles.scss
@@ -44,6 +44,7 @@ html,
body {
height: 100%;
}
+
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
diff --git a/projects/layout/package.json b/projects/layout/package.json
index 056d04c6..c699e17f 100644
--- a/projects/layout/package.json
+++ b/projects/layout/package.json
@@ -20,6 +20,11 @@
"components"
],
"sideEffects": false,
+ "exports": {
+ ".": {
+ "sass": "./_layout-theme.scss"
+ }
+ },
"scripts": {
"lint": "eslint . --fix",
"test": "ng test layout",
diff --git a/projects/layout/src/_layout-theme.scss b/projects/layout/src/_layout-theme.scss
index c3d1b166..f5d9f8f1 100644
--- a/projects/layout/src/_layout-theme.scss
+++ b/projects/layout/src/_layout-theme.scss
@@ -1,6 +1,6 @@
@use '@angular/material'as mat;
-@mixin layout-theme($theme) {
+@mixin theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
diff --git a/projects/list-loader/src/list-loader.component.ts b/projects/list-loader/src/list-loader.component.ts
index 4d47cc8e..986db88a 100644
--- a/projects/list-loader/src/list-loader.component.ts
+++ b/projects/list-loader/src/list-loader.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
- CommonModule
+ NgIf
]
})
export class ListLoaderComponent {
diff --git a/projects/message-box-dialog/package.json b/projects/message-box-dialog/package.json
index 32f79737..fbe8a554 100644
--- a/projects/message-box-dialog/package.json
+++ b/projects/message-box-dialog/package.json
@@ -20,6 +20,11 @@
"components"
],
"sideEffects": false,
+ "exports": {
+ ".": {
+ "sass": "./_message-box-dialog-theme.scss"
+ }
+ },
"scripts": {
"lint": "eslint . --fix",
"test": "ng test message-box-dialog",
diff --git a/projects/message-box-dialog/src/_message-box-dialog-theme.scss b/projects/message-box-dialog/src/_message-box-dialog-theme.scss
index 3fa92f43..96479545 100644
--- a/projects/message-box-dialog/src/_message-box-dialog-theme.scss
+++ b/projects/message-box-dialog/src/_message-box-dialog-theme.scss
@@ -1,6 +1,6 @@
@use '@angular/material' as mat;
-@mixin message-box-dialog-theme($theme) {
+@mixin theme($theme) {
$warn: map-get($theme, warn);
.cdk-overlay-container {
diff --git a/projects/overlay/package.json b/projects/overlay/package.json
index 8f350b04..07486b10 100644
--- a/projects/overlay/package.json
+++ b/projects/overlay/package.json
@@ -1,6 +1,6 @@
{
"name": "@hug/ngx-overlay",
- "version": "1.1.2",
+ "version": "1.1.3",
"description": "HUG Angular - overlay component",
"homepage": "https://github.com/dsi-hug/ngx-components",
"license": "GPL-3.0-only",
diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts
index 4a06e4b4..84e7b18c 100644
--- a/projects/overlay/src/overlay.component.ts
+++ b/projects/overlay/src/overlay.component.ts
@@ -1,9 +1,9 @@
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MediaService } from '@hug/ngx-core';
-import { BehaviorSubject, combineLatestWith, delay, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap } from 'rxjs';
+import { BehaviorSubject, combineLatestWith, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap, take } from 'rxjs';
import { defaultConnectionPositionPair, OverlayConnectionPositionPair } from './connection-position-pair';
@@ -50,11 +50,18 @@ export class OverlayComponent implements OnChanges {
@ContentChild('content') protected contentTemplate?: TemplateRef;
/** Overlay pane containing the options. */
- @ViewChild(CdkConnectedOverlay, { static: true }) private overlay?: CdkConnectedOverlay;
+ @ViewChild(CdkConnectedOverlay) protected set overlay(value: CdkConnectedOverlay | undefined) {
+ if (!value) {
+ return;
+ }
+
+ this.overlayRef$.next(value.overlayRef);
+ }
public readonly isVisible$: Observable;
protected overlayInfos$: Observable;
+ protected overlayRef$ = new ReplaySubject(1);
private show$ = new ReplaySubject(1);
private hide$ = new Subject();
@@ -115,19 +122,22 @@ export class OverlayComponent implements OnChanges {
const info$ = this.ownerElement$.pipe(
combineLatestWith(isMobile$),
- map(([ownerElement, isMobile]) => ({
- offsetX: showParams.offsetX && +showParams.offsetX || 0,
- offsetY: showParams.offsetY && +showParams.offsetY || 0,
- origin: new CdkOverlayOrigin(new ElementRef((isMobile && document.body) ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)),
- width: isMobile ? this.widthForMobile : this.width,
- context: showParams.context
- } as OverlayInfos))
+ map(([ownerElement, isMobile]) => {
+ const mobileElement = isMobile ? document.body : undefined;
+ return {
+ offsetX: showParams.offsetX && +showParams.offsetX || 0,
+ offsetY: showParams.offsetY && +showParams.offsetY || 0,
+ origin: new CdkOverlayOrigin(new ElementRef(mobileElement ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)),
+ width: isMobile ? this.widthForMobile : this.width,
+ context: showParams.context
+ } as OverlayInfos;
+ })
);
- const updatePosition$ = info$.pipe(
- delay(1),
- switchMap(() => {
- this.overlay?.overlayRef?.updatePosition();
+ const updatePosition$ = this.overlayRef$.pipe(
+ take(1),
+ switchMap(overlayRef => {
+ overlayRef.updatePosition();
return EMPTY;
})
);
diff --git a/projects/search-container/package.json b/projects/search-container/package.json
index 1da87c1f..ffc78065 100644
--- a/projects/search-container/package.json
+++ b/projects/search-container/package.json
@@ -20,6 +20,11 @@
"components"
],
"sideEffects": false,
+ "exports": {
+ ".": {
+ "sass": "./_search-container-theme.scss"
+ }
+ },
"scripts": {
"lint": "eslint . --fix",
"test": "ng test search-container",
diff --git a/projects/search-container/src/_search-container-theme.scss b/projects/search-container/src/_search-container-theme.scss
index 5eb46ff6..069a8897 100644
--- a/projects/search-container/src/_search-container-theme.scss
+++ b/projects/search-container/src/_search-container-theme.scss
@@ -1,6 +1,6 @@
@use '@angular/material' as mat;
-@mixin search-container-theme($theme) {
+@mixin theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
diff --git a/projects/sidenav/package.json b/projects/sidenav/package.json
index fd5dde71..c348452e 100644
--- a/projects/sidenav/package.json
+++ b/projects/sidenav/package.json
@@ -20,6 +20,11 @@
"components"
],
"sideEffects": false,
+ "exports": {
+ ".": {
+ "sass": "./_sidenav-theme.scss"
+ }
+ },
"scripts": {
"lint": "eslint . --fix",
"test": "ng test sidenav",
diff --git a/projects/user-card/package.json b/projects/user-card/package.json
index d76f58f2..bc503c99 100644
--- a/projects/user-card/package.json
+++ b/projects/user-card/package.json
@@ -20,6 +20,11 @@
"components"
],
"sideEffects": false,
+ "exports": {
+ ".": {
+ "sass": "./_user-card-theme.scss"
+ }
+ },
"scripts": {
"lint": "eslint . --fix",
"test": "ng test user-card",
diff --git a/projects/user-card/src/_user-card-theme.scss b/projects/user-card/src/_user-card-theme.scss
index d5cd74b7..84e63b2f 100644
--- a/projects/user-card/src/_user-card-theme.scss
+++ b/projects/user-card/src/_user-card-theme.scss
@@ -1,6 +1,6 @@
@use '@angular/material' as mat;
-@mixin user-card-theme($theme) {
+@mixin theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
@@ -27,7 +27,7 @@
}
}
- .header-separator,
+ .header-separator,
.header-initials {
color: mat.get-color-from-palette(mat.$grey-palette, 400);
}