@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCharacterCountComponent {
	...
	value: string;
	...
}

<desy-character-count id="id" [(ngModel)]="value" classes="w-100" labelText="Título" hintText="Introduce un texto largo." errorMessageText="El texto introducido es inválido"
    [countbbdd]="true" [maxlength]="100" [threshold]="75"></desy-character-count> 

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCharacterCountComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('', [Validators.required])
    });
	...
}

<desy-character-count id="identificador" classes="w-100" formControlName="valueFormControl" [maxwords]="15"
		labelText="Título"
		hintText="Introduce un texto largo (15 palabras como máximo)."
		[errorMessageText]="!form.valid ? 'Soy obligatorio' : null"></desy-character-count>

<desy-character-count id="identificador" classes="w-100" formControlName="valueFormControl" [maxwords]="15"
		labelData="{text: 'Título', ...}"
		hintText="{text: 'Introduce un texto largo (15 palabras como máximo).', ...}"
		[errorMessageData]="!form.valid ? {text: 'Soy obligatorio'} : null"></desy-character-count>

<desy-character-count labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate" [maxwords]="15">
	<ng-template #labelTemplate>
        <desy-label text='Título' ...></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Introduce un texto largo (15 palabras como máximo).' ...></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message [text]="!form.valid ? {text: 'Soy obligatorio'} : null"  ...></desy-error-message>
	</ng-template>
</desy-character-count>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCheckboxesComponent {
	...
	value: string;
	...
}

<desy-checkboxes [(ngModel)]="valueContent" [idPrefix]="'example-content'" [name]="'checkboxNgModel'" [classes]="'flex'">
	<desy-fieldset [legendText]="'Ejemplo con contenido'"></desy-fieldset>
	<desy-hint>Selecciona una o varias opciones</desy-hint>
	<desy-error-message *ngIf="!valueContent || valueContent.length === 0">Debes seleccionar al menos una opción</desy-error-message>
	<desy-checkbox-item [value]="'opcion1'" [conditional]="true">
		<desy-label>Opción 1</desy-label>
		<desy-hint>Tiene contenido condicional</desy-hint>
		<desy-content>Contenido condicional</desy-content>
	</desy-checkbox-item>
	<desy-checkbox-item [value]="'opcion2'">
		Opcion 2
		<desy-hint>No se especifica label</desy-hint>
	</desy-checkbox-item>
</desy-checkboxes>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCheckboxesComponent {
	...
	value: string;
	...
}

<desy-checkboxes [(ngModel)]="value" idPrefix="example" name="checkboxNgModel"
                 [items]="[{'value': 'british', 'text': 'British'}, {'value': 'irish', 'text': 'Irish'}, {'value': 'other', 'text': 'Citizen of another country'}]"
                 legendText="What is your nationality?"
                 hintText="If you have dual nationality, select all options that are relevant to you."></desy-checkboxes>

<desy-legend>...</desy-legend>

<desy-hint>...</desy-hint>

<desy-error-message>...</desy-error-message>

<desy-input-day>...</desy-input-day>

<desy-input-month>...</desy-input-month>

<desy-input-year>...</desy-input-year>

<desy-date-input id="withNgModelAndContent" [(ngModel)]="value">
  <desy-legend>Fecha de nacimiento</desy-legend>
  <desy-hint>Por ejemplo, 31 3 1980</desy-hint>
  <desy-error-message>Debes rellenar todos los campos</desy-error-message>
  <desy-input-day [name]="'day'" [classes]="'w-14'" [maxlength]="2">
    <desy-label>Día</desy-label>
  </desy-input-day>
  <desy-input-month [name]="'month'" [classes]="'w-14'" [maxlength]="2">
    <desy-label>Mes</desy-label>
  </desy-input-month>
  <desy-input-year [name]="'year'" [classes]="'w-20'" [maxlength]="4">
    <desy-label>Año</desy-label>
  </desy-input-year>
</desy-date-input>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDateInputComponent {
	...
	value: string;
	...
}

<desy-date-input id="withNgModel" [(ngModel)]="value" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980"></desy-date-input>

<form class="form" #tdForm="ngForm">
      <desy-date-input id="tdDate" ngModelGroup="tdDate" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980"></desy-date-input>
