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

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