feat(design): add prefix/suffix directives to @daffodil/design

libs/design/src/core/prefix-suffix/prefix-suffix.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+
+import { DaffPrefixDirective } from './prefix.directive';
+import { DaffSuffixDirective } from './suffix.directive';
+
+@NgModule({
+  imports: [],
+  exports: [
+    DaffPrefixDirective,
+    DaffSuffixDirective
+  ],
+  declarations: [
+    DaffPrefixDirective,
+    DaffSuffixDirective
+  ]
+})
+export class DaffPrefixSuffixModule {}

libs/design/src/core/prefix-suffix/prefix.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, HostBinding } from '@angular/core';
+
+/**
+ *
+ * Prefix can be used to place content before another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+@Directive({
+  selector: '[daffPrefix]'
+})
+
+export class DaffPrefixDirective {
+
+  @HostBinding('class.daff-prefix') class = true;
+}

libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts

@@ -0,0 +1,9 @@
+import { DaffPrefixDirective } from '../prefix.directive';
+
+/**
+ * An interface enforcing that a component will manage a given DaffPrefixDirective.
+ */
+export interface DaffPrefixable {
+
+  _prefix: DaffPrefixDirective;
+}

libs/design/src/core/prefix-suffix/prefixable/prefixable.spec.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { daffPrefixableMixin } from './prefixable';
+import { DaffPrefixSuffixModule } from '../prefix-suffix.module';
+import { DaffPrefixDirective } from '../prefix.directive';
+
+class PrefixableComponentBase {}
+
+const _prefixableComponentBase = daffPrefixableMixin(PrefixableComponentBase);
+
+@Component({
+  selector: 'daff-prefixable',
+  template: '<ng-content></ng-content>'
+})
+class PrefixableComponent extends _prefixableComponentBase {}
+
+@Component({
+  template: '<daff-prefixable><div daffPrefix></div></daff-prefixable>'
+})
+class WrapperComponent {}
+
+
+describe('daffPrefixableMixin', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let wrapper: WrapperComponent;
+  let prefixableComponent: PrefixableComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        DaffPrefixSuffixModule
+      ],
+      declarations: [
+        WrapperComponent,
+        PrefixableComponent
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    fixture.detectChanges();
+
+    prefixableComponent = fixture.debugElement.query(By.css('daff-prefixable')).componentInstance;
+  });
+
+  it('should add a _prefix property to an existing class', () => {
+    expect('_prefix' in prefixableComponent).toBeTruthy();
+  });
+
+  it('should make the _prefix property the daffPrefix directive instance', () => {
+    expect(prefixableComponent._prefix).toEqual(jasmine.any(DaffPrefixDirective));
+  });
+});

libs/design/src/core/prefix-suffix/prefixable/prefixable.ts

@@ -0,0 +1,23 @@
+import { ContentChild } from '@angular/core';
+import { DaffPrefixDirective } from '../prefix.directive';
+import { Constructor } from '../../constructor';
+
+
+/**
+ * A mixin for giving a form control component a prefixed symbol.
+ *
+ * This should be a trait, but typescript only supports mixins.
+ * See: https://github.com/Microsoft/TypeScript/issues/311
+ */
+export function daffPrefixableMixin<T extends Constructor>(Base: T) {
+  class Prefixable extends Base {
+
+    @ContentChild(DaffPrefixDirective, { static: true}) _prefix: DaffPrefixDirective;
+
+    constructor(...args: any[]) {
+      super(...args);
+    }
+  }
+
+  return Prefixable;
+}

libs/design/src/core/prefix-suffix/public_api.ts

@@ -0,0 +1,7 @@
+export * from './prefix-suffix.module';
+export * from './prefix.directive';
+export * from './suffix.directive';
+export { daffSuffixableMixin } from './suffixable/suffixable';
+export { DaffSuffixable } from './suffixable/suffixable-interface';
+export { DaffPrefixable } from './prefixable/prefixable-interface';
+export { daffPrefixableMixin } from './prefixable/prefixable';

libs/design/src/core/prefix-suffix/suffix.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, HostBinding } from '@angular/core';
+
+/**
+ *
+ * Prefix can be used to place content after another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+@Directive({
+  selector: '[daffSuffix]',
+})
+
+export class DaffSuffixDirective {
+
+  @HostBinding('class.daff-suffix') class = true;
+}

libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts

@@ -0,0 +1,9 @@
+import { DaffSuffixDirective } from '../suffix.directive';
+
+/**
+ * An interface enforcing that a component will manage a given DaffSuffixDirective.
+ */
+export interface DaffSuffixable {
+
+  _suffix: DaffSuffixDirective;
+}

libs/design/src/core/prefix-suffix/suffixable/suffixable.spec.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { daffSuffixableMixin } from './suffixable';
+import { DaffPrefixSuffixModule } from '../prefix-suffix.module';
+import { DaffSuffixDirective } from '../suffix.directive';
+
+class SuffixableComponentBase {}
+
+const _suffixableComponentBase = daffSuffixableMixin(SuffixableComponentBase);
+
+@Component({
+  selector: 'daff-suffixable',
+  template: '<ng-content></ng-content>'
+})
+class SuffixableComponent extends _suffixableComponentBase {}
+
+@Component({
+  template: '<daff-suffixable><div daffSuffix></div></daff-suffixable>'
+})
+class WrapperComponent {}
+
+
+describe('daffSuffixableMixin', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let wrapper: WrapperComponent;
+  let suffixableComponent: SuffixableComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        DaffPrefixSuffixModule
+      ],
+      declarations: [
+        WrapperComponent,
+        SuffixableComponent
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    fixture.detectChanges();
+
+    suffixableComponent = fixture.debugElement.query(By.css('daff-suffixable')).componentInstance;
+  });
+
+  it('should add a _suffix property to an existing class', () => {
+    expect('_suffix' in suffixableComponent).toBeTruthy();
+  });
+
+  it('should make the _suffix property the daffPrefix directive instance', () => {
+    expect(suffixableComponent._suffix).toEqual(jasmine.any(DaffSuffixDirective));
+  });
+});

libs/design/src/core/prefix-suffix/suffixable/suffixable.ts

@@ -0,0 +1,22 @@
+import { ContentChild } from '@angular/core';
+import { DaffSuffixDirective } from '../suffix.directive';
+import { Constructor } from '../../constructor';
+
+/**
+ * A mixin for giving a form control component a prefixed symbol.
+ *
+ * This should be a trait, but typescript only supports mixins.
+ * See: https://github.com/Microsoft/TypeScript/issues/311
+ */
+export function daffSuffixableMixin<T extends Constructor>(Base: T) {
+  class Suffixable extends Base {
+
+    @ContentChild(DaffSuffixDirective, { static: true}) _suffix: DaffSuffixDirective;
+
+    constructor(...args: any[]) {
+      super(...args);
+    }
+  }
+
+  return Suffixable;
+}