Skip to content

Commit b5b2d7f

Browse files
committed
feat: ThemeDirective
1 parent 0fbedd4 commit b5b2d7f

File tree

4 files changed

+64
-8
lines changed

4 files changed

+64
-8
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { SharedModule } from './shared.module';
22
export { HtmlAttributesDirective } from './html-attr.directive';
33
export { TemplateIdDirective } from './template-id.directive';
4+
export { ThemeDirective } from './theme.directive';

projects/coreui-angular/src/lib/shared/shared.module.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,11 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
22

33
import { HtmlAttributesDirective } from './html-attr.directive';
44
import { TemplateIdDirective } from './template-id.directive';
5+
import { ThemeDirective } from './theme.directive';
56

67
@NgModule({
7-
imports: [
8-
HtmlAttributesDirective,
9-
TemplateIdDirective
10-
],
11-
exports: [
12-
HtmlAttributesDirective,
13-
TemplateIdDirective
14-
],
8+
imports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
9+
exports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective]
1510
})
1611
export class SharedModule {
1712

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ElementRef, Renderer2 } from '@angular/core';
2+
import { TestBed } from '@angular/core/testing';
3+
import { ThemeDirective } from './theme.directive';
4+
5+
class MockElementRef extends ElementRef {}
6+
7+
describe('ThemeDirective', () => {
8+
9+
beforeEach(() => {
10+
TestBed.configureTestingModule({
11+
providers: [{ provide: ElementRef, useClass: MockElementRef }, Renderer2]
12+
});
13+
});
14+
15+
it('should create an instance', () => {
16+
TestBed.runInInjectionContext(() => {
17+
const directive = new ThemeDirective();
18+
expect(directive).toBeTruthy();
19+
});
20+
});
21+
});
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { booleanAttribute, Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[cTheme]',
5+
standalone: true
6+
})
7+
export class ThemeDirective {
8+
9+
readonly #hostElement = inject(ElementRef);
10+
readonly #renderer = inject(Renderer2);
11+
12+
/**
13+
* Add dark theme attribute.
14+
* @type 'dark' | 'light' | undefined
15+
*/
16+
@Input() set colorScheme(scheme: 'dark' | 'light' | undefined) {
17+
!!scheme ? this.setTheme(scheme) : this.unsetTheme();
18+
};
19+
20+
/**
21+
* Add dark theme attribute.
22+
* @type boolean
23+
*/
24+
@Input({ transform: booleanAttribute })
25+
set dark(darkTheme: boolean) {
26+
darkTheme ? this.setTheme('dark') : this.unsetTheme();
27+
};
28+
29+
setTheme(theme?: string): void {
30+
if (theme) {
31+
this.#renderer.setAttribute(this.#hostElement.nativeElement, 'data-coreui-theme', theme);
32+
}
33+
}
34+
35+
unsetTheme(): void {
36+
this.#renderer.removeAttribute(this.#hostElement.nativeElement, 'data-coreui-theme');
37+
}
38+
39+
}

0 commit comments

Comments
 (0)