From 561091aee0ed0115f2dfdeafb91c02788bb67096 Mon Sep 17 00:00:00 2001
From: Cristian Borelli <67112829+cri99@users.noreply.github.com>
Date: Mon, 27 Feb 2023 12:35:42 +0100
Subject: [PATCH] chore(docs): add docs for the select component

Co-authored-by: Antonino Bonanno <nino.bonanno96@gmail.com>
Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
---
 .../lib/abstracts/abstract-form-component.ts  |  9 +++-
 src/app/app-routing.module.ts                 |  1 +
 .../select-disabled-example.component.html    | 12 +++++
 .../select-disabled-example.component.scss    |  0
 .../select-disabled-example.component.ts      | 31 ++++++++++++
 .../select-example.component.html             | 20 ++++++++
 .../select-example.component.scss             |  0
 .../select-example.component.ts               | 27 ++++++++++
 .../select-examples.component.scss            |  0
 .../select-examples.component.tpl             | 48 ++++++++++++++++++
 .../select-examples.component.ts              | 15 ++++++
 .../select-group-example.component.html       | 20 ++++++++
 .../select-group-example.component.scss       |  0
 .../select-group-example.component.ts         | 49 +++++++++++++++++++
 .../select-index/select-index.component.html  | 11 +++++
 .../select-index/select-index.component.scss  |  0
 .../select-index/select-index.component.ts    | 16 ++++++
 src/app/select/select-routing.module.ts       | 13 +++++
 src/app/select/select.module.ts               | 30 ++++++++++++
 src/assets/table-of-content.json              |  4 ++
 20 files changed, 305 insertions(+), 1 deletion(-)
 create mode 100644 src/app/select/select-disabled-example/select-disabled-example.component.html
 create mode 100644 src/app/select/select-disabled-example/select-disabled-example.component.scss
 create mode 100644 src/app/select/select-disabled-example/select-disabled-example.component.ts
 create mode 100644 src/app/select/select-example/select-example.component.html
 create mode 100644 src/app/select/select-example/select-example.component.scss
 create mode 100644 src/app/select/select-example/select-example.component.ts
 create mode 100644 src/app/select/select-examples/select-examples.component.scss
 create mode 100644 src/app/select/select-examples/select-examples.component.tpl
 create mode 100644 src/app/select/select-examples/select-examples.component.ts
 create mode 100644 src/app/select/select-group-example/select-group-example.component.html
 create mode 100644 src/app/select/select-group-example/select-group-example.component.scss
 create mode 100644 src/app/select/select-group-example/select-group-example.component.ts
 create mode 100644 src/app/select/select-index/select-index.component.html
 create mode 100644 src/app/select/select-index/select-index.component.scss
 create mode 100644 src/app/select/select-index/select-index.component.ts
 create mode 100644 src/app/select/select-routing.module.ts
 create mode 100644 src/app/select/select.module.ts

diff --git a/projects/design-angular-kit/src/lib/abstracts/abstract-form-component.ts b/projects/design-angular-kit/src/lib/abstracts/abstract-form-component.ts
index b359f0fe..d60aa55c 100644
--- a/projects/design-angular-kit/src/lib/abstracts/abstract-form-component.ts
+++ b/projects/design-angular-kit/src/lib/abstracts/abstract-form-component.ts
@@ -11,7 +11,7 @@ import {
   Self
 } from '@angular/core';
 import { AbstractComponent } from './abstract.component';
