Propiedad Tipo Descripción Obligatorio id string Identificador del botón. text string Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html. Si para elementos a y button y cuando no se especifica html. html string Contenido del texto en formato HTML. Nota: no aplica al elemento input. Si para elementos a y button y cuando no se especifica text. classes string Clases CSS separadas por espacio que se aplicarán sobre el componente. element string Elemento HTML que se utilizará para representar el botón. Los valores posibles son: a (por defecto, si se incluye un href) button (por defecto) input name string Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input. value any Valor del botón a enviar como parte del formulario. Nota: sólo para el elemento button type string Tipo del botón. Los valores posibles son: submit (por defecto) button reset Nota: sólo para los elementos button e input. disabled boolean Indica si el botón está deshabilitado. preventDoubleClick boolean Evita un doble click. Nota: sólo para los elementos button e input. href string Ruta externa a la que se redirigirá al pulsar el botón.  No se aplicará cuando se especifique la propiedad routerLink.  Por defecto #. Nota: sólo para el elemento a. target string Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href. routerLink string|string[] Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). routerLinkActiveClasses string|string[] Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive). Propiedades de accesibilidad El componente button admite los siguientes parámetros de accesibilidad.

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

Button con entrada de texto <desy-button id="send" text="Enviar" ariaLabel="Prueba del componente button"></desy-button> Button con contenido <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 <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> @Component({ selector: '...', templateUrl: '...', ... }) export class DemoButtonComponent { ... handleClickEvent(event: any): void { ... } ... }

Propiedad Tipo Descripción Obligatorio id string Identificador del botón. text string Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html. Si para elementos a y button y cuando no se especifica html. html string Contenido del texto en formato HTML. Si para elementos a y button y cuando no se especifica text. classes string Clases CSS separadas por espacio que se aplicarán sobre el componente. element string Elemento HTML que se utilizará para representar el botón. Los valores posibles son: a (por defecto, si se incluye un href) button (por defecto) input state string Estado del componente. Los valores posibles son: is-loading → Representa el estado "cargando". Muestra el spinner de carga. Deberá añadirse la clase "c-button-loader--is-loading" al parámetro classes. is-success → Representa el estado "éxito". Muestra el icono ✓. Deberá añadirse la clase "c-button-loader--is-success" al parámetro classes. Por defecto, o si no se especifica el valor, se muestra el contenido de los parámetros text o html. successText string Texto que se interpretará por los lectores de pantalla cuando se llegue al estado de "éxito". loaderText string Texto que se interpretará por los lectores de pantalla mientras está en el estado de "cargando". loaderClasses string Clases que se aplican sobre spinner. name string Nombre o atributo name del elemento que representa el botón. Nota: sólo para los elementos button e input. value any Valor del botón a enviar como parte del formulario. Nota: sólo para el elemento button. type string Tipo del botón. Los valores posibles son: submit (por defecto) button reset Nota: sólo para los elementos button e input. disabled boolean Indica si el botón está deshabilitado. preventDoubleClick boolean Evita un doble click. Nota: sólo para los elementos button e input. href string Ruta externa a la que se redirigirá al pulsar el botón. Nota: sólo para el elemento a. target string Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href. routerLink string|string[] Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). routerLinkActiveClasses string|string[] Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive). Propiedades de accesibilidad El componente button-loader admite los siguientes parámetros de accesibilidad.

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

Button-loader con entrada de texto <desy-button-loader id="send" (clickEvent)="handleClickEvent($event)" text="Enviar" ariaLabel="Prueba del componente button"></desy-button-loader> @Component({ selector: '...', templateUrl: '...', ... }) export class DemoButtonComponent { ... handleClickEvent(event: any): void { ... } ... } Button-loader con contenido <desy-button-loader id="send" (clickEvent)="handleClickEvent($event)" ariaLabel="Prueba del componente button">Button-loader <strong>&nbsp;with HTML</strong></desy-button-loader> @Component({ selector: '...', templateUrl: '...', ... }) export class DemoButtonComponent { ... handleClickEvent(event: any): void { ... } ... } Button-loader con entrada de html y recogiendo el evento de salida <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 <desy-button-loader text="Comenzar" state="is-loading" classes="c-button-loader--is-loading" loaderText="Ejecutando proceso"></desy-button-loader> Button-loader exito <desy-button-loader text="Comenzar" state="is-success" classes="c-button-loader--is-succes" successText="Proceso ejecutado correctamente"></desy-button-loader>

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.

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

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

Propiedad Tipo Descripción Obligatorio id string Identificador del listado. Sí text string Contenido del botón en formato texto plano. No se aplicará cuando se especifique la propiedad html. Sí, cuando no se especifica html. html string Contenido del botón en formato HTML. Sí, cuando no se especifica text. isMultiselectable boolean Indica si se pueden seleccionar varias opciones doesChangeButtonText boolean Indica si, en caso de selección única, la opción seleccionada se muestra como texto del botón. label ListboxLabelData Permite especificar el texto descriptivo que precede al botón. classes string Clases CSS separadas por espacio que se aplicarán sobre el botón. 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. idPrefix string Prefijo para la id de los items. Si no se especifica se utilizará el id + ‘-listbox-item’. disabled boolean Deshabilita el boton items ListboxItemData[] Permite especificar los items del listado. Permite utilizar two-way binding para detectar cuando se activan o desactivan los items. ListboxLabelData Propiedad Tipo Descripción Obligatorio text string Contenido del label en formato texto plano. No se aplicará cuando se especifique la propiedad html. Sí, cuando no se especifica html. html string Contenido del label en formato HTML. Sí, cuando no se especifica text. classes string Clases CSS separadas por espacio que se aplicarán sobre el label. ListboxItemData Propiedad Tipo Descripción Obligatorio id string Identificador del item. Si no se especifica, se utilizará el prefijo del listbox + el índice en la lista. text string Contenido del item en formato texto plano. No se aplicará cuando se especifique la propiedad html. Sí, cuando no se especifica html. html string Contenido del item en formato HTML. active boolean Indica si el item está activo. Esta propiedad se modifica cuando el usuario selecciona o deselecciona el item. title string Atributo html title del item. El item admite los siguientes parámetros de accesibilidad. Propiedades de accesibilidad El componente admite los siguientes parámetros de accesibilidad.

Se permite proyectar contenido dentro del listbox para facilitar su uso. Para ello se facilitan los siguientes sub-componentes: ListboxLabelComponent <desy-listbox-label ...>...</desy-listbox-label> Permite utilizar el contenido especificado como descripción que precede al botón. Admite las mismas propiedades de entrada que el objeto ListboxLabelData. ListboxItemComponent <desy-listbox-item ...>...</desy-listbox-item> Permite utilizar el contenido especificado como item del listado a mostrar. Admite las mismas propiedades de entrada que el objeto ListboxItemData.

Evento Tipo Descripción itemsChange DOM Event Se emite cuando se produce un cambio en los items (como activar o desactivar una opción). activeItemChange DOM Event Se emite el item activo cuando este se selecciona.

Listbox base <desy-listbox text="Ejemplo" [label]="{ text: 'Texto de label' }" [isMultiselectable]="true" [id]="'listbox'" [items]="[ {text: 'item1'}, {html: 'item2 {{ svgIcon }}'}, {text: 'item editable'}]"></desy-listbox> Listbox con contenido <desy-listbox text="Ejemplo" [doesChangeButtonText]="true" [id]="'listbox'"> <desy-listbox-label>Texto de label</desy-listbox-label> <desy-listbox-item>item1</desy-listbox-item> <desy-listbox-item>item2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg></desy-listbox-item> <desy-listbox-item>item editable</desy-listbox-item> </desy-listbox>

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. classes string Clases CSS separadas por espacio que se aplicarán sobre el componente. type string Tipo de pill. Los valores posibles son: span (por defecto) button a href string Ruta externa a la que se redirigirá al pulsar el botón de tipo pill. No se aplicará cuando se especifique la propiedad routerLink.  Por defecto # Nota: sólo para el elemento a. target string Pestaña en la que se abrirá el enlace. Nota: sólo para el elemento a con href. routerLink string|string[] Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). routerLinkActiveClasses string|string[] Clases que se añadirán al componente cuando la ruta especificada en routerLink sea la actual (ver https://angular.io/api/router/RouterLinkActive). Propiedades de accesibilidad El componente admite los siguientes parámetros de accesibilidad.

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

pill <desy-pill id="example-pill" text="Focussed" classes="ds-focus" type="button" (clickEvent)="gestionarClick($event)"></desy-pill> Pill con contenido <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>

Propiedad Tipo Descripción Obligatorio isSwitch boolean Indica si es botón es switch pressed boolean Indica si el botón esta pulsado classes string Clases CSS separadas por espacio que se aplicarán sobre el componente. Propiedades de accesibilidad El componente admite los siguientes parámetros de accesibilidad.

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

Implementacion con iconos <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> @Component({ selector: '...', templateUrl: '...', ... }) export class DemoToggleComponent { ... toggle(event: any): void { ... } ... } Implementacion switch <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> @Component({ selector: '...', templateUrl: '...', ... }) export class DemoToggleComponent { ... toggle(event: any): void { ... } ... }