</form>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDateInputComponent {
	...	
    form = new FormGroup({
      date: new FormGroup({
        day: new FormControl(),
        month: new FormControl(),
        year: new FormControl()
      })
    });
	...
}

<form class="form" [formGroup]="form">
      <desy-date-input id="withReactiveForm" [items]="formItems" formGroupName="date" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980" errorMessageText="El año es obligatorio"
                       [items]="[{name: 'day', classes: 'w-14', maxlength: 2},
                                 {name: 'month', classes: 'w-14', maxlength: 2},
                                 {name: 'year', classes: 'w-20', maxlength: 4, hasErrors: true}]"></desy-date-input>
</form>

<desy-error-message text="Error message about full name goes here"></desy-error-message>

<desy-error-message>Error-message with <strong>HTML</strong></desy-error-message>

<desy-fieldset id="identificador" classes="p-base bg-warning-light" 
		legendText="What is your phone number?"
		caller="callerRef"></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

<desy-fieldset id="identificador" classes="p-base bg-warning-light" 
		caller="callerRef"><i>Legend</i> with <strong>HTML</strong></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

<desy-fieldset id="identificador"
		legendData="{text: 'What is your phone number?', isPageHeading: true, classes: 'c-h1 mb-sm'}"
		caller="callerRef"></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

<desy-fieldset id="identificador" legendRef="legendRef" caller="callerRef">
	<ng-template #legendRef>
        <desy-legend text='What is your phone number?' isPageHeading="true" classes="c-h1 mb-sm"></desy-legend>
	</ng-template>
</desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoFileUploadComponent {
	...
	value: string;
	...
}

<desy-file-upload id="identificador" name="nombre" labelText="Sube un archivo" [(ngModel)]="value"></desy-file-upload>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoFileUploadComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
}

<desy-file-upload id="file-upload-3" name="file-upload-3" formControlName="valueFormControl"
		labelText="Sube un archivo"
		hintText="Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
		errorMessageText="Error: Error message goes here"></desy-file-upload>

<desy-file-upload id="file-upload-3" name="file-upload-3" formControlName="valueFormControl"
		[labelData]="{text: 'Sube un archivo'}"
		[hintData]="{text: 'Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.'}"
		[errorMessageData]="{text: 'Error: Error message goes here'}"></desy-file-upload>

<desy-file-upload [labelRef]="labelTemplate" [hintRef]="hintTemplate" [errorMessageRef]="errorMessageTemplate" id="file-upload-3" name="file-upload-3" formControlName="valueFormControl">
	<ng-template #labelTemplate>
        <desy-label text="Sube un archivo"></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text="Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text="Error: Error message goes here"></desy-error-message>
	</ng-template>
</desy-file-upload>

<desy-hint text="It’s on your DNI, the last letter. For example, ‘A’."  ariaLabel="Prueba del componente hint con texto"></desy-hint> 

<desy-hint html="It’s on your DNI, <strong class='font-bold'>the last letter</strong>. For example, ‘A’."  ariaLabel="Prueba del componente hint con texto"></desy-hint> 

<desy-hint ariaLabel="Prueba del componente hint con texto">Esto es un hint <strong>con html</strong></desy-hint> 

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoInputComponent {
	...
	value: string;
	...
}

<desy-input id="id-input" name="name-input" labelText="Título" hintText="Escribe el texto" placeholder="Texto de ejemplo" [(ngModel)]="value"></desy-input > 

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoInputComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
}

<desy-input id="id-input" name="name-input" classes="w-100" formControlName="valueFormControl"
        type="number" inputmode="numeric"
		labelText="Título"
		hintText="Escribe un número"
		errorMessageText="El campo no puede estar vacío"></desy-input>

<desy-input id="id-input" name="name-input" classes="w-100" formControlName="valueFormControl"
        type="number" inputmode="numeric"
		labelData="{text: 'Título'}"
		hintText="{text: 'Escribe un número'}"
		errorMessageText="{text: 'El campo no puede estar vacío'}"></desy-input>

<desy-input id="id-input" name="name-input" labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate"
        type="number" inputmode="numeric">
	<ng-template #labelTemplate>
        <desy-label text='Título'></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Escribe un número'></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text='El campo no puede estar vacío'></desy-error-message>
	</ng-template>
</desy-input>