-import { BooleanInput, isFalseBooleanInput } from '../utils/boolean-input';
+import { BooleanInput, isFalseBooleanInput, isTrueBooleanInput } from '../utils/boolean-input';
 import { Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -33,6 +33,13 @@ export class AbstractFormComponent<T = any> extends AbstractComponent implements
    */
   @Input() validationMode: BooleanInput | 'only-valid' | 'only-invalid' = 'only-invalid';
 
+  /**
+   * Set the disabled state
+   */
+  @Input() set disabled(isDisabled: BooleanInput) {
+    this.setDisabledState(isTrueBooleanInput(isDisabled));
+  }
+
   /**
    * Internal form control
    */
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b3b6c68e..5c6a8bba 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -30,6 +30,7 @@ const routes: Routes = [
     { path: 'callout', loadChildren: () => import('src/app/callout/callout.module').then(m => m.CalloutModule) },
     { path: 'upload', loadChildren: () => import('src/app/upload/upload.module').then(m => m.UploadModule) },
     { path: 'steppers', loadChildren: () => import('src/app/steppers/steppers.module').then(m => m.SteppersModule) },
+    { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
     { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
   ]}
 ];
diff --git a/src/app/select/select-disabled-example/select-disabled-example.component.html b/src/app/select/select-disabled-example/select-disabled-example.component.html
new file mode 100644
index 00000000..bcdf3e68
--- /dev/null
+++ b/src/app/select/select-disabled-example/select-disabled-example.component.html
@@ -0,0 +1,12 @@
+<h3>Select disabilitata</h3>
+<div class="bd-example">
+  <p class="example-section">
+    <it-select
+      id="disabled-select"
+      label="Etichetta"
+      disabled="true"
+      [options]="selectOptions">
+    </it-select>
+  </p>
+</div>
+
diff --git a/src/app/select/select-disabled-example/select-disabled-example.component.scss b/src/app/select/select-disabled-example/select-disabled-example.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/select/select-disabled-example/select-disabled-example.component.ts b/src/app/select/select-disabled-example/select-disabled-example.component.ts
new file mode 100644
index 00000000..8fce6e89
--- /dev/null
+++ b/src/app/select/select-disabled-example/select-disabled-example.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { SelectControlOption } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-select-disabled-example',
+  templateUrl: './select-disabled-example.component.html',
+  styleUrls: ['./select-disabled-example.component.scss']
+})
+export class SelectDisabledExampleComponent {
+  selectOptions: Array<SelectControlOption> = [
+    {
+      selected: true,
+      value: "",
+      text: 'Scegli un\'opzione'
+    },
+    {
+      value: 1,
+      text: 'Opzione 1'
+    },
+    {
+      value: 2,
+      text: 'Opzione 2'
+    },    
+    {
+      value: 3,
+      text: 'Opzione 3'
+    }
+  ];
+  
+  constructor(){}
+}
diff --git a/src/app/select/select-example/select-example.component.html b/src/app/select/select-example/select-example.component.html
new file mode 100644
index 00000000..f74d1c52
--- /dev/null
+++ b/src/app/select/select-example/select-example.component.html
@@ -0,0 +1,20 @@
+<h3>Select</h3>
+<div class="bd-example">
+  <p class="example-section">
+    <it-select 
+      id="default-select"
+      label="Etichetta"
+      [(ngModel)]="selectedValue"
+      [options]="selectOptions">
+    </it-select>
+  </p>
+
+
+  <h4>Risultato</h4>
+
+  <div class="example-section">
+    
+    <div class="example-selected-value">Valore selezionato: {{selectedValue}}</div>
+  </div>
+</div>
+
diff --git a/src/app/select/select-example/select-example.component.scss b/src/app/select/select-example/select-example.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/select/select-example/select-example.component.ts b/src/app/select/select-example/select-example.component.ts
new file mode 100644
index 00000000..84796982
--- /dev/null
+++ b/src/app/select/select-example/select-example.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { SelectControlOption } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-select-example',
+  templateUrl: './select-example.component.html',
+  styleUrls: ['./select-example.component.scss']
+})
+export class SelectExampleComponent {
+  selectedValue: number = 1;
+  selectOptions: Array<SelectControlOption> = [
+    {
+      value: 1,
+      text: 'Opzione 1'
+    },
+    {
+      value: 2,
+      text: 'Opzione 2'
+    },    
+    {
+      value: 3,
+      text: 'Opzione 3'
+    }
+  ];
+  
+  constructor(){}
+}
diff --git a/src/app/select/select-examples/select-examples.component.scss b/src/app/select/select-examples/select-examples.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/select/select-examples/select-examples.component.tpl b/src/app/select/select-examples/select-examples.component.tpl
new file mode 100644
index 00000000..6a27c3bc
--- /dev/null
+++ b/src/app/select/select-examples/select-examples.component.tpl
@@ -0,0 +1,48 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../select-example/select-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../select-example/select-example.component.ts" %}
+{% endset %}
+
+
+<it-select-example></it-select-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}" >
+</it-source-display>
+
+
+
+
+
+{% set disabledHtml %}
+  {% include "../select-disabled-example/select-disabled-example.component.html" %}
+{% endset %}
+
+{% set disabledTypescript %}
+  {% include "../select-disabled-example/select-disabled-example.component.ts" %}
+{% endset %}
+
+<it-select-disabled-example></it-select-disabled-example>
+
+<it-source-display html="{$ sanitize(disabledHtml) $}" typescript="{$ sanitize(disabledTypescript) $}" >
+</it-source-display>
+
+
+
+
+{% set groupHtml %}
+  {% include "../select-group-example/select-group-example.component.html" %}
+{% endset %}
+
+{% set groupTypescript %}
+  {% include "../select-group-example/select-group-example.component.ts" %}
+{% endset %}
+
+<it-select-group-example></it-select-group-example>
+
+<it-source-display html="{$ sanitize(groupHtml) $}" typescript="{$ sanitize(groupTypescript) $}" >
+</it-source-display>
\ No newline at end of file
diff --git a/src/app/select/select-examples/select-examples.component.ts b/src/app/select/select-examples/select-examples.component.ts
new file mode 100644
index 00000000..45f2d286
--- /dev/null
+++ b/src/app/select/select-examples/select-examples.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-select-examples',
+  templateUrl: './select-examples.component.html',
+  styleUrls: ['./select-examples.component.scss']
+})
+export class SelectExamplesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/select/select-group-example/select-group-example.component.html b/src/app/select/select-group-example/select-group-example.component.html
new file mode 100644
index 00000000..dad1023c
--- /dev/null
+++ b/src/app/select/select-group-example/select-group-example.component.html
@@ -0,0 +1,20 @@
+<h3>Select con gruppi</h3>
+<div class="bd-example">
+  <p class="example-section">
+    <it-select 
+      id = "group-select"
+      label="Etichetta"
+      [(ngModel)]="selectedValue"
+      [groups]="selectGroups"
+      [options]="selectOptions">
+    </it-select>
+  </p>
+
+
+  <h4>Risultato</h4>
+
+  <div class="example-section">
+    <div class="example-selected-value">Valore selezionato: {{selectedValue}}</div>
+  </div>
+</div>
+
diff --git a/src/app/select/select-group-example/select-group-example.component.scss b/src/app/select/select-group-example/select-group-example.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/select/select-group-example/select-group-example.component.ts b/src/app/select/select-group-example/select-group-example.component.ts
new file mode 100644
index 00000000..32054891
--- /dev/null
+++ b/src/app/select/select-group-example/select-group-example.component.ts
@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { SelectControlGroup, SelectControlOption } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-select-group-example',
+  templateUrl: './select-group-example.component.html',
+  styleUrls: ['./select-group-example.component.scss']
+})
+export class SelectGroupExampleComponent {
+  selectedValue: number | string = "";
+  selectOptions: Array<SelectControlOption> = [
+    {
+      selected: true,
+      value: "",
+      text: 'Scegli un\'opzione'
+    }
+  ];
+  selectGroups: Array<SelectControlGroup> = [
+    {
+      label: 'Gruppo 1',
+      options: [
+        {
+          value: 1,
+          text: 'Opzione 1'
+        },
+        {
+          value: 2,
+          text: 'Opzione 2'
+        }
+      ]
+    },
+    {
+      label: 'Gruppo 2',
+      options: [
+        {
+          value: 3,
+          text: 'Opzione 3'
+        },
+        {
+          value: 4,
+          text: 'Opzione 4'
+        }
+      ]
+    }
+    
+  ];
+  
+  constructor(){}
+}
\ No newline at end of file
diff --git a/src/app/select/select-index/select-index.component.html b/src/app/select/select-index/select-index.component.html
new file mode 100644
index 00000000..5b0872b3
--- /dev/null
+++ b/src/app/select/select-index/select-index.component.html
@@ -0,0 +1,11 @@
+<h1 class="bd-title">Select</h1>
+<p class="bd-lead">Il classico “menu a tendina”</p>
+<div [innerHTML]="component.description"></div>
+<it-tab-container>
+  <it-tab-item id="example" label="Esempi" active="true" class="pt-3">
+    <it-select-examples></it-select-examples>
+  </it-tab-item>
+  <it-tab-item id="api" label="API" class="pt-3">
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/select/select-index/select-index.component.scss b/src/app/select/select-index/select-index.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/select/select-index/select-index.component.ts b/src/app/select/select-index/select-index.component.ts
new file mode 100644
index 00000000..80e98bac
--- /dev/null
+++ b/src/app/select/select-index/select-index.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-select-index',
+  templateUrl: './select-index.component.html',
+  styleUrls: ['./select-index.component.scss']
+})
+export class SelectIndexComponent {
+
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'SelectComponent');
+  }
+}
diff --git a/src/app/select/select-routing.module.ts b/src/app/select/select-routing.module.ts
new file mode 100644
index 00000000..b74b29d7
--- /dev/null
+++ b/src/app/select/select-routing.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SelectIndexComponent } from './select-index/select-index.component';
+
+const routes: Routes = [
+  { path: '', component: SelectIndexComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SelectRoutingModule { }
diff --git a/src/app/select/select.module.ts b/src/app/select/select.module.ts
new file mode 100644
index 00000000..fd720830
--- /dev/null
+++ b/src/app/select/select.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { SharedModule } from '../shared/shared.module';
+import { SelectRoutingModule } from './select-routing.module';
+import { SelectIndexComponent } from './select-index/select-index.component';
+import { SelectExamplesComponent } from './select-examples/select-examples.component';
+import { SelectExampleComponent } from './select-example/select-example.component';
+import { SelectGroupExampleComponent } from './select-group-example/select-group-example.component';
+import { SelectDisabledExampleComponent } from './select-disabled-example/select-disabled-example.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SharedModule,
+    SelectRoutingModule
+  ],
+  declarations: [
+    SelectIndexComponent, 
+    SelectDisabledExampleComponent, 
+    SelectGroupExampleComponent, 
+    SelectExamplesComponent, 
+    SelectExampleComponent
+  ]
+})
+export class SelectModule { }
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index a19a44a4..d5bf2e1b 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -90,6 +90,10 @@
           "label": "Steppers",
           "link": "/componenti/steppers"
         },
+        {
+          "label": "Select",
+          "link": "/componenti/select"
+        },
         {
           "label": "Notifications",
           "link": "/componenti/notifications"