...

title	Control de versiones

...

Versión

...

Fecha

...

Editor

...

Cambios

...

5.0.0

...

03/01/2022

...

Maria Varshitskaya

...

Copia de versión 4.0.0 y mejoras de contenido en el componente Checkboxes

...

5.1.0

...

25/01/2022

...

Roberto Clemente

...

Table of Contents

minLevel	1
maxLevel	2

...

Vamos a ver como se usa cada uno de los componentes.

Character count

...

Code Block

language	xml

<desy-character-count ... ></desy-character-count>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del textarea.	Si
name	string	Nombre o atributo name del textarea.	Si
maxlength	number	Número máximo de caracteres.	Sí, cuando no se especifica maxwords.
countbbdd	boolean	Indica si se debe limitar el texto a introducir teniendo en cuenta el peso que pueden tener los caracteres especiales en base de datos.
maxwords	number	Número máximo de palabras. Sólo se aplica si no se ha especificado la propiedad maxlength.	Sí, cuando no se especifica maxlength.
threshold	number	Umbral de texto introducido a partir del cual se mostrará el texto con los caracteres/palabras restantes. Si no se especifica, este texto se mostrará siempre.
placeholder	string	Texto a mostrar de ejemplo antes de introducir texto.
labelText	string	Título o etiqueta. Puede especificarse utilizando una de las siguientes opciones: labelText: texto de título. labelData: objeto que contiene toda la información de un componente Label. labelRef: tag de un ng-template que contenga un componente Label. Si se especifican varias, se aplicará la opción que admite mayor personalización: labelRef → labelData → labelText.	Si
labelData	LabelData
labelRef	TemplateRef <LabelComponent>
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente Hint. hintRef: tag de un ng-template que contenga un componente Hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintRef → hintData → hintText.
hintData	HintData
hintRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage. errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>
classes	string	Clases a aplicar sobre la entrada de texto.
formGroupClasses	string	Clases del grupo que contiene el título, la descripción, el mensaje de error y la entrada de texto.
countMessageClasses	string	Clases a aplicar sobre el texto con los caracteres/palabras restantes.
disabled	booelean	Permite deshabilitar el componente. Nota: si se utilizan formularios reactivos, es preferible no utilizar este parámetro y gestionarlo desde el FormControl.

Propiedades de accesibilidad

El componente admite los parámetros de accesibilidad.

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Code Block

language	js

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

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, hintData y errorMessageData

Code Block

language	xml

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

HTML utilizando labelRef, hintRef y errorMessageRef

Code Block

language	xml

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

Checkboxes

...

Code Block

language	xml

<desy-checkboxes  ... >...</desy-checkboxes>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
idPrefix	string	Prefijo para identificar los ítems, si no vienen identificados. Si no se especifica se usa name.
name	string	Atributo name de cada checkbox item.	si
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
formGroupClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el form group.
hasDividers	boolean	Determinar si se muestran lineas divesoras entre los items.
items	ItemCheckboxData[]	Objeto con la información de cada checkbox item. Admite double binding, ya que internamente se puede modificar el valor de checked.	si
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: Componente Fieldset como contenido (ver sección contenido). fieldsetData: Objeto que contiene toda la información del componente Fieldset legendRef: tag de un ng-template que contenga un componente legend legendData: objeto que contiene toda la informaicón del componente legend legendText: tengo de la legenda Si se especifican varias, se aplicará la opción que admite mayor personalización: fieldsetComponent → fieldsetData → legendRef→ legendData→ legendText.
legendRef	TemplateRef <LegendComponent>
legendData	LegendData
legendText	string
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: Componente Hint como contenido (ver sección contenido). hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. hintRef: tag de un ng-template que contenga un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintComponent → hintRef → hintData → hintText.
hintData	HintData
hintRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: Componente ErrorMessage como contenido (ver sección contenido). errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage. errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageComponent → errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>

