feat(ngx-material-faq): added the library source code

package.json

@@ -0,0 +1,158 @@
+{
+  "name": "ngx-material-faq",
+  "description": "Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List",
+  "version": "0.0.1",
+  "homepage": "https://github.com/anthonynahas/ngx-material-faq",
+  "author": {
+    "name": "anthonynahas",
+    "url": "https://github.com/anthonynahas"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/anthonynahas/ngx-material-faq.git"
+  },
+  "license": "MIT",
+  "keywords": [
+    "ngx",
+    " angular",
+    " library",
+    " faq",
+    " material",
+    " asking",
+    " questions",
+    " answers"
+  ],
+  "bugs": {
+    "url": "https://github.com/anthonynahas/ngx-material-faq/issues"
+  },
+  "private": true,
+  "scripts": {
+    "start": "gulp build",
+    "test": " gulp test",
+    "demo": " gulp build:demo",
+    "check-travis": " travis-status --repo=anthonynahas/ngx-material-faq --branch=master --fail-pending || echo 'Not yet passing'"
+  },
+  "dependencies": {
+    "@angular/animations": "^5.2.10",
+    "@angular/cdk": "^5.2.5",
+    "@angular/common": "^5.2.10",
+    "@angular/core": "^5.2.10",
+    "@angular/flex-layout": "^5.0.0-beta.14",
+    "@angular/forms": "^5.2.10",
+    "@angular/material": "^5.2.5"
+  },
+  "devDependencies": {
+    "@angular/compiler": "5.2.10",
+    "@angular/platform-server": "5.2.10",
+    "@angular/platform-browser": "5.2.10",
+    "@angular/platform-browser-dynamic": "5.2.10",
+    "@angular/compiler-cli": "5.2.10",
+    "jest-cli": "^22.4.3",
+    "zone.js": "0.8.14",
+    "rxjs": "5.5.2",
+    "tslint": "5.7.0",
+    "gulp-tslint": "8.1.1",
+    "typescript": "2.4.2",
+    "awesome-typescript-loader": "3.3.0",
+    "codelyzer": "4.0.0",
+    "@angular/animations": "5.2.10",
+    "@types/jest": "21.1.9",
+    "jest": "22.0.4",
+    "jest-preset-angular": "5.0.0",
+    "@types/node": "8.0.44",
+    "@types/lodash": "4.14.92",
+    "angular-cli-ghpages": "0.5.1",
+    "angular2-template-loader": "0.6.2",
+    "@compodoc/gulp-compodoc": "0.0.8",
+    "commitplease": "3.1.0",
+    "conventional-github-releaser": "1.1.13",
+    "core-js": "2.5.1",
+    "del": "3.0.0",
+    "gulp": "3.9.1",
+    "gulp-bump": "2.8.0",
+    "gulp-conventional-changelog": "1.1.6",
+    "gulp-coveralls": "0.1.4",
+    "gulp-file": "0.3.0",
+    "gulp-git": "2.4.2",
+    "gulp-inline-ng2-template": "4.0.0",
+    "gulp-hub": "0.8.0",
+    "gulp-util": "3.0.8",
+    "html-loader": "0.5.1",
+    "is-docker": "1.1.0",
+    "pump": "1.0.2",
+    "rollup": "0.57.0",
+    "rollup-plugin-uglify": "3.0.0",
+    "rollup-plugin-sourcemaps": "0.4.2",
+    "rollup-plugin-commonjs": "9.1.0",
+    "rollup-plugin-node-resolve": "3.2.0",
+    "run-sequence": "2.2.0",
+    "autoprefixer": "7.1.5",
+    "cssnano": "3.10.0",
+    "sass-loader": "6.0.6",
+    "css-loader": "0.28.7",
+    "to-string-loader": "1.1.5",
+    "node-sass": "4.5.3",
+    "postcss": "6.0.13",
+    "postcss-strip-inline-comments": "0.1.5",
+    "raw-loader": "0.5.1",
+    "source-map-loader": "0.2.2",
+    "travis-status": "2.0.0",
+    "lodash": "4.17.4",
+    "yargs": "10.0.3"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "roots": [
+      "<rootDir>/src/"
+    ],
+    "coverageReporters": [
+      "lcov",
+      "text"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/config",
+      "/dist/"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/config/setupJest.ts"
+  },
+  "greenkeeper": {
+    "ignore": [
+      "@angular/core",
+      "@angular/common",
+      "@angular/compiler",
+      "@angular/platform-server",
+      "@angular/platform-browser",
+      "@angular/platform-browser-dynamic",
+      "@angular/compiler-cli",
+      "zone.js",
+      "rxjs",
+      "tslint",
+      "gulp-tslint",
+      "typescript",
+      "awesome-typescript-loader",
+      "codelyzer",
+      "@angular/animations",
+      "@types/jasmine"
+    ]
+  },
+  "commitplease": {
+    "style": "angular",
+    "types": [
+      "feat",
+      "fix",
+      "docs",
+      "style",
+      "refactor",
+      "perf",
+      "test",
+      "chore",
+      "revert",
+      "demo"
+    ],
+    "scope": "\\S+.*"
+  }
+}

src/index.ts

@@ -0,0 +1 @@
+export * from './module/ngx-material-faq.module';

src/module/components/ngx-material-faq-admin/ngx-material-faq-admin.component.html

@@ -0,0 +1,22 @@
+<mat-toolbar color="primary">{{title}}</mat-toolbar>
+<mat-card>
+  <mat-card-content fxLayout="column">
+    <mat-form-field class="full-width" appearance="outline">
+      <mat-label>The question</mat-label>
+      <input matInput [(ngModel)]="question">
+      <mat-hint>Add here the question of your clients</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field class="full-width" appearance="outline">
+      <mat-label>The answer</mat-label>
+      <textarea matInput [(ngModel)]="answer"></textarea>
+      <mat-hint>Please type an appropriate answer here to the above question</mat-hint>
+    </mat-form-field>
+  </mat-card-content>
+
+  <mat-card-actions fxLayoutAlign="end">
+    <button mat-fab color="primary" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

src/module/components/ngx-material-faq-admin/ngx-material-faq-admin.component.scss

@@ -0,0 +1,7 @@
+.full-width {
+  width: 100%
+}
+
+.mat-form-field {
+  margin: 0.8rem 0 0.8rem 0;
+}

src/module/components/ngx-material-faq-admin/ngx-material-faq-admin.component.spec.ts

@@ -0,0 +1,46 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {DebugElement} from '@angular/core';
+
+import {NgxMaterialFaqAdminComponent} from './ngx-material-faq-admin.component';
+import {MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatInputModule, MatToolbarModule} from '@angular/material';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('NgxMaterialFaqComponent', function () {
+  let de: DebugElement;
+  let comp: NgxMaterialFaqAdminComponent;
+  let fixture: ComponentFixture<NgxMaterialFaqAdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatCardModule,
+        MatToolbarModule,
+        MatButtonModule,
+        MatInputModule,
+        MatIconModule,
+        MatExpansionModule,
+      ],
+      declarations: [NgxMaterialFaqAdminComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxMaterialFaqAdminComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('p.description'));
+  });
+
+  it('should create component', () => expect(comp).toBeDefined());
+
+  it('should have expected <p> text', () => {
+    fixture.detectChanges();
+    // const p = de.nativeElement;
+    // expect(p.textContent).toEqual('Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List');
+  });
+});

