docs(Dropdown): Realizza la prima versione della documentazione del c…

…omponente Dropdown

ref #45

src/app/app-routing.module.ts

@@ -17,7 +17,8 @@ const routes: Routes = [
     { path: 'radio', loadChildren: 'src/app/radio/radio.module#RadioModule' },
     { path: 'tooltip', loadChildren: 'src/app/tooltip/tooltip.module#TooltipModule' },
     { path: 'button', loadChildren: 'src/app/button/button.module#ButtonModule' },
-    { path: 'badge', loadChildren: 'src/app/badge/badge.module#BadgeModule' }
+    { path: 'badge', loadChildren: 'src/app/badge/badge.module#BadgeModule' },
+    { path: 'dropdown', loadChildren: 'src/app/dropdown/dropdown.module#DropdownModule' },
   ]}
 ];
 

src/app/dropdown/dropdown-example/dropdown-example.component.html

@@ -0,0 +1,108 @@
+<div class="card w-100 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Esempio Dropdown</h4>
+    <p class="card-text" class="example-section">
+      <it-dropdown
+        [color]="color"
+        [label]="label"
+        [dark]="isDark"
+        [fullWidth]="isFullWidth"
+        (onOpen)="onOpenEvent()"
+        (onClose)="onCloseEvent()" 
+        (onToggle)="onToggleEvent()">
+        <it-dropdown-header>Header 1</it-dropdown-header>
+        <it-dropdown-divider></it-dropdown-divider>
+        <it-dropdown-item *ngFor="let item of items"
+          [link]="item.link"
+          [active]="item.active"
+          [disabled]="item.disabled"
+          [large]="item.large"
+          [icon]="item.icon"
+          [iconPosition]="item.iconPosition">
+          {{item.text}}
+        </it-dropdown-item>
+      </it-dropdown>
+    </p>
+
+    <p class="card-text" class="example-section">
+      Open: {{openTime}}
+    </p>
+
+    <p class="card-text" class="example-section">
+      Close: {{closeTime}}
+    </p>
+
+    <p class="card-text" class="example-section">
+      Toggle: {{toggleTime}}
+    </p>
+
+    <div class="row">
+      <div class="form-check col-3">
+        <h5>Opzioni</h5>
+        <it-checkbox [(ngModel)]="isFullWidth" label="Disposizione orizzontale" id="fullwidth-checkbox"></it-checkbox>
+        <it-checkbox [(ngModel)]="isDark" label="Sfondo scuro" id="darktheme-checkbox"></it-checkbox>
+      </div>
+      <div class="form-check col-2">
+        <h5>Testo</h5>
+        <it-radio-group [(ngModel)]="label">
+          <it-radio-button id="radio-click" name="clickMe" value="Click me" label="Click me"></it-radio-button>
+          <it-radio-button id="radio-check" name="check" value="Check" label="Check"></it-radio-button>
+          <it-radio-button id="radio-hello" name="hello" value="Hello world!" label="Hello world!"></it-radio-button>
+        </it-radio-group>
+      </div>
+      <div class="form-check col-7">
+        <h5>Colorazione</h5>
+        <it-radio-group [(ngModel)]="color">
+          <div class="row">
+            <div class="form-check col-5">
+              <it-radio-button id="radio-none" name="none" value="" label="None"></it-radio-button>
+              <it-radio-button id="radio-primary" name="primary" value="primary" label="Primary"></it-radio-button>
+              <it-radio-button id="radio-secondary" name="secondary" value="secondary" label="Secondary"></it-radio-button>
+            </div>
+            <div class="form-check col-4">
+              <it-radio-button id="radio-success" name="success" value="success" label="Success"></it-radio-button>
+              <it-radio-button id="radio-warning" name="warning" value="warning" label="Warning"></it-radio-button>
+              <it-radio-button id="radio-danger" name="danger" value="danger" label="Danger"></it-radio-button>
+            </div>
+            <div class="form-check col-3">
+              <it-radio-button id="radio-info" name="info" value="info" label="Info"></it-radio-button>
+              <it-radio-button id="radio-light" name="light" value="light" label="Light"></it-radio-button>
+              <it-radio-button id="radio-dark" name="dark" value="dark" label="Dark"></it-radio-button>
+            </div>
+          </div>
+        </it-radio-group>
+      </div>
+    </div>
+
+    <hr/>
+
+    <div *ngFor="let item of items; let i = index">
+      <h4>Item #{{i + 1}}</h4>
+      <div class="row">
+        <div class="form-check col-4">
+          <h5>Opzioni</h5>
+          <it-checkbox [(ngModel)]="item.active" label="Attivo" id="active-checkbox"></it-checkbox>
+          <it-checkbox [(ngModel)]="item.disabled" label="Disabilitato" id="disabled-checkbox"></it-checkbox>
+          <it-checkbox [(ngModel)]="item.large" label="Grande" id="large-checkbox"></it-checkbox>
+        </div>
+        <div class="form-check col-4">
+          <h5>Posizione Icona</h5>
+          <it-radio-group [(ngModel)]="item.iconPosition">
+            <it-radio-button id="radio-left" name="left" value="left" label="Sinistra"></it-radio-button>
+            <it-radio-button id="radio-right" name="right" value="right" label="Destra"></it-radio-button>
+          </it-radio-group>
+        </div>
+        <div class="form-check col-4">
+          <h5>Icona</h5>
+          <it-radio-group [(ngModel)]="item.icon">
+            <it-radio-button id="radio-favorite" name="favorite" value="it-favorite" label="Favorite"></it-radio-button>
+            <it-radio-button id="radio-facebook" name="facebook" value="it-facebook" label="Facebook"></it-radio-button>
+            <it-radio-button id="radio-twitter" name="twitter" value="it-twitter" label="Twitter"></it-radio-button>
+            <it-radio-button id="radio-flickr" name="flickr" value="it-flickr" label="Flickr"></it-radio-button>
+          </it-radio-group>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/dropdown/dropdown-example/dropdown-example.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownExampleComponent } from './dropdown-example.component';
+
+describe('DropdownExampleComponent', () => {
+  let component: DropdownExampleComponent;
+  let fixture: ComponentFixture<DropdownExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownExampleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dropdown/dropdown-example/dropdown-example.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { ICON_POSITIONS } from 'projects/design-angular-kit/src/lib/models/IconPosition';
+
+@Component({
+  selector: 'it-dropdown-example',
+  templateUrl: './dropdown-example.component.html',
+  styleUrls: ['./dropdown-example.component.scss']
+})
+export class DropdownExampleComponent implements OnInit {
+  color = '';
+  label = 'Click me';
+  isDark = false;
+  isFullWidth = false;
+  items = [
+    {
+      link: 'https://www.google.com', active: false,
+      disabled: false, large: true,
+      icon: 'it-favorite', iconPosition: 'right',
+      text: 'Item 1'
+    },
+    {
+      link: 'https://www.google.com', active: false,
+      disabled: true, large: false,
+      icon: 'it-facebook', iconPosition: 'right',
+      text: 'Item 2'
+    },
+    {
+      link: 'https://www.google.com', active: true,
+      disabled: false, large: true,
+      icon: 'it-twitter', iconPosition: 'right',
+      text: 'Item 3'
+    },
+  ];
+
+  openTime = '';
+  closeTime = '';
+  toggleTime = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onOpenEvent() {
+    this.openTime = (new Date()).toISOString();
+  }
+
+  onCloseEvent() {
+    this.closeTime = (new Date()).toISOString();
+  }
+
+  onToggleEvent() {
+    this.toggleTime = (new Date()).toISOString();
+  }
+
+}

src/app/dropdown/dropdown-examples/dropdown-examples.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownExamplesComponent } from './dropdown-examples.component';
+
+describe('DropdownExamplesComponent', () => {
+  let component: DropdownExamplesComponent;
+  let fixture: ComponentFixture<DropdownExamplesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownExamplesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dropdown/dropdown-examples/dropdown-examples.component.tpl

@@ -0,0 +1,14 @@
+{% set html %}
+  {% include "../dropdown-example/dropdown-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../dropdown-example/dropdown-example.component.ts" %}
+{% endset %}
+
+<it-dropdown-example></it-dropdown-example>
+
+<it-source-display 
+    html="{$ html | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}"
+    typescript="{$ typescript | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}">
+</it-source-display>

src/app/dropdown/dropdown-examples/dropdown-examples.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-dropdown-examples',
+  templateUrl: './dropdown-examples.component.html',
+  styleUrls: ['./dropdown-examples.component.scss']
+})
+export class DropdownExamplesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/dropdown/dropdown-index/dropdown-index.component.html

@@ -0,0 +1,82 @@
+<h1>Dropdown</h1>
+<h5>Il componente Dropdown per menù a tendina contestuali</h5>
+
+<ul class="nav nav-tabs" id="dropdown-tab" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="dropdown-description-tab" data-toggle="tab" href="#dropdown-description-tab-content" role="tab" aria-controls="dropdown-description-tab-content" aria-selected="true">Descrizione</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="dropdown-api-tab" data-toggle="tab" href="#dropdown-api-tab-content" role="tab" aria-controls="dropdown-api-tab-content" aria-selected="false">API</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="dropdown-examples-tab" data-toggle="tab" href="#dropdown-examples-tab-content" role="tab" aria-controls="dropdown-examples-tab-content" aria-selected="false">Esempi</a>
+  </li>
+</ul>
+<div class="tab-content" id="dropdown-content-tab">
+  <div class="tab-pane p-3 fade show active" id="dropdown-description-tab-content" role="tabpanel" aria-labelledby="dropdown-description-tab-content">
+    <div [innerHTML]="component.description"></div>
+  </div>
+  <div class="tab-pane p-3 fade" id="dropdown-api-tab-content" role="tabpanel" aria-labelledby="dropdown-api-tab-content">
+    <!-- TODO: da spostare in una componente ad hoc -->
+    <h2>Dropdown</h2>
+    <div *ngIf="component.inputsClass.length > 0">
+      <h3>Input</h3>
+      <div *ngFor="let input of component.inputsClass">
+        <table class="table table-bordered table-sm">
+          <tbody>
+            <tr>
+              <td style="width: 20%">
+                <code>{{input.name}}</code>
+              </td>
+              <td style="width: 80%">
+                <p>
+                  <em>Tipo: </em>
+                  <code>{{input.type}}</code>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td class="col-md-2" colspan="2" [innerHTML]="input.description"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div *ngIf="component.outputsClass.length > 0">
+      <h3>Output</h3>
+      <!-- TODO: usare lo stesso componente di input -->
+    </div>
+
+      <h2>Dropdown Item</h2>
+    <div *ngIf="subcomponent.inputsClass.length > 0">
+      <h3>Input</h3>
+      <div *ngFor="let input of subcomponent.inputsClass">
+        <table class="table table-bordered table-sm">
+          <tbody>
+            <tr>
+              <td style="width: 20%">
+                <code>{{input.name}}</code>
+              </td>
+              <td style="width: 80%">
+                <p>
+                  <em>Tipo: </em>
+                  <code>{{input.type}}</code>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td class="col-md-2" colspan="2" [innerHTML]="input.description"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div *ngIf="subcomponent.outputsClass.length > 0">
+      <h3>Output</h3>
+      <!-- TODO: usare lo stesso componente di input -->
+    </div>
+  </div>
+  <div class="tab-pane p-3 fade" id="dropdown-examples-tab-content" role="tabpanel" aria-labelledby="dropdown-examples-tab-content">
+    <it-dropdown-examples></it-dropdown-examples>
+  </div>
+</div>

src/app/dropdown/dropdown-index/dropdown-index.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownIndexComponent } from './dropdown-index.component';
+
+describe('DropdownIndexComponent', () => {
+  let component: DropdownIndexComponent;
+  let fixture: ComponentFixture<DropdownIndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownIndexComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dropdown/dropdown-index/dropdown-index.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import * as Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-dropdown-index',
+  templateUrl: './dropdown-index.component.html',
+  styleUrls: ['./dropdown-index.component.scss']
+})
+export class DropdownIndexComponent implements OnInit {
+
+  component: any;
+  subcomponent: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'DropdownComponent');
+    this.subcomponent = (<any>Documentation).components.find(component => component.name === 'DropdownItemComponent');
+  }
+
+  ngOnInit() {
+  }
+
+}