Versions Compared

Old Version 1

changes.mady.by.user Servicios Digitales de Aragón

Saved on

compared with

New Version Current

changes.mady.by.user JESUS MARIA CUADRA GRACIA

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

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

 

Accordion

...

Code Block
<desy-accordion ...></desy-accordion>

...

Expand
titleEjemplos
Implementación básica
Code Block
<desy-accordion [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

 

Con heading y showControls
Code Block
<desy-accordion [heading]="{text: 'Accordion example'}" [showControl]="true" [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

 

AccordionHistory

...

Code Block
<desy-accordion-history ...></desy-accordion-history>

...

Expand
titleEjemplos
Implementación con items activos
Code Block
<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
    <desy-accordion-header>Ejemplo 1</desy-accordion-header>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'current'" [open]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
    </desy-accordion-history-item>
</desy-accordion-history>

 

Implementación con items deshabilitados
Code Block
<desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="false">
    <desy-accordion-header>Ejemplo 2</desy-accordion-header>
    <desy-accordion-history-item [status]="'muted'" [disabled]="true">
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'muted'" [disabled]="true" [open]="true">
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2 - deshabilitado y abierto</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'currentmuted'" [disabled]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'" [disabled]="true">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
    </desy-accordion-history-item>
</desy-accordion-history>

Implementación con botones de mostrar y ocultar personalizados

Code Block
  <desy-accordion-history [id]="'id-e1'" [idPrefix]="'e1'" [showControl]="false" [allowMultiple]="true" [allowToggle]="true">
    <desy-accordion-header>Ejemplo 1</desy-accordion-header>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 1</desy-accordion-header>
        <desy-content>Ejemplo item 1.</desy-content>
        <desy-accordion-item-show-button>
          MOSTRAR TODO
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          OCULTAR TODO
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item>
        <desy-accordion-header>Item 2</desy-accordion-header>
        <desy-content>Ejemplo item 2.</desy-content>
        <desy-accordion-item-show-button>
          <strong>Mostrar contenido</strong>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <strong>Ocultar contenido</strong>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'current'" [open]="true">
        <desy-accordion-header>Item 3</desy-accordion-header>
        <desy-content>Ejemplo item 3.</desy-content>
        <desy-accordion-item-show-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
    <desy-accordion-history-item [status]="'pending'">
        <desy-accordion-header>Item 4</desy-accordion-header>
        <desy-content>Ejemplo item 4 - pending.</desy-content>
        <desy-accordion-item-show-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-show-button>
        <desy-accordion-item-hide-button>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>
        </desy-accordion-item-hide-button>
    </desy-accordion-history-item>
</desy-accordion-history>

 

 

Alert

...

Code Block
<desy-alert ...></desy-alert>

...

Expand
titleEjemplos
Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...'
})
export class DemoAlertComponent {
  templateActive = true;
  ...
}
HTML
Code Block
<ng-template #alertTemplateContent>
  <desy-notification id="alert-template" [title]="{'text':'El documento se ha cargado correctamente'}" type="success" [isDismissible]="true" (isOpenChange)="templateActive = $event"></desy-notification>
</ng-template>
<desy-alert id="alert-id" [caller]="alertTemplateContent" [active]="templateActive" [focusFirst]="true" classes="mt-5"></desy-alert>

 

Collapsible

...

Code Block
<desy-collapsible ...></desy-collapsible>

...

Expand
titleEjemplos

 

Collapsible abierto con entrada de texto
Code Block
<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post." open=true></desy-collapsible>

 

Collapsible cerrado con entrada de texto

Code Block
<desy-collapsible id="help-with-nationality" headerText="Help with nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."></desy-collapsible>

 

Collapsible cerrado con contenido

Code Block
<desy-collapsible id="help-with-nationality" text="We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.">Esto es un collapsibe <strong>con HTML</desy-collapsible>

 

Description-list

...

Code Block
<desy-description-list ...></desy-description-list>

...

Expand
titleEjemplos
Ejemplo con items por contenido
Code Block
<desy-description-list [id]="'id'">
  <desy-description-item>
    <desy-term>term</desy-term>
    <desy-definition [classes]="'font-bold text-xl'">definition</desy-definition>
  </desy-description-item>
