Page Comparison

...

Versión

...

Fecha

...

Editor

...

Cambios

...

5.1.0

...

19 Jan 2022

...

Jairo Ballester

...

Table of Contents

minLevel	2
maxLevel	2

...

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

Button

...

Code Block

language	xml

<desy-button ...></desy-button>

...

Expand

title	Ejemplos

Button con entrada de texto

Code Block

language	xml

<desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button>

Button con contenido

Code Block

language	xml

<desy-button id="send" ariaLabel="Prueba del componente button">Button with <strong>&nbsp;HTML</strong></desy-button>

Button con entrada de html y recogiendo el evento de salida

Code Block

language	xml

<desy-button id="delete" classes="c-button-loader--alert" (clickEvent)="handleClickEvent($event)" html="Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path fill=\"currentColor\" stroke=\"none\" d=\"M14.621 7.928a.643.643 0 00-.478-.214H3.857a.643.643 0 00-.643.711l.965 9A.643.643 0 004.82 18h8.358a.643.643 0 00.642-.575l.965-9a.643.643 0 00-.165-.497zM16.071 3.59h-3.214a.321.321 0 01-.321-.322V2.25A2.253 2.253 0 0010.286 0H7.714a2.26 2.26 0 00-2.25 2.215L5.45 3.272a.323.323 0 01-.322.318H1.93a1.286 1.286 0 000 2.571H16.07a1.286 1.286 0 000-2.571zM7.393 2.245a.323.323 0 01.321-.316h2.572a.321.321 0 01.321.321v1.018a.321.321 0 01-.321.322H7.699a.323.323 0 01-.322-.327z\"/>
"></desy-button>

Code Block

language	typescript

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

Button Loader

...

Code Block

language	xml

<desy-button-loader ...></desy-button-loader>

...

Expand

title	Ejemplos

Button-loader con entrada de texto

Code Block

language	xml

<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader>

Code Block
@Component({ selector: '...', templateUrl: '...', ... }) export class DemoButtonComponent { ... handleClickEvent(event: any): void { ... } ... }

Button-loader con contenido

Code Block

language	xml

<desy-button-loader id="send" (clickEvent)="handleClickEvent($event)"  ariaLabel="Prueba del componente button">Button-loader <strong>&nbsp;with HTML</strong></desy-button-loader>

Code Block

language	xml

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoButtonComponent {
	...
	handleClickEvent(event: any): void {
	   ...
	}
	...
}

Button-loader con entrada de html y recogiendo el evento de salida

Code Block

language	xml

<desy-button-loader id="delete" classes="c-button-loader--alert" html="Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path fill=\"currentColor\" stroke=\"none\" d=\"M14.621 7.928a.643.643 0 00-.478-.214H3.857a.643.643 0 00-.643.711l.965 9A.643.643 0 004.82 18h8.358a.643.643 0 00.642-.575l.965-9a.643.643 0 00-.165-.497zM16.071 3.59h-3.214a.321.321 0 01-.321-.322V2.25A2.253 2.253 0 0010.286 0H7.714a2.26 2.26 0 00-2.25 2.215L5.45 3.272a.323.323 0 01-.322.318H1.93a1.286 1.286 0 000 2.571H16.07a1.286 1.286 0 000-2.571zM7.393 2.245a.323.323 0 01.321-.316h2.572a.321.321 0 01.321.321v1.018a.321.321 0 01-.321.322H7.699a.323.323 0 01-.322-.327z\"/>
"></desy-button-loader>

Button-loader cargando

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader>

Button-loader exito

Code Block

language	xml

<desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader>

...

Code Block

language	xml

<desy-dropdown ...></desy-dropdown>

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto 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.
hiddenText	string	Contenido del texto oculto en formato texto plano
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
classesTooltip	string	Clases CSS separadas por espacio que se aplicarán sobre el tooltip.
classesContainer	string	Clases CSS separadas por espacio que se aplicarán sobre el container del componente.
disabled	boolean	Deshabilita el boton
caller	TemplateRef <any>	Template para mostrar dentro del tooltip

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Expand

