docs: icon component

src/app/app-routing.module.ts

@@ -38,6 +38,7 @@ const routes: Routes = [
     { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
     { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
     { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
+    { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
   ]}
 ];
 

src/app/icon/icon-alignment-example/icon-alignment-example.component.html

@@ -0,0 +1,8 @@
+<h3>Allineamenti</h3>
+<div class="bd-example">
+  <div style="line-height: 4em;">
+    <it-icon name="check-circle" class="me-2" svgClass="bg-light align-bottom"></it-icon>
+    <it-icon name="check-circle" class="me-2" svgClass="bg-light align-middle"></it-icon>
+    <it-icon name="check-circle" svgClass="bg-light align-top"></it-icon>
+  </div>
+</div>

src/app/icon/icon-alignment-example/icon-alignment-example.component.spec.ts

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

src/app/icon/icon-alignment-example/icon-alignment-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-icon-alignment-example',
+  templateUrl: './icon-alignment-example.component.html'
+})
+export class IconAlignmentExampleComponent {
+
+}

src/app/icon/icon-color-example/icon-color-example.component.html

@@ -0,0 +1,12 @@
+<h3>Colori</h3>
+<div class="bd-example">
+  <div class="d-flex gap-1 align-items-center">
+    <it-icon name="check-circle" class="bg-light" color="primary"></it-icon>
+    <it-icon name="check-circle" class="bg-light" color="secondary"></it-icon>
+    <it-icon name="check-circle" class="bg-light" color="success"></it-icon>
+    <it-icon name="check-circle" class="bg-light" color="warning"></it-icon>
+    <it-icon name="check-circle" class="bg-light" color="danger"></it-icon>
+    <it-icon name="check-circle" class="bg-dark" color="light"></it-icon>
+    <it-icon name="check-circle" class="bg-dark" color="white"></it-icon>
+  </div>
+</div>

src/app/icon/icon-color-example/icon-color-example.component.spec.ts

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

src/app/icon/icon-color-example/icon-color-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-icon-color-example',
+  templateUrl: './icon-color-example.component.html'
+})
+export class IconColorExampleComponent {
+
+}

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

@@ -0,0 +1,6 @@
+<div class="bd-example">
+
+  <it-icon name="tool"></it-icon>
+
+  <pre class="mt-2"><code [innerText]="exampleText"></code></pre>
+</div>

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

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

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

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'it-icon-example',
+  templateUrl: './icon-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconExampleComponent {
+  exampleText: string = '<it-icon name="tool"></it-icon>';
+}

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

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

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

@@ -0,0 +1,65 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../icon-example/icon-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../icon-example/icon-example.component.ts" %}
+{% endset %}
+
+<it-icon-example></it-icon-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
+
+
+{% set htmlSize %}
+  {% include "../icon-size-example/icon-size-example.component.html" %}
+{% endset %}
+
+{% set typescriptSize %}
+  {% include "../icon-size-example/icon-size-example.component.ts" %}
+{% endset %}
+
+<it-icon-size-example></it-icon-size-example>
+
+<it-source-display html="{$ sanitize(htmlSize) $}" typescript="{$ sanitize(typescriptSize) $}"></it-source-display>
+
+
+{% set htmlColor %}
+  {% include "../icon-color-example/icon-color-example.component.html" %}
+{% endset %}
+
+{% set typescriptColor %}
+  {% include "../icon-color-example/icon-color-example.component.ts" %}
+{% endset %}
+
+<it-icon-color-example></it-icon-color-example>
+
+<it-source-display html="{$ sanitize(htmlColor) $}" typescript="{$ sanitize(typescriptColor) $}"></it-source-display>
+
+
+{% set htmlAlignment %}
+  {% include "../icon-alignment-example/icon-alignment-example.component.html" %}
+{% endset %}
+
+{% set typescriptAlignment %}
+  {% include "../icon-alignment-example/icon-alignment-example.component.ts" %}
+{% endset %}
+
+<it-icon-alignment-example></it-icon-alignment-example>
+
+<it-source-display html="{$ sanitize(htmlAlignment) $}" typescript="{$ sanitize(typescriptAlignment) $}"></it-source-display>
+
+
+{% set htmlList %}
+  {% include "../icon-list-example/icon-list-example.component.html" %}
+{% endset %}
+
+{% set typescriptList %}
+  {% include "../icon-list-example/icon-list-example.component.ts" %}
+{% endset %}
+
+<it-icon-list-example></it-icon-list-example>
+
+<it-source-display html="{$ sanitize(htmlList) $}" typescript="{$ sanitize(typescriptList) $}"></it-source-display>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-icon-examples',
+  templateUrl: './icon-examples.component.html'
+})
+export class IconExamplesComponent {
+
+}

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

@@ -0,0 +1,12 @@
+<h1 class="bd-title">Icone</h1>
+<p class="bd-lead"></p>
+
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-icon-examples></it-icon-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <h3>IconComponent</h3>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>

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

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

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-icon-index',
+  templateUrl: './icon-index.component.html'
+})
+export class IconIndexComponent {
+
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'IconComponent');
+  }
+}

src/app/icon/icon-list-example/icon-list-example.component.html

@@ -0,0 +1,17 @@
+<h3>Lista delle icone disponibili</h3>
+<div class="bd-example">
+  <ng-container *ngFor="let group of iconGroups">
+    <h4 *ngIf="group.name" class="mt-4">{{group.name}}</h4>
+
+    <div class="row">
+      <div class="col-12 col-md-6 col-lg-4 mt-2" *ngFor="let icon of group.icons">
+        <div class="d-flex">
+
+          <it-icon [name]="icon"></it-icon>
+          <div class="ms-3">{{icon}}</div>
+
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>

src/app/icon/icon-list-example/icon-list-example.component.spec.ts

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

src/app/icon/icon-list-example/icon-list-example.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconName, IconNameArray } from '../../../../projects/design-angular-kit/src/lib/interfaces/icon';
+
+@Component({
+  selector: 'it-icon-list-example',
+  templateUrl: './icon-list-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconListExampleComponent {
+
+  iconGroups: Array<{ name?: string, icons: Readonly<Array<IconName>> }>;
+
+  constructor() {
+    const indexFile = IconNameArray.indexOf('file');
+    const indexPlatform = IconNameArray.indexOf('behance');
+    const indexExtra = IconNameArray.indexOf('designers-italia');
+
+    this.iconGroups = [
+      {
+        icons: indexFile >= 0 ? IconNameArray.slice(0, indexFile) : []
+      },
+      {
+        name: 'File',
+        icons: indexFile >= 0 && indexPlatform >= 0 ? IconNameArray.slice(indexFile, indexPlatform) : []
+      },
+      {
+        name: 'Piattaforme',
+        icons: indexExtra >= 0 && indexPlatform >= 0 ? IconNameArray.slice(indexPlatform, indexExtra) : []
+      },
+      {
+        name: 'Extra',
+        icons: indexExtra >= 0 ? IconNameArray.slice(indexExtra, IconNameArray.length) : []
+      }
+    ];
+  }
+}

src/app/icon/icon-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { IconIndexComponent } from './icon-index/icon-index.component';
+
+const routes: Routes = [
+  { path: '', component: IconIndexComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class IconRoutingModule {
+}