chore(docs): add docs for the select component

Co-authored-by: Antonino Bonanno <[email protected]>
Co-authored-by: Andrea Stagi <[email protected]>

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
    */

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) },
   ]}
 ];

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>
+

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(){}
+}

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>
+

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(){}
+}

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>

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() {
+  }
+
+}

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>
+

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(){}
+}

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>

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');
+  }
+}

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 { }

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 { }

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"