Add character directive

demo/src/app/app.component.html

@@ -561,6 +561,20 @@ <h1 class="demo-title">
 
 <section>
   <nes-container title="Nintendo-characters">
-    Soon to come...
+    <div class="flex-row flex-wrap">
+
+      <i nes-character character="mario"></i>
+      <i nes-character character="ash"></i>
+      <i nes-character character="pokeball"></i>
+      <i nes-character character="bulbasaur"></i>
+      <i nes-character character="charmander"></i>
+      <i nes-character character="squirtle"></i>
+      <i nes-character character="kirby"></i>
+
+      <div nes-text color="error">
+        Nintendo owns the copyright of these characters. Please comply with the Nintendo guidelines and laws of the applicable jurisdiction.
+      </div>
+
+    </div>
   </nes-container>
 </section>

lib/src/character/character.directive.spec.ts

@@ -0,0 +1,8 @@
+import { NesCharacterDirective } from './character.directive';
+
+describe('CharacterDirective', () => {
+  it('should create an instance', () => {
+    const directive = new NesCharacterDirective();
+    expect(directive).toBeTruthy();
+  });
+});

lib/src/character/character.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, Input } from '@angular/core';
+
+export type NesCharacter
+  = 'mario'
+  | 'ash'
+  | 'pokeball'
+  | 'bulbasaur'
+  | 'charmander'
+  | 'squirtle'
+  | 'kirby';
+
+@Directive({
+  selector: '[nes-character]',
+  host: {
+    '[class]': "character ? 'nes-' + character : ''",
+  },
+})
+export class NesCharacterDirective {
+  @Input() character?: NesCharacter;
+}

lib/src/character/character.module.ts

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

lib/src/character/index.ts

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

lib/src/index.ts

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './badge';
 export * from './balloon';
 export * from './button';
+export * from './character';
 export * from './checkbox';
 export * from './container';
 export * from './dialog';

lib/src/nes.module.ts

@@ -3,6 +3,7 @@ import { NesAvatarModule } from './avatar';
 import { NesBadgeModule } from './badge';
 import { NesBalloonModule } from './balloon';
 import { NesButtonModule } from './button';
+import { NesCharacterModule } from './character';
 import { NesCheckboxModule } from './checkbox';
 import { NesContainerModule } from './container';
 import { NesDialogModule } from './dialog';
@@ -23,6 +24,7 @@ const SHARED_IMPORTS = [
   NesBadgeModule,
   NesBalloonModule,
   NesButtonModule,
+  NesCharacterModule,
   NesCheckboxModule,
   NesContainerModule,
   NesDialogModule,