</desy-description-list>

 

Ejemplo con items como parámetros
Code Block
<desy-description-list [id]="'id'" [items]="[{'term':{'text':'term'},'definition':{'text':'definition','classes':'font-bold text-xl'}}]"></desy-description-list>

 

Ejemplo con atributos
Code Block
<desy-description-list [id]="'description'" [items]="[{'term':{'text':'term','id':'term'},'definition':{'text':'definition','id':'definition'},'id':'item'}]"></desy-description-list>

 

Details

...

Code Block
<desy-details ...> Detalles </desy-destails>

...

Expand
titleEjemplos
Details cerrado con entra de texto
Code Block
<desy-details summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>

Details abierto con entrada de texto
Code Block
<desy-details [open]="true" summaryText="Help with nationality">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</desy-details>

 

Item

...

Code Block
<desy-item ...></desy-item>

...

Expand
titleEjemplos

Implementación con contenido

Code Block
<desy-item>
  <desy-icon [type]="'document'"></desy-icon>
  <desy-title [classes]="'font-bold'">Registro de alta de la asociación</desy-title>
  <desy-description>Documento acreditativo de registro de alta de la asociación</desy-description>
  <desy-item-item>Desde modelo</desy-item-item>
  <desy-item-item>Obligatorio previo a resolución</desy-item-item>
  <desy-item-item>Condicionado</desy-item-item>
  <desy-item-content-bottom>Modelo: <a class=" c-link break-all " href="#">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a></desy-item-content-bottom>
  <desy-item-content-right>
    <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button>
    <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
  </desy-item-content-right>
</desy-item>

 

Implementación básica

Code Block
<desy-item [title]="{'text' : 'Registro de alta de la asociación'}"></desy-item>

 

Implementación con HTML

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}"></desy-item>

 

Implementación con descripción

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
	descriptionHtml = 'Documento acreditativo de registro de alta de la <strong class=\\" font-bold \\">asociación</strong>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}" [description]="{'html': descriptionHtml}"></desy-item>

 

Implementación con items

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}" [items]="['Desde modelo', 'Obligatorio previo a resolución', 'Condicionado']"></desy-item>

 

Implementación con content

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
	contentHtml = 'Modelo: <a class=\" c-link break-all \" href=\" # \">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}" [content]="{'html': contentHtml, 'classes': 'text-sm text-neutral-dark'}"></desy-item>

 

Implementación con arrastrable

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}" [isDraggable]="true"></desy-item>

 

Implementación con tipo documento

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
	titleHtml = 'Las entidades beneficiarias deberán tener su sede y actividad <strong class=\\" font-bold \\">principal en Aragón.</strong>';
}
HTML
Code Block
<desy-item [title]="{'html' : titleHtml}" [icon]="{'type': 'document'}"></desy-item>

 

Implementación con caller, title, description, items, content e icon

Componente
Code Block
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoItemComponent {
  title: TitleItemData;
  description: DescriptionItemData;
  items: string[];
  content: ContentItemData;
  icon: IconItemData;
  
  constructor() {
    this.title = {
      text: 'Registro de alta de la asociación',
      html: null,
      classes: 'font-bold'
    };
    this.description = {
      text: 'Documento acreditativo de registro de alta de la asociación',
      html: null,
      classes: null
    };
    this.items = [ 'Desde modelo', 'Obligatorio previo a resolución', 'Condicionado'];
    this.content = {
      text: null,
      html: 'Modelo: <a class=\" c-link break-all \" href=\" # \">aragon.es/tramites/19283-19348401/Modelofianza.pdf</a>',
      classes: 'text-neutral-dark'
    };
    this.icon = {
      type: 'document',
      html: null
    };
  }
}
HTML
Code Block
  <ng-template #caller1>
    <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button>
    <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
  </ng-template>
  <desy-item
    [title]="title"
    [description]="description"
    [items]="items"
    [content]="content"
    [icon]="icon"></desy-item>

 

 

Media-object

...