<desy-input-group [id]="'example'" [(ngModel)]="value">
  <desy-legend>Documento de identidad</desy-legend>
  <desy-input-group-select [name]="'tipoDoc'" [classes]="'w-full lg:w-auto'" [formGroupClasses]="'mr-base'">
    <desy-label>Tipo</desy-label>
    <desy-option [value]="'1'">NIF</desy-option>
    <desy-option [value]="'2'">Pasaporte</desy-option>
  </desy-input-group-select>
  <desy-input-group-divider [classes]="'mr-base'">y</desy-input-group-divider>
  <desy-input-group-input [name]="'numDoc'" [classes]="'w-full lg:w-50'"
                          [placeholder]="'Ej: 28999876V'" [maxlength]="9">
    <desy-label>Número</desy-label>
  </desy-input-group-input>
</desy-input-group>

@Component({
Añadir un subtítulo

  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDateInputComponent {
	...
	value: any;
	items: ItemInputGroupData[] = [
    {
      labelText: 'Tipo',
      name: 'tipoDoc',
      classes: 'w-full lg:w-auto',
      formGroupClasses: 'mr-base',
      isSelect: true,
      hasErrors: false,
      selectItems: [
        {
          value: '1',
          text: 'NIF',
        },
        {
          value: '2',
          text: 'Pasaporte'
        }
      ]
    },
    {
      name: 'numDoc',
      labelText: 'Número',
      classes: 'w-full lg:w-50',
      placeholder: 'Ej: 28999876V',
      hasErrors: false
    }
  ];
  form = new FormGroup({
    date: new FormGroup({
      tipoDoc: new FormControl(),
      numDoc: new FormControl()
    })
  });
	...
}

<desy-input-group id="withNgModel" [(ngModel)]="value" legendText="Documento de identidad" [items]="items"></desy-input-group>

<desy-input-group id="withReactiveForm" formGroupName="date" legendText="Documento de identidad" [items]="items"></desy-input-group>

<form class="form"  #tdForm="ngForm">
      <desy-input-group id="tdDate" ngModelGroup="tdDate" legendText="Documento de identidad" [items]="items"></desy-input-group>
</form>

<desy-label text="TSG number" [isPageHeading]="true" ariaLabel="Prueba del componente label con texto"></desy-label>

<desy-label [isPageHeading]="true" ariaLabel="Prueba del componente label con HTML">Esto es un label <strong>con html</strong></desy-label>

<desy-legend text="What is your phone number?" classes="mb-sm"></desy-legend>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoRadiosComponent {
	...
	value: string;
	...
}

<desy-radios [(ngModel)]="valueContent" [idPrefix]="'example-content'" [name]="'checkboxNgModel'" [classes]="'flex'">
	<desy-fieldset [legendText]="'Ejemplo con contenido'"></desy-fieldset>
	<desy-hint>Selecciona una o varias opciones</desy-hint>
	<desy-error-message *ngIf="!valueContent || valueContent.length === 0">Debes seleccionar al menos una opción</desy-error-message>
	<desy-checkbox-item [value]="'opcion1'" [conditional]="true">
		<desy-label>Opción 1</desy-label>
		<desy-hint>Tiene contenido condicional</desy-hint>
		<desy-content>Contenido condicional</desy-content>
	</desy-checkbox-item>
	<desy-radio-item [value]="'opcion2'">
		Opcion 2
		<desy-hint>No se especifica label</desy-hint>
	</desy-radio-item>
</desy-radios>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoRadiosComponent {
	...
	value: string;
	...
}

<desy-radios idPrefix="example" classes="flex" name="example" legendText="Have you changed your name?" hintText="This includes changing your last name or spelling your name differently."
    items="[{'value':'yes','text':'Yes','classes':'mr-sm'},{'value':'no','text':'No','classes':'mr-sm'}]" [(ngModel)]="value"></desy-radios> 

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	value: string;
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

<desy-search-bar id="identificador" labelText="Búsqueda" [(ngModel)]="value" (clickEvent)="handleClickEvent($event)"></desy-search-bar>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	value: string;
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

<desy-search-bar id="identificador" placeholder="Buscar en ..." [(ngModel)]="value" >
  <desy-button text="Buscar" classes="c-button--primary ml-sm" (clickEvent)="handleClickEvent($event)"></desy-button>
</desy-search-bar>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

<desy-search-bar id="identificador" (clickEvent)="handleClickEvent($event)"
        formControlName="valueFormControl"
		labelText="Búsqueda"
		errorMessageText="El texto introducido es inválido"></desy-search-bar>

  <desy-search-bar id="identificador" (clickEvent)="handleClickEvent($event)"
               formControlName="valueFormControl"
               [labelData]="{text: 'Búsqueda'}"
               [errorMessageData]="{text: 'El texto introducido es inválido'}"></desy-search-bar>

  <desy-search-bar [labelRef]="labelTemplate" [errorMessageRef]="errorMessageTemplate" id="identificador" (clickEvent)="handleClickEvent($event)">
    <ng-template #labelTemplate>
      <desy-label text="Búsqueda" classes="sr-only" for="searchbar"></desy-label>
    </ng-template>
    <ng-template #errorMessageTemplate>
      <desy-error-message text="El texto introducido es inválido"></desy-error-message>
    </ng-template>
  </desy-search-bar>

<desy-label>...</desy-label>

<desy-hint>...</desy-hint>

<desy-error-message>...</desy-error-message>

<desy-option>...</desy-option>

<desy-option-group>...</desy-option-group>

<desy-select formControlName="valueFormControlContent" [id]="'id'" [name]="'ejemplo-select'">
  <desy-label>Ejemplo select</desy-label>
  <desy-hint>Ejemplo de uso del componente select</desy-hint>
  <desy-error-message [id]="'error-id'">Es obligatorio</desy-error-message>

  <!-- Placeholder -->
  <desy-option [disabled]="true" [hidden]="true" [selected]="true">Selecciona una opción</desy-option>

  <desy-option [value]="'op1'">Opción 1</desy-option>
  <desy-option [value]="'op2'">Opción 2</desy-option>
  <desy-option [disabled]="true" [value]="'op3'">Opción 3 - deshabilitada</desy-option>
  <desy-option [disabled]="true" [value]="'op4'">Opción 4 - oculta</desy-option>

  <desy-option-group [label]="optionGroup.label" [disabled]="optionGroup.disabled">
    <desy-option [value]="'g1'">Opcion 1</desy-option>
    <desy-option [value]="'g2'">Opcion 2</desy-option>
    <desy-option [value]="'g3'" [disabled]="true">Opcion disabled</desy-option>
    <desy-option [value]="'g4'" [hidden]="true">Opcion hidden</desy-option>
    <desy-option [value]="'g5'">Opcion 5</desy-option>
  </desy-option-group>
  <desy-option [value]="'extra'">Opción extra</desy-option>
</desy-select>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSelectComponent {
	...
	value: string = 'option4';
	...
}

<desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]"
             [(ngModel)]="value"></desy-select>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSelectComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('option4')
    });
	...
}

<desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]" 
        formControlName="valueFormControl"
		labelText="Título"
		hintText="Elige una opción"
		errorMessageText="Texto de error"></desy-select>

  <desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]"
               formControlName="valueFormControl"
               [labelData]="{text: 'Título'}"
               [hintData]="{text: 'Elige una opción'}"
               [errorMessageData]="{text: 'Texto de error'}"></desy-select>

  <desy-select [labelRef]="labelTemplate" [hintRef]="hintTemplate" [errorMessageRef]="errorMessageTemplate" id="identificador" name="nombre" 
  [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]">
    <ng-template #labelTemplate>
      <desy-label text="Título"></desy-label>
    </ng-template>
    <ng-template #hintTemplate>
      <desy-hint text="Elige una opción"></desy-hint>
    </ng-template>
    <ng-template #errorMessageTemplate>
      <desy-error-message text="Texto de error"></desy-error-message>
    </ng-template>
  </desy-select>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoTextareaComponent {
	...
	value: string;
	...
}

<desy-textarea id="identificador" [(ngModel)]="value" classes="w-100"></desy-textarea> 

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoTextareaComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('Ejemplo de texto introducido por el usuario')
    });
	...
}

<desy-textarea id="identificador" classes="w-100" formControlName="valueFormControl"
		labelText="Título"
		hintText="Introduce un texto largo."
		errorMessageText="El texto introducido es inválido"></desy-textarea>

