Page Comparison

<desy-accordion-header ...>...</desy-accordion-header>

<desy-accordion-item ...>...</desy-accordion-item>

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

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

@Component({
  selector: '...',
  templateUrl: '...'
})
export class DemoAlertComponent {
  templateActive = true;
  ...
}

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

<desy-title>...</desy-title>

<desy-description>...</desy-description>

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

<desy-item-content-bottom ...>...</desy-item-content-bottom>

<desy-item-content-right>...</desy-item-content-right>

<desy-icon>...</desy-icon>

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

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

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

<desy-item [title]="{'html' : titleHtml}"></desy-item>

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

<desy-item [title]="{'html' : titleHtml}" [description]="{'html': descriptionHtml}"></desy-item>

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

<desy-item [title]="{'html' : titleHtml}" [items]="['Desde modelo', 'Obligatorio previo a resolución', 'Condicionado']"></desy-item>

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

<desy-item [title]="{'html' : titleHtml}" [content]="{'html': contentHtml, 'classes': 'text-sm text-neutral-dark'}"></desy-item>

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

<desy-item [title]="{'html' : titleHtml}" [isDraggable]="true"></desy-item>

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

<desy-item [title]="{'html' : titleHtml}" [icon]="{'type': 'document'}"></desy-item>

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

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

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

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

<desy-pagination [items]="[{href: '#'}, {href: '#'}]" [itemsPerPage]="10" [totalItems]="64" [idPrefix]="'simple'"></desy-pagination>

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

<desy-title>...</desy-title>

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

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

<desy-description-item>...</desy-description-item>

<desy-term>...</desy-term>

<desy-definition>...</desy-definition>

<desy-content>...</desy-content>

<desy-status>...</desy-status>

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

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

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

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