ItemCheckboxData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
id	string	Identificador del ítem.
value	string	Valor del ítem.	si
labelData	LabelData	Objeto que contiene toda información del componente label. Solo se aplicarán los atributos y clases css.
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintData → hintText.
hintData	HintData
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el ítem.
checked	boolean	Determina si está marcado.
indeterminateChecked	boolean	Determina si está en estado indeterminado (estado visual intermedio que no corresponde ni a marcado ni a desmarcado)
disabled	boolean	Determina si está activo
isIndeterminated	boolean	Indica si admite un estado visual intermedio que no corresponde ni a marcado ni a desmarcado. Se suele utilizar cuando existen otros campos de tipo checkbox dependientes del ítem y se quiere representar que se han marcado sólo algunos de ellos.
conditional	boolean	Determina si tiene una condición. Para implementar la template a mostrar, se usa la directiva Condition

Propiedades de accesibilidad

El componente e ItemCheckboxData admite los siguientes parámetros de accesibilidad.

Expand

title	Contenido

Se permite proyectar contenido dentro de checkboxes para facilitar su uso. Admite los siguientes componentes:

FieldsetComponent

<desy-fieldset>...</desy-fieldset>

Permite especificar las propiedades del fieldset. No se debe especificar el caller de este componente, ya que se sobrescribirá internamente.

LegendComponent

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

Si no se especifica el componente fieldset, se puede utilizar para incorporar el título.

HintComponent

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

Permite especificar la descripción de ayuda. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

ErrorMessageComponent

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

Permite especificar el mensaje de error. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

CheckboxItemComponent

<desy-checkbox-item ...>...</desy-checkbox-item>

Permite especificar cada checkbox. Admite los mismos parámetros que ItemCheckboxData. El parámetro checked admite double-binding. El parámetro indeterminateChecked admite double-binding.

A su vez, este componente admite como contenido los componentes LabelComponent, HintComponent y ContentComponent. Este último permite especificar el contenido condicional que se mostrará al seleccionar el checkbox, siempre y cuando se especifice el parámetro conditional a true.

Si no se especifica el LabelComponent, el contenido (salvo los componentes HintContent y ContentComponent, si se especifican) será insertado dentro de un label de forma interna.

Expand

title	Eventos de salida

Evento

Tipo

Descripción

itemsChange

ItemCheckboxData[]

Se emite cada vez que se selecciona o deselecciona un checkbox, de forma que el valor de checked de cada item se devuelve actualizado en el evento.

Sólo se emite si se especifican los items como parámetro.

indeterminateChange

boolean

Se emite cada vez que se selecciona o deselecciona un checkbox, de forma que el valor de indeterminateChecked del item se devuelve actualizado en el evento.

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo con parámetros y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

Date-input

...

Code Block

language	xml

<desy-date-input  ... ></desy-date-input>

...

Anchor

	errorMessage
	errorMessage

Error Message

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Error message con entrada de texto

Code Block

language	xml

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

Error message con contenido

Code Block

language	xml

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

FieldSet

...

Code Block

language	xml

<desy-filedset  ... ></desy-fieldset>

...

Expand

title	Ejemplos

HTML utilizando legendText

Code Block

language	xml

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

Fieldset utilizando contenido en la leyenda

Code Block

language	xml

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

HTML utilizando legendData

Code Block

language	xml

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

HTML utilizando legendRef

Code Block

language	xml

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

File Upload

...

Code Block

language	xml

<desy-file-upload  ... ></desy-file-upload>

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, hintData y errorMessageData

Code Block

language	xml

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

HTML utilizando labelRef, hintRef y errorMessageRef

Code Block

language	xml

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

Anchor
hint
hint
Hint

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Hint con entrada de texto

Code Block

language	xml

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

Hint con entrada HTML

Code Block

language	xml

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

Hint con entrada de contenido

Code Block

language	xml

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

Input

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, hintData y errorMessageData

Code Block

language	xml

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

HTML utilizando labelRef, hintRef y errorMessageRef

Code Block

language	xml

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

Input-group

...

Code Block

language	xml

<desy-input-group  ... ></desy-input-group>

...

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Code Block

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

Ejemplo con parámetros y NgModel

Componente

Code Block

language	js

@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()
    })
  });
	...
}

HTML con campo independiente

Code Block