src/module/components/ngx-material-faq-admin/ngx-material-faq-admin.component.ts

@@ -0,0 +1,33 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FaqItem} from '../../faq.item';
+
+@Component({
+  selector: 'ngx-material-faq-admin',
+  templateUrl: './ngx-material-faq-admin.component.html',
+  styleUrls: ['./ngx-material-faq-admin.component.scss']
+})
+export class NgxMaterialFaqAdminComponent {
+
+  @Input()
+  title = 'Admin';
+
+  @Output()
+  onFAQItemAdded: EventEmitter<FaqItem> = new EventEmitter<FaqItem>();
+
+  question: string;
+  answer: string;
+
+  reset() {
+    this.question = this.answer = undefined;
+  }
+
+  add(): void {
+    const faqItem: FaqItem = {
+      question: this.question,
+      answer: this.answer
+    }
+    this.onFAQItemAdded.emit(faqItem);
+    this.reset();
+  }
+
+}

src/module/components/ngx-material-faq/ngx-material-faq.component.html

@@ -0,0 +1,8 @@
+<mat-toolbar color="primary">{{title}}</mat-toolbar>
+<mat-accordion [displayMode]="displayMode" [multi]="multi"
+               class="faq-container">
+  <mat-expansion-panel *ngFor="let faqItem of faqList">
+    <mat-expansion-panel-header>{{faqItem.question}}</mat-expansion-panel-header>
+    <p>{{faqItem.answer}}</p>
+  </mat-expansion-panel>
+</mat-accordion>

src/module/components/ngx-material-faq/ngx-material-faq.component.scss

@@ -0,0 +1,3 @@
+.faq-container {
+  //width: 500px;
+}

src/module/components/ngx-material-faq/ngx-material-faq.component.spec.ts

@@ -0,0 +1,37 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {DebugElement} from '@angular/core';
+
+import {NgxMaterialFaqComponent} from './ngx-material-faq.component';
+import {MatExpansionModule, MatToolbarModule} from '@angular/material';
+
+describe('NgxMaterialFaqComponent', function () {
+  let de: DebugElement;
+  let comp: NgxMaterialFaqComponent;
+  let fixture: ComponentFixture<NgxMaterialFaqComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatToolbarModule,
+        MatExpansionModule
+      ],
+      declarations: [NgxMaterialFaqComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxMaterialFaqComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('p.description'));
+  });
+
+  it('should create component', () => expect(comp).toBeDefined());
+
+  it('should have expected <p> text', () => {
+    fixture.detectChanges();
+    // const p = de.nativeElement;
+    // expect(p.textContent).toEqual('Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List');
+  });
+});

src/module/components/ngx-material-faq/ngx-material-faq.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+import {FaqItem} from '../../faq.item';
+
+@Component({
+  selector: 'ngx-material-faq',
+  templateUrl: './ngx-material-faq.component.html',
+  styleUrls: ['./ngx-material-faq.component.scss']
+})
+export class NgxMaterialFaqComponent {
+
+  @Input()
+  title = 'FAQ';
+
+  @Input()
+  multi = false;
+
+  @Input()
+  displayMode = 'default'; // or flat
+
+  @Input()
+  faqList: FaqItem[] = [];
+
+}

src/module/faq.item.ts

@@ -0,0 +1,5 @@
+export interface FaqItem {
+  id?: string;
+  question: string;
+  answer: string;
+}