Add pixel-art directive

demo/src/app/app.component.html

@@ -542,7 +542,20 @@ <h1 class="demo-title">
 
 <section>
   <nes-container title="Pixel-arts">
-    Soon to come...
+    <div class="flex-row flex-wrap flex-align-end">
+
+      <i nes-pixel-art pixel-art="nes-logo"></i>
+      <i nes-pixel-art pixel-art="nes-jp-logo"></i>
+      <i nes-pixel-art pixel-art="snes-logo"></i>
+      <i nes-pixel-art pixel-art="snes-jp-logo"></i>
+
+      <i nes-pixel-art pixel-art="nes-octocat"></i>
+      <i nes-pixel-art pixel-art="nes-octocat-animate"></i>
+
+      <i nes-pixel-art pixel-art="nes-smartphone"></i>
+      <i nes-pixel-art pixel-art="nes-phone"></i>
+
+    </div>
   </nes-container>
 </section>
 

demo/src/styles.scss

@@ -72,6 +72,10 @@ code {
   align-items: center;
 }
 
+.flex-align-end {
+  align-items: flex-end;
+}
+
 .flex-justify-center {
   justify-content: center;
 }

lib/src/icon/icon.directive.spec.ts

@@ -1,8 +1,11 @@
+import { ElementRef, Renderer2 } from '@angular/core';
 import { NesIconDirective } from './icon.directive';
 
 describe('IconDirective', () => {
   it('should create an instance', () => {
-    const directive = new NesIconDirective();
+    const mockElementRef = {} as ElementRef<HTMLElement>;
+    const mockRenderer2 = {} as Renderer2;
+    const directive = new NesIconDirective(mockElementRef, mockRenderer2);
     expect(directive).toBeTruthy();
   });
 });

lib/src/index.ts

@@ -8,6 +8,7 @@ export * from './dialog';
 export * from './icon';
 export * from './input';
 export * from './list';
+export * from './pixel-art';
 export * from './pointer';
 export * from './progress';
 export * from './radio';

lib/src/nes.module.ts

@@ -9,6 +9,7 @@ import { NesDialogModule } from './dialog';
 import { NesIconModule } from './icon';
 import { NesInputModule } from './input';
 import { NesListModule } from './list';
+import { NesPixelArtModule } from './pixel-art';
 import { NesPointerModule } from './pointer';
 import { NesProgressModule } from './progress';
 import { NesRadioModule } from './radio';
@@ -28,6 +29,7 @@ const SHARED_IMPORTS = [
   NesIconModule,
   NesInputModule,
   NesListModule,
+  NesPixelArtModule,
   NesPointerModule,
   NesProgressModule,
   NesRadioModule,

lib/src/pixel-art/index.ts

@@ -0,0 +1,2 @@
+export * from './pixel-art.directive';
+export * from './pixel-art.module';

lib/src/pixel-art/pixel-art.directive.spec.ts

@@ -0,0 +1,11 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { NesPixelArtDirective } from './pixel-art.directive';
+
+describe('PixelArtDirective', () => {
+  it('should create an instance', () => {
+    const mockElementRef = {} as ElementRef<HTMLElement>;
+    const mockRenderer2 = {} as Renderer2;
+    const directive = new NesPixelArtDirective(mockElementRef, mockRenderer2);
+    expect(directive).toBeTruthy();
+  });
+});

lib/src/pixel-art/pixel-art.directive.ts

@@ -0,0 +1,48 @@
+import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+
+export type NesPixelArt
+  = 'nes-logo'
+  | 'nes-jp-logo'
+  | 'snes-logo'
+  | 'snes-jp-logo'
+  | 'nes-octocat'
+  | 'nes-octocat-animate'
+  | 'nes-smartphone'
+  | 'nes-phone';
+
+const PIXELART_CLASSLIST_MAP = new Map<NesPixelArt, string[]>([
+  ['nes-octocat-animate', ['nes-octocat', 'animate']],
+]);
+
+@Directive({
+  selector: '[nes-pixel-art]',
+})
+export class NesPixelArtDirective implements OnChanges {
+  @Input('pixel-art') pixelArt?: NesPixelArt;
+
+  constructor(
+    private readonly _elementRef: ElementRef<HTMLElement>,
+    private readonly _renderer: Renderer2,
+  ) { }
+
+  ngOnChanges(change: SimpleChanges): void {
+    this._handlePixelArtChange(change);
+  }
+
+  private _handlePixelArtChange({ pixelArt }: SimpleChanges): void {
+    if (pixelArt == null || pixelArt.currentValue === pixelArt.previousValue) {
+      return;
+    }
+
+    const previousClassList = PIXELART_CLASSLIST_MAP.get(pixelArt.previousValue) || [pixelArt.previousValue];
+    const currentClassList = PIXELART_CLASSLIST_MAP.get(pixelArt.currentValue) || [pixelArt.currentValue];
+
+    previousClassList.forEach(
+      (cssClass) => this._renderer.removeClass(this._elementRef.nativeElement, cssClass),
+    );
+
+    currentClassList.forEach(
+      (cssClass) => this._renderer.addClass(this._elementRef.nativeElement, cssClass),
+    );
+  }
+}

lib/src/pixel-art/pixel-art.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NesPixelArtDirective } from './pixel-art.directive';
+
+const SHARED_DECLARATIONS = [
+  NesPixelArtDirective,
+];
+
+@NgModule({
+  declarations: [
+    ...SHARED_DECLARATIONS,
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    ...SHARED_DECLARATIONS,
+  ],
+})
+export class NesPixelArtModule { }