<desy-textarea id="identificador" classes="w-100" formControlName="valueFormControl"
		labelData="{text: 'Título', ...}"
		hintText="{text: 'Introduce un texto largo.', ...}"
		errorMessageText="{text: 'El texto introducido es inválido', ...}"></desy-textarea>

<desy-textarea labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate">
	<ng-template #labelTemplate>
        <desy-label text='Título' ...></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Introduce un texto largo.' ...></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text='El texto introducido es inválido'  ...></desy-error-message>
	</ng-template>
</desy-textarea>

<desy-tree [name]="'exampleNameContent'" [type]="'checkbox'" [(ngModel)]="valueContent" 
           [idPrefix]="'prefix'"[expandedFirstLevel]="false" [decoupleChildFromParent]="true">
  <desy-fieldset>
    <desy-legend>Ejemplo de arbol</desy-legend>
  </desy-fieldset>
  <desy-hint [id]="'hint-gral'">Prueba arbol</desy-hint>
  <desy-search-bar [(ngModel)]="searchValue"
                   [labelText]="'Buscar en el árbol'"
                   [id]="'search-bar-tree'"
                   [placeholder]="'Buscar'">
  </desy-search-bar>
  <desy-tree-item [value]="'i1'" [id]="'id1'"><desy-label>Item 1</desy-label></desy-tree-item>
  <desy-tree-item [value]="'i2'" [checked]="true">
    <desy-label>Item 2</desy-label>
    <desy-hint>Item numero 2</desy-hint>
  </desy-tree-item>
  <desy-tree-item [value]="'i3'">
    <desy-label>Item 3</desy-label>
    <desy-tree-sub>
      <desy-tree-item [value]="'i4'"><desy-label>Item 4</desy-label>
        <desy-tree-sub>
          <desy-tree-item [value]="'i41'">
            <desy-label>Item 4.1</desy-label>
            <desy-hint [id]="'hint-interno'">Hint Item 4.1</desy-hint>
          </desy-tree-item>
          <desy-tree-item [value]="'i42'">
            <desy-label>Item 4.2</desy-label>
            <desy-tree-sub>
              <desy-tree-item [value]="'i421'"><desy-label>Item 4.2.1</desy-label></desy-tree-item>
              <desy-tree-item [value]="'i422'">
                <desy-label>Item 4.2.2</desy-label>
                <desy-tree-sub>
                  <desy-tree-item [value]="'i4221'"><desy-label>Item 4.2.2.1</desy-label></desy-tree-item>
                  <desy-tree-item [value]="'i4222'"><desy-label>Item 4.2.2.2</desy-label></desy-tree-item>
                </desy-tree-sub>
              </desy-tree-item>
            </desy-tree-sub>
          </desy-tree-item>
        </desy-tree-sub>
      </desy-tree-item>
      <desy-tree-item [value]="'i5'">
        <desy-label>Item 5 busc</desy-label>
      </desy-tree-item>
      <desy-tree-item [value]="'i6'" [disabled]="true">
        <desy-label>Item 5 busc</desy-label>
      </desy-tree-item>
      <desy-tree-item [value]="'i7'">
        <desy-label>Item 7</desy-label>
        <desy-hint>Item numero 7</desy-hint>
      </desy-tree-item>
    </desy-tree-sub>
  </desy-tree-item>
  <desy-tree-item [value]="'i8'" [disabled]="true"><desy-label>Item 8</desy-label></desy-tree-item>
</desy-tree>