title	Eventos de salida

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

Expand

title	Ejemplos

Dropdown base

Code Block

language	xml

<desy-dropdown text="Desplegable" [caller]="caller"></desy-dropdown>
<ng-template #caller>
      <div class="w-48 p-2"><div class="border-4 border-dashed border-gray-200 rounded-lg h-40"></div></div>
    </ng-template>

Dropdown con menu

Code Block

language	html

<ng-template #caller1>
      <ul>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 1</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 2</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 3</a>
        </li>
      </ul>
    </ng-template>
<desy-dropdown text="Desplegable" [caller]="caller1"></desy-dropdown>

Dropdown con menu y contenido

Code Block

language	html

<ng-template #caller1>
      <ul>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 1</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 2</a>
        </li>
        <li>
          <a href="" class="flex items-center px-base py-xs hover:bg-primary-base hover:text-white truncate  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">Link 3</a>
        </li>
      </ul>
    </ng-template>
<desy-dropdown [caller]="caller1">Desplegable <strong>&nbsp;con HTML</strong><svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></desy-dropdown>

Listbox

...

Code Block

language	xml

<desy-listbox ...></desy-listbox>

...

Anchor
errorMessage
errorMessage
Pill

...

Code Block

language	xml

<desy-pill ...></desy-pill>

...

Expand

title	Ejemplos

pill

Code Block

language	xml

<desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill>

Pill con contenido

Code Block

language	xml

<desy-pill id="example-pill" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)">Esto es un pill <strong>&nbsp;con HTML</strong><svg viewBox="0 0 140 140" class=" self-center ml-2 " aria-hidden="true" width=" .75em " height=" .75em "><path fill="currentColor" d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z"></path></svg></desy-pill>

Toggle

...

Code Block

language	html

<desy-toggle ... >
  <desy-toggle-onState ...></desy-toggle-onState>
  <desy-toggle-offState ...></desy-toggle-offState>
</desy-toggle>

...

Expand

title	Ejemplos

Implementacion con iconos

Code Block

language	html

<desy-toggle [id]="'id2'" [isSwitch]="isSwitch" [pressed]="pressed" [classes]="classes" (clickEvent)="toggle($event)">
  <desy-toggle-on-state><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar</span></desy-toggle-on-state>
  <desy-toggle-off-state><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar</span><span class="sr-only">Mostrar</span></span></desy-toggle-off-state>
</desy-toggle>

Code Block
@Component({ selector: '...', templateUrl: '...', ... }) export class DemoToggleComponent { ... toggle(event: any): void { ... } ... }

Implementacion switch

Code Block

language	html

<desy-toggle [id]="'id3'" [isSwitch]="'true'" [pressed]="pressed" [classes]="classes" (clickEvent)="toggle($event)">
  <desy-toggle-on-state><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" ></span></span></desy-toggle-on-state>
  <desy-toggle-off-state><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" ></span></span></desy-toggle-off-state>
</desy-toggle>

Code Block
@Component({ selector: '...', templateUrl: '...', ... }) export class DemoToggleComponent { ... toggle(event: any): void { ... } ... }

Accesibilidad

...

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

...

Versions Compared

Old Version 1

New Version Current

Key

Button

Button con entrada de texto

Button con contenido

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con contenido

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown base

Dropdown con menu

Dropdown con menu y contenido

Listbox

Anchor
errorMessage
errorMessage
Pill

pill

Pill con contenido

Toggle

Accesibilidad

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Button

Button con entrada de texto

Button con contenido

Button con entrada de html y recogiendo el evento de salida

Button Loader

Button-loader con entrada de texto

Button-loader con contenido

Button-loader con entrada de html y recogiendo el evento de salida

Button-loader cargando

Button-loader exito

Dropdown

Dropdown base

Dropdown con menu

Dropdown con menu y contenido

Listbox

AnchorerrorMessageerrorMessagePill

pill

Pill con contenido

Toggle

Accesibilidad

Anchor
errorMessage
errorMessage
Pill