language	html

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

HTML con campo utilizado en un formulario reactivo

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

HTML con campo utilizado en un formulario dirigido por plantilla

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

Label

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Label con entrada de texto

Code Block

language	xml

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

Label con contenido

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

Legend

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Hint con entrada de texto

Code Block

language	xml

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

Radios

...

Code Block

language	xml

<desy-radios ...></desy-radios>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del radios
idPrefix	string	Prefijo para identificar los items, si no vienen identificados. Si no se especifica se usa name.
name	string	Atributo name de nada radio item.	si
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
formGroupClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el form group.
hasDividers	boolean	Determinar si se muestran lineas divesoras entre los items
items	ItemRadioData[]	Objeto con la información de cada item radio.	si
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: fieldsetData: Objeto que contiene toda la información del componente Fieldset legendRef: tag de un ng-template que contenga un componente legend legendData: objeto que contiene toda la informaicón del componente legend legendText: tengo de la legenda Si se especifican varias, se aplicará la opción que admite mayor personalización: fieldsetData → legendRef→ legendData→ legendText.
legendRef	TemplateRef <LegendComponent>
legendData	LegendData
legendText	string
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. hintRef: tag de un ng-template que contenga un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintRef → hintData → hintText.
hintData	HintData
hintRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage. errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>

ItemRadioData

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
id	string	Identificador del radios
value	string	Valor del item	si
labelData	LabelData	Objeto que contiene toda ifnormaicón del componente label. Solo se aplicaran los atributos y clases css.
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintData → hintText.
hintData	HintData
divider	string	Texto para dividir los radio items. Por ejemplo “o”.	Si se especifica dividir, el resto de parámetros no son requeridos.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el item.
checked	boolean	Determina si esta checkeado
disabled	boolean	Determina si esta activo
conditional	boolean	Determina si tiene una condición. Para implemetnar la template a mostrar, se usa la directiva Condition

Propiedades de accesibilidad

El componente y ItemRadioData admite los siguientes parámetros de accesibilidad.

Expand

title	Contenido

Se permite proyectar contenido dentro de radios para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

FieldsetComponent

<desy-fieldset>...</desy-fieldset>

Permite especificar las propiedades del fieldset. No se debe especificar el caller de este componente, ya que se sobrescribirá internamente.

LegendComponent

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

Si no se especifica el componente fieldset, se puede utilizar para incorporar el título.

HintComponent

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

Permite especificar la descripción de ayuda. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

ErrorMessageComponent

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

Permite especificar el mensaje de error. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

RadioItemComponent

<desy-radio-item>...</desy-radio-item>

Permite especificar cada radio. Admite los mismos parámetros que ItemRadioData. El parámetro checked admite double-binding.

A su vez, este componente admite como contenido los componentes LabelComponent, HintComponent y ContentComponent. Este último permite especificar el contenido condicional que se mostrará al seleccionar el radio, siempre y cuando se especifice el parámetro conditional a true.

Si no se especifica el LabelComponent, el contenido (salvo los componentes HintContent y ContentComponent, si se especifican) será insertado dentro de un label de forma interna.

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo parámetros y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

SearchBar

...

Code Block

language	xml

<desy-search-bar ...></desy-search-bar>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del searchBar	Si
labelText	string	Título o etiqueta. Puede especificarse utilizando una de las siguientes opciones: labelText: texto de título. labelData: objeto que contiene toda la información de un componente label. labelRef: tag de un ng-template que contenga un componente label. (no se recomienda esta opción) Si se especifican varias, se aplicará la opción que admite mayor personalización: labelRef → labelData → labelText.	Si
labelData	LabelData
labelRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>
classes	string	Clases a aplicar sobre la entrada de texto.
buttonClasses	string	Clases del boton que contiene la barra de busqueda.
disabled	boolean	Permite deshabilitar el componente.
placeholder	string	Placeholder del input.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby

Expand

title	Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón o hacer intro.

Expand

title	Contenido

Se permite insertar un componente Button como contenido del componente Searchbar. En este caso, no se mostrará el botón de búsqueda por defecto.

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo utilizando un componente botón como contenido

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, y errorMessageData