Code Block
<desy-media-object ...></desy-media-object>

...

Expand
titleEjemplos

Classes añadiendo reverse
Code Block
<desy-media-object id="identificador" reverse="true"
        figureHtml="<div class='w-20 h-20'><div class='h-full border-4 border-dashed border-gray-200 rounded-lg'></div></div>"
        [caller]="callerRef"></desy-media-object>
   
<ng-template #callerRef>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.
</ng-template>

Classes añadiendo padding y margin
Code Block
<desy-media-object id="identificador" figureClasses="mr-base" contentClasses="text-sm" classes="mb-base"
        figureHtml="<div class='w-20 h-20 '><div class='h-full border-4 border-dashed border-gray-200 rounded-lg'></div></div>"
        [caller]="callerRef"></desy-media-object>
   
<ng-template #callerRef>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.
</ng-template>

 

 

Ejemplo con contenido

 

Code Block
<desy-media-object [classes]="classes" [id]="id"
          [figureClasses]="figureClasses" [contenClasses]="contenClasses" [center]="center" [reverse]="reverse">
           <desy-media-object-figure>
            <div class='w-20 h-20'><div class='h-full border-4 border-dashed border-blue-200 rounded-lg'></div></div>
           </desy-media-object-figure>
           <desy-content>
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit.</strong> Integer maximus, <i>elit et faucibus finibus</i>, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.
          </desy-content>
</desy-media-object>

 

Pagination

...

Code Block
<desy-pagination ...></desy-pagination>

...

Expand
titleEjemplos

Implementación por defecto
Code Block
<desy-pagination [items]="[{href: '#'}, {href: '#'}]" [itemsPerPage]="10" [totalItems]="64" [idPrefix]="'simple'"></desy-pagination>

 