<form [formGroup]="form">
	<desy-tree [name]="'example'"
			   [type]="'checkbox'"
			   [classes]="'mt-base'"
			   [(searchMatchValues)]="searchMatchValuesForm"
			   formControlName="tree"
			   [idPrefix]="'example-form'"
			   [disableDefaultSearch]="true">
		<desy-fieldset></desy-fieldset>
        <desy-hint>Componente arbol de ejemplo y parametrizado</desy-hint>
		<desy-search-bar [labelText]="'Buscar en el árbol'" [id]="'search-bar-tree'" [placeholder]="'Buscar organismo'"
						 formControlName="search"
						 [errorMessageRef]="searchMatchValuesForm && searchMatchValuesForm.length === 0 ? errorSearch : null">
		  <ng-template #errorSearch>
			<desy-error-message>
			  <desy-label>No hay resultados</desy-label>
			</desy-error-message>
		  </ng-template>
		</desy-search-bar>

        <desy-tree-items-generator [items]="treeRootItems" [itemTemplate]="itemTemplateForm">
			<!-- Template de ejemplo para contenido recursivo. IMPORTANTE: debe definirse como contenido de desy-tree -->
			<ng-template #itemTemplateForm let-item="item">
			  <desy-tree-item [value]="item.value" [id]="idPrefix + '-form' ? null : item.id" [expanded]="item.expanded" [disabled]="item.disabled">
				<desy-label>{{ item.label }}</desy-label>
				<desy-tree-sub *ngIf="item.sub && item.sub.items">
				  <ng-container *ngFor="let subItem of item.sub.items">
					<ng-container *ngTemplateOutlet="itemTemplateForm; context: {item: subItem}"></ng-container>
				  </ng-container>
				</desy-tree-sub>
			  </desy-tree-item>
			</ng-template>
      </desy-tree-items-generator>
	</desy-tree>
</form>

export class DemoTreeComponent implements OnInit {

  form: FormGroup;
  treeRootItems = [ { "value": "i1", "id": "i1", "label": "Item 1", "sub": { "items": [ { "value": "i2", "id": "i2", "label": "Item 2", "disabled": false, "sub": { "items": [ { "value": "i3", "id": "i3", "label": "Item 3", "disabled": false }, { "value": "i4", "id": "i4", "label": "Item 4", "disabled": false }, { "value": "i5", "id": "i5", "label": "Item 5", "disabled": false } ] } }, { "value": "i6", "id": "i6", "label": "Item 6", "disabled": false, "sub": { "items": [ { "value": "i7", "id": "i7", "label": "Item 7", "disabled": false }, { "value": "i8", "id": "i8", "label": "Item 8", "disabled": false }, { "value": "i9", "id": "i9", "label": "Item 9", "disabled": false } ] } }, { "value": "i10", "id": "i10", "label": "Item 10", "disabled": false, "sub": { "items": [ { "value": "i11", "id": "i11", "label": "Item 11", "disabled": false }, { "value": "i12", "id": "i12", "label": "Item 12", "disabled": false }, { "value": "i13", "id": "i13", "label": "Item 13", "disabled": false } ] } } ] } }, { "value": "i14", "id": "i14", "label": "Item 14", "sub": { "items": [ { "value": "i15", "id": "i15", "label": "Item 15", "disabled": false, "sub": { "items": [ { "value": "i16", "id": "i16", "label": "Item 16", "disabled": false }, { "value": "i17", "id": "i17", "label": "Item 17", "disabled": false }, { "value": "i18", "id": "i18", "label": "Item 18", "disabled": false } ] } }, { "value": "i19", "id": "i19", "label": "Item 19", "disabled": false, "sub": { "items": [ { "value": "i20", "id": "i20", "label": "Item 20", "disabled": false }, { "value": "i21", "id": "i21", "label": "Item 21", "disabled": false }, { "value": "i22", "id": "i22", "label": "Item 22", "disabled": false } ] } }, { "value": "i23", "id": "i23", "label": "Item 23", "disabled": false, "sub": { "items": [ { "value": "i24", "id": "i24", "label": "Item 24", "disabled": false }, { "value": "i25", "id": "i25", "label": "Item 25", "disabled": false }, { "value": "i26", "id": "i26", "label": "Item 26", "disabled": false } ] } } ] } }, { "value": "i27", "id": "i27", "label": "Item 27", "sub": { "items": [ { "value": "i28", "id": "i28", "label": "Item 28", "disabled": false, "sub": { "items": [ { "value": "i29", "id": "i29", "label": "Item 29", "disabled": false }, { "value": "i30", "id": "i30", "label": "Item 30", "disabled": false }, { "value": "i31", "id": "i31", "label": "Item 31", "disabled": false } ] } }, { "value": "i32", "id": "i32", "label": "Item 32", "disabled": false, "sub": { "items": [ { "value": "i33", "id": "i33", "label": "Item 33", "disabled": false }, { "value": "i34", "id": "i34", "label": "Item 34", "disabled": false }, { "value": "i35", "id": "i35", "label": "Item 35", "disabled": false } ] } }, { "value": "i36", "id": "i36", "label": "Item 36", "disabled": false, "sub": { "items": [ { "value": "i37", "id": "i37", "label": "Item 37", "disabled": false }, { "value": "i38", "id": "i38", "label": "Item 38", "disabled": false }, { "value": "i39", "id": "i39", "label": "Item 39", "disabled": false } ] } } ] } } ];
  