Code Block

language	html

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

HTML utilizando labelRef, y errorMessageRef

Code Block

language	html

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

Select

...

Code Block

language	xml

<desy-select ...></desy-select>

...

Expand

title	Ejemplos

Ejemplo con contenido y ngModel

Code Block

language	html

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

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	html

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, hintData y errorMessageData

Code Block

language	html

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

HTML utilizando labelRef, hintRef y errorMessageRef

Code Block

language	html

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

Textarea

...

Code Block

language	xml

<desy-textarea ...></desy-textarea>

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

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

HTML utilizando labelData, hintData y errorMessageData

Code Block

language	xml

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

HTML utilizando labelRef, hintRef y errorMessageRef

Code Block

language	xml

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

Tree

...

Code Block

language	xml

<desy-tree ...>
  <desy-search-bar ...>...</desy-search-bar>
  <desy-tree-item ...>
    <desy-label>...</desy-label>
    <desy-sub>
      <desy-tree-item>...</desy-tree-item>
      ...
  </desy-tree-item>
  ...
</desy-tree>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del tree.	Si
idPrefix	string	Prefijo a añadir al id por defecto de los items cuando no se les haya especificado el parámetro id.
name	string	Nombre o atributo name del tree.	Si
type	string	Tipo de los items. Las opciones son: radio: sólo permite seleccionar un ítem del árbol checkbox: permite seleccionar múltiples ítems (por defecto)
rows	number	Numero de columnas del texarea (por defecto 5)
classes	string	Clases a aplicar sobre la entrada de texto.
formGroupClasses	string	Clases del grupo que contiene el título, la descripción, el mensaje de error y la entrada de texto.
disabled	booleano	Booleano que determina si esta activo el tree.
describedBy	string	Identificador de un elemento que describe al componente .
expandedFirstLevel	booleano	Con esta opción activada, los ítems con descendientes se expandirán al seleccionarse. Esta opción está activada por defecto.
decoupleChildFromParent	booleano	Con esta opción activada, los ítems serán independientes de sus padres/hijos. Por el contrario, con esta opción desactivada, el árbol tendrá el siguiente comportamiento: Al seleccionar un padre se seleccionarán todos sus hijos. Al seleccionar un hijo, si el resto de items del mismo nivel están también seleccionados, se seleccionará al padre. Al seleccionar un hijo, si algún item del mismo nivel no está seleccionado, el padre se visualizará con el estado indeterminado. Por defecto esta opción está desactivada.
disableDefaultSearch	boolean	Desactiva la búsqueda por defecto realizada en el componente cuando se le especifica el componente Searchbar. De esta forma, se puede realizar una búsqueda personalizada mediante el parámetro de entrada/salida searchMatchValues.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Expand

title	Propiedades de entrada/salida

Propiedad	Tipo	Descripción
searchMatchValues	string[]	Gestiona los ítems que cumplen con los criterios de búsqueda. El valor de la propiedad es un listado con los valores (value) de dichos ítems. Es posible desactivar la búsqueda por defecto indicando el parámetro de entrada disableDefaultSearcha true.

Expand

title	Contenido

Se permite proyectar contenido dentro de input-group para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

FieldsetComponent

<desy-fieldset>...</desy-fieldset>

Permite especificar las propiedades del fieldset. No se debe especificar el caller de este componente, ya que se sobrescribirá internamente. También se sobrescribirán internamente los valores de errorId y describedBy.

HintComponent

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

Permite especificar la descripción de ayuda. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

ErrorMessageComponent

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

Permite especificar el mensaje de error. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

SearchbarComponent

<desy-search-bar>...</desy-search-bar>

Permite mostrar una barra de búsqueda vinculada al componente.

DesyTreeItemComponent

<desy-tree-item>...</desy-tree-item>

Permite indicar cada uno de los ítems del árbol.