Implementación con selector
Code Block
<desy-pagination [items]="[{href: '#'}, {href: '#'}]" [itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'"></desy-pagination>

 

 

Spinner

...

Code Block
<desy-spinner ...></desy-spinner>

...

Expand
titleEjemplos
Spinner simple
Code Block
<desy-spinner id="identificador" text="Cargando..." classes="text-2xl" ariaLabel="Prueba del componente spinner"></desy-spinner >

 

Status

...

Code Block
<desy-status...></desy-status>

...

Expand
titleEjemplos
Status con texto e icon de tipo success
Code Block
<desy-status text='completo' [icon]="{'type':'success'}"></desy-status>

 

Status con texto e icon con contenido
Code Block
<desy-status text='texto editable' [icon]="icon"">Status with <strong>HTML</strong></desy-status>

 

 

Status con texto, classes e icon de tipo alert

Code Block
<desy-status text='incompleto' classes='text-alert-base' [icon]="{'type':'alert'}"></desy-status>

 

Status-item

...

Code Block
<desy-status-item...></desy-status-item>

...

Expand
titleEjemplos
Status-item con hint y status de tipo success
Code Block
<ng-template #caller3>
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
</ng-template>

<desy-status-item id="with-title-html"
    [title]="{'text':'Personas de la unidad familiar'}"
    [hint]="{'text':'2 personas añadidas','id':'with-hint-html-hint'}"
    [status]="{'text':'Aportado','icon':{'type':'success'}}"
    [caller]="caller3"></desy-status-item>

 

Status-item con errorMessage y status

Code Block
<ng-template #caller3>
    <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
</ng-template>

<desy-status-item id="with-status-alert" classes="border-l-4 border-alert-base"
    [title]="{'text':'Datos adicionales del solicitante'}"
    [errorMessage]="{'text':'Es necesario aportar este documento para enviar el trámite','classes':'my-sm text-alert-base'}"
    [status]="{'text':'Incompleto','icon':{'type':'alert'},'classes':'text-alert-base'}"
    [caller]="caller3"></desy-status-item>

Status-item con items y status

Code Block
<ng-template #caller1>
    <button class="c-button c-button--transparent" data-module="c-button">Action</button>
</ng-template>

<desy-status-item id="only-items"
    [items]="[{'term':{'text':'term'},'definition':{'text':'definition'}},{'term':{'text':'term'},'definition':{'text':'definition'}},{'term':{'text':'term'},'definition':{'text':'definition'}}]"
    [status]="{'text':'status','icon':{'type':'success'}}"
    [caller]="caller1"></desy-status-item>

 

Status-item con contenido
Code Block
<desy-status-item [id]="id + '-content'" [classes]='classes'
                  [role]="role"
                  [ariaLabel]="ariaLabel"
                  [ariaDescribedBy]="ariaDescribedBy"
                  [ariaLabelledBy]="ariaLabelledBy"
                  [ariaHidden]="ariaHidden"
                  [ariaDisabled]="ariaDisabled"
                  [ariaControls]="ariaControls"
                  [ariaCurrent]="ariaCurrent"
                  [ariaLive]="ariaLive"
                  [ariaExpanded]="ariaExpanded"
                  [ariaErrorMessage]="ariaErrorMessage"
                  [ariaHasPopup]="ariaHasPopup"
                  [tabindex]="tabindex">
    <desy-title [classes]="title.classes">
      <ng-container *appCustomInnerContent="{ html: title.html, text: title.text }"></ng-container>
    </desy-title>
    <desy-hint [classes]="hint.classes" [id]="hint.id"
               [role]="hint.role"
               [ariaLabel]="hint.ariaLabel"
               [ariaDescribedBy]="hint.ariaDescribedBy"
               [ariaLabelledBy]="hint.ariaLabelledBy"
               [ariaHidden]="hint.ariaHidden"
               [ariaDisabled]="hint.ariaDisabled"
               [ariaControls]="hint.ariaControls"
               [ariaCurrent]="hint.ariaCurrent"
               [ariaLive]="hint.ariaLive"
               [ariaExpanded]="hint.ariaExpanded"
               [ariaErrorMessage]="hint.ariaErrorMessage"
               [ariaHasPopup]="hint.ariaHasPopup"
               [tabindex]="hint.tabindex">
      <ng-container *appCustomInnerContent="{ html: hint.html, text: hint.text }"></ng-container>
    </desy-hint>
    <desy-error-message [visuallyHiddenText]="errorMessage.visuallyHiddenText"
                        [id]="(errorId ? errorId : id + '-error')" [classes]="errorMessage.classes"
                        [role]="errorMessage.role"
                        [ariaLabel]="errorMessage.ariaLabel"
                        [ariaDescribedBy]="(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)"
                        [ariaLabelledBy]="errorMessage.ariaLabelledBy"
                        [ariaHidden]="errorMessage.ariaHidden"
                        [ariaDisabled]="errorMessage.ariaDisabled"
                        [ariaControls]="errorMessage.ariaControls"
                        [ariaCurrent]="errorMessage.ariaCurrent"
                        [ariaLive]="errorMessage.ariaLive"
                        [ariaExpanded]="errorMessage.ariaExpanded"
                        [ariaErrorMessage]="errorMessage.ariaErrorMessage"
                        [ariaHasPopup]="errorMessage.ariaHasPopup"
                        [tabindex]="errorMessage.tabindex">
      <ng-container *appCustomInnerContent="{ html: errorMessage.html, text: errorMessage.text }"></ng-container>
    </desy-error-message>
    <desy-description-item *ngFor="let item of items" [id]="item.id" [classes]="item.classes">
      <desy-term [classes]="item.term.classes" [id]="item.term.id">
        <ng-container *appCustomInnerContent="{ html: item.term.html, text: item.term.text }"></ng-container>
      </desy-term>
      <desy-definition [classes]="item.definition.classes" [id]="item.definition.id">
        <ng-container *appCustomInnerContent="{ html: item.definition.html, text: item.definition.text }"></ng-container>
      </desy-definition>
    </desy-description-item>
    <desy-content>
      <button class="c-button c-button--transparent" data-module="c-button">Modificar</button>
    </desy-content>
    <desy-status [text]="status.text" [icon]="status.icon" [classes]="status.classes" [id]="status.id"
                 [role]="status.role"
                 [ariaLabel]="status.ariaLabel"
                 [ariaDescribedBy]="status.ariaDescribedBy"
                 [ariaLabelledBy]="status.ariaLabelledBy"
                 [ariaHidden]="status.ariaHidden"
                 [ariaDisabled]="status.ariaDisabled"
                 [ariaControls]="status.ariaControls"
                 [ariaCurrent]="status.ariaCurrent"
                 [ariaLive]="status.ariaLive"
                 [ariaExpanded]="status.ariaExpanded"
                 [ariaErrorMessage]="status.ariaErrorMessage"
                 [ariaHasPopup]="status.ariaHasPopup"
                 [tabindex]="status.tabindex"></desy-status>
</desy-status-item>

 

Tabs

...

Code Block
<desy-tabs...></desy-tabs>

...

Expand
titleEjemplos
Tabs con idPrefix, tabListAriaLabel, title, disabeld, item.panel.classes e item.panel.html como template.
Code Block
<ng-template #html1>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
</ng-template>
<ng-template #html2>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html3>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>
<ng-template #html4>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
</ng-template>

<desy-tabs idPrefix="tab-example" tablistAriaLabel="Tab example" title="Implementación Default"
    [items]="[{'text':'Tab 1','id':'tab-example-a','panel':{'html':html1,'classes':'bg-warning-light'}},
        {'text':'Tab 2','id':'tab-example-b', 'disabled':'true','panel':{'html':html2}},
        {'text':'Tab 3','id':'tab-example-c','panel':{'html':html3,'classes':'bg-warning-light'}},
        {'text':'Tab 4','id':'tab-example-d','panel':{'html':html4}}]"></desy-tabs>

 

Ejemplo con contenido

Code Block
<desy-tabs [idPrefix]="'tab-example'">
  <desy-tab-item [id]="'tab-example-a'">
    <desy-content>Tab 1</desy-content>
    <desy-panel [classes]="'bg-warning-light'">
      <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-b'" [disabled]="true">
    <desy-content>Tab 2</desy-content>
    <desy-panel>
      <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-c'">
    <desy-content>Tab 3</desy-content>
    <desy-panel [classes]="'bg-warning-light'">
      <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
    </desy-panel>
  </desy-tab-item>
  <desy-tab-item [id]="'tab-example-d'">
    <desy-content>Tab 4</desy-content>
    <desy-panel>
      <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
    </desy-panel>
  </desy-tab-item>
</desy-tabs>

 

Tooltip

...

Code Block
<desy-tooltip ...>...</desy-tooltip>

...

Expand
titleEjemplos
Tooltip con atributos de entrada
Code Block
<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>
<desy-tooltip [id]="'tooltip'" [classes]="'text-alert-base'" [text]="'Ejemplo'" [icon]="{'type':'alert'}" [caller]="caller"></desy-tooltip>
Tooltip con contenido
Code Block
<desy-tooltip [id]="'tooltip'" [complex]="true">
  <desy-content>Ejemplo</desy-content>
  <desy-icon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-neutral-dark" role="img" aria-label="Ayuda"><path d="M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
  </desy-icon>
  <desy-tooltip-content>
    <p>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>
  </desy-tooltip-content>
</desy-tooltip>

 

 

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


Servicios relativos a vistas

...

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

 

AlertService

...

Servicio que permite abrir y cerrar alerts de forma dinámica, es decir, sin tener que especificar los componentes en el HTML.

Contiene los siguientes métodos:

openAlert

Permite abrir un alert en una posición específica del html.

...

Expand
titleRespuesta

El servicio devuelve un objeto Promise<OpenAlertResult>

OpenDialogResult

Propiedad

Tipo

Descripción

component

ComponentRef<any>

Si el parámetro caller utilizado es de tipo NotificationOptions, referencia al componente interno creado.

alert

ComponentRef<AlertComponent>

Referencia al componente diálogo creado.

 

closeAlert

Permite cerrar un alert.

Expand
titleParámetros

Propiedad

Tipo

Descripción

Obligatorio

alert

AlertComponent

ComponentRef<AlertComponent>

Alert a cerrar.

Sí

onCloseAlert

Permite gestionar el evento de cierre de un alert.

...