  ngOnInit(): void {
    this.form = new FormGroup({
      tree: new FormControl(null),
      search: new FormControl(null),
    });
    
    this.form.get('search').valueChanges.subscribe(v => {
      this.searchMatchValues = this.customSearch(value);
    });
  }
  
  /**
   * Búsqueda personalizada en el arbol. Debe devolver los value de los ítems que se desean mostrar.
   */
  customSearch(searchText: string): string[] {
     // Ejemplo, devuelve los X primeros items, donde X es el número de caracteres del texto de entrada.
     const items = [];
     for (let i = 0; i < searchText.length; i++) {
       items.push('i' + i);
     }
     return items;
  }
}

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoConditionalComponent {
	...
	itemsContact: ItemRadioData[] = [{'value': 'phone', 'text': 'Phone', 'conditional': true},{'value': 'email', 'text': 'Email', 'conditional': true},{'value': 'text', 'text': 'Text message', 'conditional': true}];
	form: FormGroup = new FormGroup({
            valueFormControl: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.email]),
            phone: new FormControl(null, [Validators.minLength(9)]),
            phoneTxt: new FormControl(null, [Validators.minLength(9)]),
    });
	...
}

    <form [formGroup]="form">
      <desy-radios formControlName="valueFormControl"
                  legendText="How do you want to be contacted?"
                  [items]="itemsContact"
                   idPrefix="how-contacted"
                  name="how-contacted">

                    <ng-template desyCondition value="email" [items]="itemsContact">
                      <desy-input id="context-email" name="context-email" labelText="E-mail"  placeholder="ejemplo@email.es"  formControlName="email"></desy-input>
                    </ng-template>

                    <ng-template desyCondition value="phone" [items]="itemsContact">
                        <desy-input id="context-phone" name="contact-phone" labelText="Phone number" formControlName="phone"></desy-input>
                    </ng-template>  

                     <ng-template desyCondition value="text" [items]="itemsContact">
                        <desy-input id="contact-text-message" name="contact-text-message" labelText="Mobile phone number" formControlName="phoneTxt"></desy-input>
                    </ng-template>  
         
      </desy-radios>
    </form>

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoConditionalComponent {
	...
	itemsContact: ItemCheckboxData[] = [{'value': 'phone', 'text': 'Phone', 'conditional': true},{'value': 'email', 'text': 'Email', 'conditional': true},{'value': 'text', 'text': 'Text message', 'conditional': true}];
	form: FormGroup = new FormGroup({
            valueFormControl: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.email]),
            phone: new FormControl(null, [Validators.minLength(9)]),
            phoneTxt: new FormControl(null, [Validators.minLength(9)]),
    });
	...
}

<form [formGroup]="form">
  <desy-checkboxes formControlName="valueFormControl"
				   legendText="How do you want to be contacted?"
				   [items]="itemsContact"
				   idPrefix="how-contacted"
				   name="how-contacted">

	<ng-template desyCondition value="email" [items]="itemsContact">
	  <desy-input id="context-email" name="context-email" labelText="E-mail" [errorMessageData]="email.invalid ? {text: 'No es un email'} : null"  placeholder="ejemplo@email.es"  formControlName="email"></desy-input>
	</ng-template>

	<ng-template desyCondition value="phone" [items]="itemsContact">
	  <desy-input id="context-phone" name="contact-phone" labelText="Phone number" [errorMessageData]="phone.invalid ? {text: 'Longitud minima 9'} : null" formControlName="phone"></desy-input>
	</ng-template>

	<ng-template desyCondition [item]="itemsContact[2]">
	  <desy-input id="contact-text-message" name="contact-text-message" labelText="Mobile phone number" [errorMessageData]="phoneTxt.invalid ? {text: 'Longitud minima 9'} : null" formControlName="phoneTxt"></desy-input>
	</ng-template>
  </desy-checkboxes>
</form>