Admite los siguientes parámetros de entrada:

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador aplicado sobre el ítem. Si no se especifica, se generará uno automáticamente.
name	string	Nombre del tree al que pertenece. Por defecto, se especifica automáticamente desde el componente tree.
value	string	Valor del ítem, que formará parte del valor del componente tree cuando esté seleccionado.	Sí
classes	string	Clases CSS que se aplicarán sobre el componente.
disabled	boolean	Permite desactivar el ítem.
title	string	Propiedad title a incluir en el ítem.
hasDividers	boolean	Permite añadir una línea divisoria tras el ítem.
isIndeterminate	boolean	Permite indicar que admite el parámetro indeterminado. Cuando el parámetro del componente tree decoupleChildFromParent está desactivado, este estado se gestiona automáticamente.

Admite los siguientes parámetros de entrada/salida:

Propiedad	Tipo	Descripción
checked	booleano	Permite gestionar si el ítem está marcado.
expanded	booleano	Permite gestionar si el ítem está expandido.
indeterminateChecked	booleano	Permite gestionar si el ítem está marcado como indeterminado.

A su vez, este componente admite los siguientes componentes como contenido:

DesyLabelComponent:
<desy-label>...</desy-label>
Permite especificar el texto del ítem.
DesyHintComponent
<desy-hint>...</desy-hint>
Permite especificar la descripción de ayuda.
DesyTreeSubComponent
<desy-tree-sub>...</desy-tree-sub>
Permite indicar que el ítem tendrá a su vez ítems descendientes.
Este componente admite únicamente el parámetro de entrada classes, que se aplicarán sobre el contenedor de los subítems.
Como contenido, este componente admite únicamente el componente DesyTreeItemComponent, con el que se especificarán sus descendientes. Puede utilizarse un template para incluir los items de forma recursiva.

DesyTreeItemsGeneratorComponent
<desy-tree-items-generator>...</desy-tree-items-generator>
Permite generar ítems dentro del árbol desde un listado de ítems de forma eficiente, dados los siguientes parámetros obligatorios:

itemTemplate (templateRef<DesyTreeItemComponent>): template para indicar cómo se debe mostrar cada ítem del árbol. El ítem se transmite mediante la variable del contexto “item”. Este template debe definirse siempre dentro del componente árbol.
items (any[]): lista de los elementos raíz a incluir en el árbol. No se requiere que los elementos sean de ningún tipo para permitir facilitar su uso en el itemTemplate.

Expand

title	Ejemplos

Ejemplo sencillo

HTML

Code Block

language	html

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

Ejemplo con ítems recursivos y búsqueda personalizada

HTML

Code Block

language	html

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

Componente

Code Block

language	typescript

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

Accesibilidad

...

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
ariaModal	aria-modal
tabindex	tabindex

Uso de los directivas de los formularios

...

Vamos a ver como se usa cada uno de las directivas.

ConditionDirective

...

Code Block
<ng-template desyCondition ...> ... </ng-template>

...

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Character count

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Checkboxes

ItemCheckboxData

Ejemplo con contenido y NgModel

Componente

HTML

Ejemplo con parámetros y NgModel

Componente

HTML

Ejemplo con Formulario y condicionalesVer apartado ConditionDirective

Date-input

Error Message

Error message con entrada de texto

Error message con contenido

FieldSet

HTML utilizando legendText

Fieldset utilizando contenido en la leyenda

HTML utilizando legendData

HTML utilizando legendRef

File Upload

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

AnchorhinthintHint

Hint con entrada de texto

Hint con entrada HTML

Hint con entrada de contenido

Input

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Input-group

Ejemplo con contenido y NgModel

Ejemplo con parámetros y NgModel

HTML con campo independiente

HTML con campo utilizado en un formulario reactivo

HTML con campo utilizado en un formulario dirigido por plantilla

Label

Label con entrada de texto

Label con contenido

Legend

Hint con entrada de texto

Radios

ItemRadioData

Ejemplo con contenido y NgModel

Componente

HTML

Ejemplo parámetros y NgModel

Componente

HTML

Ejemplo con Formulario y condicionalesVer apartado ConditionDirective

SearchBar

Componente

Componente

Componente

Select

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Textarea

Componente

HTML

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

Anchor
hint
hint
Hint

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective