desy-angular 4.0.0 → 5.1.1

package/fesm2015/desy-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, EventEmitter, Output, ElementRef, HostListener, QueryList, ViewChildren, ContentChildren, ChangeDetectorRef, forwardRef, Pipe, Optional, Host, Directive, TemplateRef, ComponentFactoryResolver, ViewContainerRef, Type, ComponentRef, Injectable, Injector, ApplicationRef, HostBinding, ContentChild, SecurityContext, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, EventEmitter, HostBinding, Output, ElementRef, QueryList, ViewChildren, ContentChildren, ChangeDetectorRef, HostListener, forwardRef, Pipe, Optional, Host, Directive, TemplateRef, ChangeDetectionStrategy, ViewContainerRef, ComponentFactoryResolver, Type, ComponentRef, Injectable, Injector, ApplicationRef, ContentChild, SecurityContext, NgModule } from '@angular/core';
 import { __decorate, __awaiter } from 'tslib';
 import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
@@ -8,7 +8,6 @@ import { Location, CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 /**
  * componente para heredar los atributos de accesibilidad
@@ -131,23 +130,13 @@ AccessibilityAndContentRequiredComponent.propDecorators = {
     tabindex: [{ type: Input }]
 };
 
-class ButtonComponent extends AccessibilityAndContentRequiredComponent {
+class ButtonComponent extends AccessibilityComponent {
     constructor() {
         super(...arguments);
+        this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
         this.clickEvent = new EventEmitter();
         this.avoidingDoubleClick = false;
     }
-    ngOnInit() {
-        //this.required();
-    }
-    ngOnChanges(changes) {
-        //this.required();
-    }
-    required() {
-        if (this.getElement() !== this.staticElementTypeInput) {
-            //textOrHtmlRequiredFunction(this.text, this.html);
-        }
-    }
     onClick(event) {
         if (this.preventDoubleClick) {
             if (!this.avoidingDoubleClick) {
@@ -209,12 +198,15 @@ ButtonComponent.ELEMENT_INPUT = 'input';
 ButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-button',
-                template: "<ng-template #contentTemplate>\r\n   <ng-content></ng-content>\r\n</ng-template>\r\n<!-- button -->\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\r\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n        [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></a>\r\n\r\n     <a *ngIf=\"!routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [href]=\"href | externalHref\"\r\n        [attr.target]=\"target ? target : null\"\r\n        [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></a>\r\n\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n          [class]=\"getClassNames()\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></button>\r\n\r\n  <input *ngSwitchCase=\"staticElementTypeInput\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [value]=\"text ? text : null\"\r\n         [attr.disabled]=\"isDisabled()\"\r\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n         [attr.type]=\"type ? type : 'submit'\"\r\n         [class]=\"getClassNames()\"\r\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n</ng-container>\r\n\r\n<!-- /button -->\r\n"
+                template: "<ng-template #contentTemplate>\r\n   <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\r\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\r\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n     </a>\r\n\r\n     <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [href]=\"href | externalHref\"\r\n        [attr.target]=\"target ? target : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\r\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n     </a>\r\n\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n          [class]=\"getClassNames()\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n\r\n  <input *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\r\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [value]=\"text ? text : null\"\r\n         [attr.disabled]=\"isDisabled()\"\r\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n         [attr.type]=\"type ? type : 'submit'\"\r\n         [class]=\"getClassNames()\"\r\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n</ng-container>\r\n"
             },] }
 ];
 ButtonComponent.propDecorators = {
+    hostTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
     id: [{ type: Input }],
     classes: [{ type: Input }],
+    html: [{ type: Input }],
+    text: [{ type: Input }],
     element: [{ type: Input }],
     name: [{ type: Input }],
     type: [{ type: Input }],
@@ -229,6 +221,10 @@ ButtonComponent.propDecorators = {
 };
 
 class ButtonLoaderComponent extends ButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
+    }
     getClassNames() {
         let classNames = 'c-button-loader relative';
         if (this.classes) {
@@ -261,10 +257,11 @@ ButtonLoaderComponent.DEFAULT_SUCCESS_TEXT = 'Acción realizada con éxito';
 ButtonLoaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-button-loader',
-                template: "<ng-template #spinnerTemplate>\r\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\r\n    <desy-spinner [text]=\"getSpinnerText()\" [classes]=\"loaderClasses\" ></desy-spinner>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #successTemplate>\r\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\r\n    <p class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</p>\r\n    <span aria-hidden=\"true\">\u2713</span>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n<!-- button-loader -->\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n    <a *ngIf=\"routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n      [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n\r\n    <a *ngIf=\"!routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\r\n      [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"(role ? role : null)\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [class]=\"getClassNames()\">\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n  </button>\r\n\r\n  <div *ngSwitchCase=\"staticElementTypeInput\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n       [attr.name]=\"name ? name : null\"\r\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n       [attr.disabled]=\"isDisabled()\"\r\n       [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n       [attr.role]=\"(role ? role : null)\"\r\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n       [class]=\"getClassNames()\"\r\n       [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\">\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\r\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" class=\"bg-transparent font-semibold\">\r\n    </span>\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n  </div>\r\n</ng-container>\r\n<!-- /button-loader -->\r\n"
+                template: "<ng-template #spinnerTemplate>\r\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\r\n    <desy-spinner [text]=\"getSpinnerText()\" [classes]=\"loaderClasses\" ></desy-spinner>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #successTemplate>\r\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\r\n    <p class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</p>\r\n    <span aria-hidden=\"true\">\u2713</span>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n    <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n\r\n    <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"(role ? role : null)\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [class]=\"getClassNames()\">\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n  </button>\r\n\r\n  <div *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\r\n       [attr.name]=\"name ? name : null\"\r\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n       [attr.disabled]=\"isDisabled()\"\r\n       [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n       [attr.role]=\"(role ? role : null)\"\r\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n       [class]=\"getClassNames()\"\r\n       [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\">\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\r\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" class=\"bg-transparent font-semibold\">\r\n    </span>\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n  </div>\r\n</ng-container>\r\n"
             },] }
 ];
 ButtonLoaderComponent.propDecorators = {
+    hostTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
     loaderText: [{ type: Input }],
     loaderClasses: [{ type: Input }],
     state: [{ type: Input }],
@@ -326,96 +323,97 @@ class DropdownComponent extends AccessibilityAndContentRequiredComponent {
     constructor() {
         super(...arguments);
         this.clickEvent = new EventEmitter();
-        this.show = false;
+        this.isOpen = false;
         this.clickOutsideEnabled = false;
     }
     ngOnInit() {
-        setTimeout(() => {
-            let contentTooltip;
-            if (this.dropdownContent && this.dropdownContent.nativeElement) {
-                contentTooltip = this.dropdownContent.nativeElement;
-                contentTooltip.style.display = 'block';
-                this.tippyProperties = {
-                    placement: 'bottom-start',
-                    inlinePositioning: true,
-                    content: contentTooltip,
-                    allowHTML: true,
-                    trigger: 'click',
-                    hideOnClick: true,
-                    interactive: true,
-                    arrow: false,
-                    offset: [0, -10],
-                    theme: '',
-                    plugins: [{
-                            name: 'hideOnEsc',
-                            defaultValue: true,
-                            fn({ hide }) {
-                                function onKeyDown(event) {
-                                    if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                                        hide();
-                                    }
-                                }
-                                return {
-                                    onShow() {
-                                        document.addEventListener('keydown', onKeyDown);
-                                    },
-                                    onHide() {
-                                        document.removeEventListener('keydown', onKeyDown);
-                                    },
-                                };
-                            },
-                        }],
-                    role: false,
-                    aria: {
-                        content: 'auto',
-                    },
-                    onShown(instance) {
-                        const firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
-                        if (firstFocusable) {
-                            setTimeout(() => firstFocusable.focus());
+        let contentTooltip;
+        if (this.dropdownContent && this.dropdownContent.nativeElement) {
+            contentTooltip = this.dropdownContent.nativeElement;
+            contentTooltip.style.display = 'block';
+            this.tippyProperties = {
+                placement: 'bottom-start',
+                inlinePositioning: true,
+                content: contentTooltip,
+                allowHTML: true,
+                trigger: 'click',
+                hideOnClick: true,
+                interactive: true,
+                arrow: false,
+                offset: [0, -10],
+                theme: '',
+                plugins: [
+                    {
+                        name: 'hideOnPopperBlur',
+                        defaultValue: true,
+                        fn(instance) {
+                            return {
+                                onCreate() {
+                                    instance.popper.addEventListener('focusout', (event) => {
+                                        if (instance.props.hideOnPopperBlur &&
+                                            event.relatedTarget &&
+                                            !instance.popper.contains(event.relatedTarget)) {
+                                            instance.hide();
+                                        }
+                                    });
+                                },
+                            };
                         }
+                    },
+                    {
+                        name: 'hideOnEsc',
+                        defaultValue: true,
+                        fn({ hide }) {
+                            function onKeyDown(event) {
+                                if (event.key === DropdownComponent.KEY_CODE_ESC) {
+                                    hide();
+                                }
+                            }
+                            return {
+                                onShow() {
+                                    document.addEventListener('keydown', onKeyDown);
+                                },
+                                onHide() {
+                                    document.removeEventListener('keydown', onKeyDown);
+                                },
+                            };
+                        },
                     }
-                };
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (this.isDisabled()) { // se pone disable se cierra el dropdown
-            this.closeDropdown();
+                ],
+                role: false,
+                aria: {
+                    content: 'auto',
+                },
+                onShown(instance) {
+                    const firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
+                    if (firstFocusable) {
+                        firstFocusable.focus();
+                    }
+                }
+            };
         }
     }
     onClick(event) {
         if (!this.isDisabled()) {
-            this.toggleDropdown();
             this.clickEvent.emit(event);
         }
     }
-    toggleDropdown() {
-        this.show = !this.show;
-        setTimeout(() => this.clickOutsideEnabled = this.show);
-    }
-    closeDropdown() {
-        this.show = false;
-        this.clickOutsideEnabled = false;
+    setOpen(isOpen) {
+        this.isOpen = isOpen;
     }
     isDisabled() {
         return this.disabled ? true : null;
     }
-    onKeyDown(event) {
-        if (event.key === DropdownComponent.KEY_CODE_ESC) {
-            this.closeDropdown();
-        }
-    }
 }
 DropdownComponent.KEY_CODE_ESC = 'Escape';
 DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-dropdown',
-                template: "<!-- dropdown -->\r\n<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button *ngIf=\"tippyProperties\" aria-haspopup=\"true\" (click)=\"onClick($event)\" ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"show\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>    \r\n    <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>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"closeDropdown()\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n<!-- /dropdown -->\r\n"
+                template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\"\r\n     (desyContentEmpty)=\"setOpen(false)\" (desyContentNotEmpty)=\"setOpen(true)\">\r\n  <button #desyContentEmptyIgnore (click)=\"onClick($event)\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          aria-haspopup=\"true\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <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>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" #desyContentEmptyIgnore class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 DropdownComponent.propDecorators = {
-    dropdownContent: [{ type: ViewChild, args: ['dropdownContent', { read: ElementRef },] }],
+    dropdownContent: [{ type: ViewChild, args: ['dropdownContent', { read: ElementRef, static: true },] }],
     id: [{ type: Input }],
     disabled: [{ type: Input }],
     hiddenText: [{ type: Input }],
@@ -423,8 +421,7 @@ DropdownComponent.propDecorators = {
     classesTooltip: [{ type: Input }],
     classes: [{ type: Input }],
     caller: [{ type: Input }],
-    clickEvent: [{ type: Output }],
-    onKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+    clickEvent: [{ type: Output }]
 };
 
 /**
@@ -445,26 +442,16 @@ class StringUtils {
     }
 }
 
-class ListboxLabelComponent {
-    constructor() {
-        this.isInit = false;
-    }
-    ngOnInit() {
-        setTimeout(() => this.isInit = !!this.content);
-    }
-    getContent() {
-        return this.isInit ? this.content : null;
-    }
+class ListboxLabelComponent extends ContentBaseComponent {
 }
 ListboxLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-listbox-label',
-                template: "<ng-template #childComponentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
             },] }
 ];
 ListboxLabelComponent.propDecorators = {
-    classes: [{ type: Input }],
-    content: [{ type: ViewChild, args: ['childComponentTemplate',] }]
+    classes: [{ type: Input }]
 };
 
 class ListboxItemComponent extends AccessibilityComponent {
@@ -536,51 +523,70 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
         super(...arguments);
         this.itemsChange = new EventEmitter();
         this.activeItemChange = new EventEmitter();
-        this.isListVisible = false;
+        this.isListVisible = false; // Indica si la lista se está mostrando
     }
     ngOnInit() {
-        setTimeout(() => {
-            if (this.listboxContent && this.listboxContent.nativeElement) {
-                const contentTooltip = this.listboxContent.nativeElement;
-                this.tippyProperties = {
-                    placement: 'bottom-start',
-                    inlinePositioning: true,
-                    content: contentTooltip,
-                    allowHTML: true,
-                    trigger: 'click',
-                    hideOnClick: true,
-                    interactive: true,
-                    arrow: false,
-                    offset: [0, -10],
-                    theme: '',
-                    plugins: [{
-                            name: 'hideOnEsc',
-                            defaultValue: true,
-                            fn({ hide }) {
-                                function onKeyDown(event) {
-                                    if (event.key === ListboxComponent.KEY_CODE_ESC) {
-                                        hide();
-                                    }
-                                }
-                                return {
-                                    onShow() {
-                                        document.addEventListener('keydown', onKeyDown);
-                                    },
-                                    onHide() {
-                                        document.removeEventListener('keydown', onKeyDown);
-                                    },
-                                };
-                            },
-                        }],
-                    role: false,
-                    aria: {
-                        content: 'auto',
+        const listboxButtonElement = this.listboxButton.nativeElement;
+        if (this.listboxContent && this.listboxContent.nativeElement) {
+            const contentTooltip = this.listboxContent.nativeElement;
+            this.tippyProperties = {
+                placement: 'bottom-start',
+                inlinePositioning: true,
+                content: contentTooltip,
+                allowHTML: true,
+                trigger: 'click',
+                hideOnClick: true,
+                interactive: true,
+                arrow: false,
+                offset: [0, -10],
+                theme: '',
+                plugins: [
+                    {
+                        name: 'hideOnPopperBlur',
+                        defaultValue: true,
+                        fn(instance) {
+                            return {
+                                onCreate() {
+                                    instance.popper.addEventListener('focusout', (event) => {
+                                        if (instance.props.hideOnPopperBlur &&
+                                            event.relatedTarget &&
+                                            !instance.popper.contains(event.relatedTarget)) {
+                                            instance.hide();
+                                        }
+                                    });
+                                },
+                            };
+                        }
                     },
-                    onShow: this.onListShow.bind(this),
-                    onHidden: this.onListClose.bind(this)
-                };
-            }
-        });
+                    {
+                        name: 'hideOnEsc',
+                        defaultValue: true,
+                        fn({ hide }) {
+                            function onKeyDown(event) {
+                                if (event.key === ListboxComponent.KEY_CODE_ESC) {
+                                    hide();
+                                    listboxButtonElement.focus();
+                                }
+                            }
+                            return {
+                                onShow() {
+                                    document.addEventListener('keydown', onKeyDown);
+                                },
+                                onHide() {
+                                    document.removeEventListener('keydown', onKeyDown);
+                                },
+                            };
+                        },
+                    }
+                ],
+                role: false,
+                aria: {
+                    content: 'auto',
+                },
+                onShow: this.onListShow.bind(this),
+                onHidden: this.onListClose.bind(this)
+            };
+        }
     }
     ngOnChanges() {
         setTimeout(() => {
@@ -667,11 +673,11 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
         if (this.doesChangeButtonText && !this.isMultiselectable && activeItems.length > 0) {
             const activeItemOption = this.listboxOptions.find((item, index) => index === activeItems[0].index);
             if (activeItemOption) {
-                this.buttonContent = activeItemOption.nativeElement.innerHTML;
+                this.buttonContentHtml = activeItemOption.nativeElement.innerHTML;
             }
         }
         else {
-            this.buttonContent = this.html ? this.html : this.text;
+            this.buttonContentHtml = this.html ? this.html : null;
         }
         // Si hay cambios, se emiten
         if (hasActiveItemChange) {
@@ -687,9 +693,6 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
     }
     onListClose() {
         this.isListVisible = false;
-        if (this.listboxButton) {
-            this.listboxButton.nativeElement.focus();
-        }
     }
     onListFocus() {
         const activeItemsData = this.getActiveItemsData();
@@ -763,22 +766,18 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
     getLabelContent(label) {
         return label.html ? label.html : `<p>${StringUtils.escapeHtml(label.text)}</p>`;
     }
-    isButtonContentHtml() {
-        const activeItemsData = this.getActiveItemsData();
-        return !!(this.doesChangeButtonText && !this.isMultiselectable && activeItemsData.length > 0 ? true : this.html);
-    }
 }
 ListboxComponent.KEY_CODE_ESC = 'Escape';
 ListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-listbox',
-                template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div *ngIf=\"labelComponent\" [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent.classes] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"labelComponent.getContent()\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"!labelComponent && label\" [id]=\"id + '-label'\" [class]=\"['mb-sm', label.classes] | makeHtmlList\"\r\n    [desyInnerContent]=\"getLabelContent(label)\" [isHtml]=\"true\">\r\n  </div>\r\n  <button *ngIf=\"tippyProperties\"\r\n          #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\"\r\n              [desyInnerContent]=\"buttonContent\" [isHtml]=\"isButtonContentHtml()\">\r\n        </span>\r\n    <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>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\"\r\n            [desyInnerContent]=\"!item['content'] ? (item.html ? item.html : item.text) : null\"\r\n            [isHtml]=\"!item['content'] ? item.html : undefined\" [deleteContentIfEmpty]=\"false\">\r\n          <ng-container *ngTemplateOutlet=\"item['content']\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
+                template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\r\n  </div>\r\n  <button #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: text }\"></ng-container>\r\n        </span>\r\n    <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>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 ListboxComponent.propDecorators = {
-    listboxButton: [{ type: ViewChild, args: ['button', { read: ElementRef },] }],
+    listboxButton: [{ type: ViewChild, args: ['button', { read: ElementRef, static: true },] }],
     listboxList: [{ type: ViewChild, args: ['list', { read: ElementRef },] }],
-    listboxContent: [{ type: ViewChild, args: ['tooltip', { read: ElementRef },] }],
+    listboxContent: [{ type: ViewChild, args: ['tooltip', { read: ElementRef, static: true },] }],
     listboxOptions: [{ type: ViewChildren, args: ['option', { read: ElementRef },] }],
     labelComponent: [{ type: ContentChildren, args: [ListboxLabelComponent,] }],
     itemComponentList: [{ type: ContentChildren, args: [ListboxItemComponent,] }],
@@ -803,6 +802,7 @@ class PillComponent extends AccessibilityAndContentRequiredComponent {
     constructor() {
         super(...arguments);
         this.clickEvent = new EventEmitter();
+        this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
     }
     onClick(event) {
         this.clickEvent.emit(event);
@@ -856,7 +856,8 @@ PillComponent.propDecorators = {
     routerLinkActiveClasses: [{ type: Input }],
     classes: [{ type: Input }],
     id: [{ type: Input }],
-    clickEvent: [{ type: Output }]
+    clickEvent: [{ type: Output }],
+    hostTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }]
 };
 
 class ContentComponent extends ContentBaseComponent {
@@ -2234,6 +2235,7 @@ class CheckboxItemComponent extends AccessibilityComponent {
         this.checkboxes = checkboxes;
         this.changeDetectorRef = changeDetectorRef;
         this.checkedChange = new EventEmitter();
+        this.indeterminateChange = new EventEmitter();
         if (!this.checkboxes) {
             throw Error('Checkbox items must be inside of CheckboxesComponent');
         }
@@ -2255,6 +2257,10 @@ class CheckboxItemComponent extends AccessibilityComponent {
         else if (this.lastValue !== undefined && this.lastValue !== this.value) {
             this.checkboxes.updateValueFromCheckboxItems();
         }
+        if (this.indeterminateChecked !== this.lastIndeterminate && this.isInit()) {
+            this.setIndeterminateChecked(this.indeterminateChecked);
+            this.checkboxes.updateValueFromCheckboxItems();
+        }
         this.lastValue = this.value;
         if (this.id !== this.checkboxId) {
             this.checkboxes.markForUpdateCheckboxIds();
@@ -2262,6 +2268,7 @@ class CheckboxItemComponent extends AccessibilityComponent {
     }
     ngAfterViewInit() {
         this.setChecked(this.checked);
+        this.setIndeterminateChecked(this.indeterminateChecked);
         this.checkboxes.updateValueFromCheckboxItems();
     }
     getItemHintId() {
@@ -2281,6 +2288,7 @@ class CheckboxItemComponent extends AccessibilityComponent {
             }
         }
         this.setChecked(input.checked);
+        this.setIndeterminateChecked(input.indeterminate);
         this.checkboxes.updateValueFromCheckboxItems();
     }
     setChecked(checked) {
@@ -2289,6 +2297,26 @@ class CheckboxItemComponent extends AccessibilityComponent {
         this.checkedChange.emit(checked);
         this.changeDetectorRef.detectChanges(); // Avisa al elemento input para que actualice su estado
     }
+    setIndeterminateChecked(indeterminateChecked) {
+        this.indeterminateChecked = indeterminateChecked;
+        this.lastIndeterminate = indeterminateChecked;
+        this.indeterminateChange.emit(indeterminateChecked);
+        this.changeDetectorRef.detectChanges(); // Avisa al elemento input para que actualice su estado
+    }
+    setIndeterminateStatus() {
+        var _a;
+        const input = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (input) {
+            if (this.indeterminateChecked) {
+                input.readOnly = true;
+                input.indeterminate = true;
+            }
+            else if (input.readOnly) {
+                input.readOnly = false;
+                input.indeterminate = false;
+            }
+        }
+    }
     isInit() {
         return !!this.inputElement;
     }
@@ -2369,13 +2397,18 @@ CheckboxItemComponent.propDecorators = {
     conditional: [{ type: Input }],
     disabled: [{ type: Input }],
     isIndeterminate: [{ type: Input }],
+    indeterminateChecked: [{ type: Input }],
     classes: [{ type: Input }],
     labelComponentList: [{ type: ContentChildren, args: [LabelComponent,] }],
     hintComponentList: [{ type: ContentChildren, args: [HintComponent,] }],
     conditionalContentList: [{ type: ContentChildren, args: [ContentComponent,] }],
     checked: [{ type: Input }],
-    checkedChange: [{ type: Output }]
-};
+    checkedChange: [{ type: Output }],
+    indeterminateChange: [{ type: Output }]
+};
+__decorate([
+    DesyOnInputChange('setIndeterminateStatus')
+], CheckboxItemComponent.prototype, "indeterminateChecked", void 0);
 
 class CheckboxesComponent extends FormFieldComponent {
     constructor() {
@@ -2559,7 +2592,7 @@ class CheckboxesComponent extends FormFieldComponent {
 CheckboxesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-checkboxes',
-                template: "<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses == 'c-form-group--error') }\">\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n                   [classes]=\"fieldsetData.classes\"\r\n                   [id]=\"fieldsetData.id\"\r\n                   [legendData]=\"fieldsetData.legend\"\r\n                   [headingLevel]=\"fieldsetData.headingLevel\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   [role]=\"fieldsetData.role\"\r\n                   [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n                   [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n                   [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n                   [ariaControls]=\"fieldsetData.ariaControls\"\r\n                   [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n                   [ariaLive]=\"fieldsetData.ariaLive\"\r\n                   [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n                   [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n                   [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !!legendComponent\"\r\n                   [legendRef]=\"legendTemplate\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && legendData\"\r\n                   [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <div [class]=\"['c-checkboxes', classes] | makeHtmlList\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngIf=\"checkboxComponentItems && checkboxComponentItems.length > 0\">\r\n      <ng-content select=\"desy-checkbox-item\"></ng-content>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!(checkboxComponentItems && checkboxComponentItems.length > 0) && items\">\r\n      <desy-checkbox-item *ngFor=\"let item of items; index as i\"\r\n                          [id]=\"item.id\"\r\n                          [disabled]=\"item.disabled\"\r\n                          [name]=\"item.name\"\r\n                          [classes]=\"item.classes\"\r\n                          [value]=\"item.value\"\r\n                          [(checked)]=\"item.checked\"\r\n                          [conditional]=\"item.conditional\"\r\n                          [isIndeterminate]=\"item.isIndeterminate\"\r\n\r\n                          [role]=\"item.role\"\r\n                          [ariaLabel]=\"item.ariaLabel\"\r\n                          [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                          [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                          [ariaHidden]=\"item.ariaHidden\"\r\n                          [ariaDisabled]=\"item.ariaDisabled\"\r\n                          [ariaControls]=\"item.ariaControls\"\r\n                          [ariaCurrent]=\"item.ariaCurrent\"\r\n                          [ariaLive]=\"item.ariaLive\"\r\n                          [ariaExpanded]=\"item.ariaExpanded\"\r\n                          [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                          [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                          [tabindex]=\"item.tabindex\">\r\n        <desy-label [text]=\"item.text\" [html]=\"item.html\"\r\n                    [classes]=\"item.labelData ? item.labelData.classes : null\"\r\n                    [role]=\"item.labelData ? item.labelData.role : null\"\r\n                    [ariaLabel]=\"item.labelData ? item.labelData.ariaLabel : null\"\r\n                    [ariaDescribedBy]=\"item.labelData ? item.labelData.ariaDescribedBy: null\"\r\n                    [ariaLabelledBy]=\"item.labelData ? item.labelData.ariaLabelledBy : null\"\r\n                    [ariaHidden]=\"item.labelData ? item.labelData.ariaHidden : null\"\r\n                    [ariaDisabled]=\"item.labelData ? item.labelData.ariaDisabled : null\"\r\n                    [ariaControls]=\"item.labelData ? item.labelData.ariaControls : null\"\r\n                    [ariaCurrent]=\"item.labelData ? item.labelData.ariaCurrent : null\"\r\n                    [ariaLive]=\"item.labelData ? item.labelData.ariaLive : null\"\r\n                    [ariaExpanded]=\"item.labelData ? item.labelData.ariaExpanded : null\"\r\n                    [ariaErrorMessage]=\"item.labelData ? item.labelData.ariaErrorMessage : null\"\r\n                    [ariaHasPopup]=\"item.labelData ? item.labelData.ariaHasPopup : null\"\r\n                    [tabindex]=\"tabindex ? item.labelData.tabindex : null\"></desy-label>\r\n        <desy-hint *ngIf=\"item.hintData && (item.hintData.text || item.hintData.html)\"\r\n                   [text]=\"item.hintData.text\"\r\n                   [html]=\"item.hintData.html\"\r\n                   [classes]=\"item.hintData.classes\"\r\n                   [role]=\"item.hintData.role\"\r\n                   [ariaLabel]=\"item.hintData.ariaLabel\"\r\n                   [ariaDescribedBy]=\"item.hintData.ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"item.hintData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"item.hintData.ariaHidden\"\r\n                   [ariaDisabled]=\"item.hintData.ariaDisabled\"\r\n                   [ariaControls]=\"item.hintData.ariaControls\"\r\n                   [ariaCurrent]=\"item.hintData.ariaCurrent\"\r\n                   [ariaLive]=\"item.hintData.ariaLive\"\r\n                   [ariaExpanded]=\"item.hintData.ariaExpanded\"\r\n                   [ariaErrorMessage]=\"item.hintData.ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"item.hintData.ariaHasPopup\"\r\n                   [tabindex]=\"item.hintData.tabindex\"></desy-hint>\r\n        <desy-hint *ngIf=\"!item.hintData && item.hintText\" [text]=\"item.hintText\"></desy-hint>\r\n        <desy-content *ngIf=\"item.conditionalHtml\">\r\n          <ng-container *ngTemplateOutlet=\"item.conditionalHtml\"></ng-container>\r\n        </desy-content>\r\n      </desy-checkbox-item>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
+                template: "<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses == 'c-form-group--error') }\">\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n                   [classes]=\"fieldsetData.classes\"\r\n                   [id]=\"fieldsetData.id\"\r\n                   [legendData]=\"fieldsetData.legend\"\r\n                   [headingLevel]=\"fieldsetData.headingLevel\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   [role]=\"fieldsetData.role\"\r\n                   [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n                   [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n                   [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n                   [ariaControls]=\"fieldsetData.ariaControls\"\r\n                   [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n                   [ariaLive]=\"fieldsetData.ariaLive\"\r\n                   [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n                   [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n                   [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !!legendComponent\"\r\n                   [legendRef]=\"legendTemplate\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && legendData\"\r\n                   [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <div [class]=\"['c-checkboxes', classes] | makeHtmlList\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngIf=\"checkboxComponentItems && checkboxComponentItems.length > 0\">\r\n      <ng-content select=\"desy-checkbox-item\"></ng-content>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!(checkboxComponentItems && checkboxComponentItems.length > 0) && items\">\r\n      <desy-checkbox-item *ngFor=\"let item of items; index as i\"\r\n                          [id]=\"item.id\"\r\n                          [disabled]=\"item.disabled\"\r\n                          [name]=\"item.name\"\r\n                          [classes]=\"item.classes\"\r\n                          [value]=\"item.value\"\r\n                          [(checked)]=\"item.checked\"\r\n                          [conditional]=\"item.conditional\"\r\n                          [isIndeterminate]=\"item.isIndeterminate\"\r\n                          [indeterminateChecked]=\"item.indeterminateChecked\"\r\n\r\n                          [role]=\"item.role\"\r\n                          [ariaLabel]=\"item.ariaLabel\"\r\n                          [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                          [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                          [ariaHidden]=\"item.ariaHidden\"\r\n                          [ariaDisabled]=\"item.ariaDisabled\"\r\n                          [ariaControls]=\"item.ariaControls\"\r\n                          [ariaCurrent]=\"item.ariaCurrent\"\r\n                          [ariaLive]=\"item.ariaLive\"\r\n                          [ariaExpanded]=\"item.ariaExpanded\"\r\n                          [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                          [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                          [tabindex]=\"item.tabindex\">\r\n        <desy-label [text]=\"item.text\" [html]=\"item.html\"\r\n                    [classes]=\"item.labelData ? item.labelData.classes : null\"\r\n                    [role]=\"item.labelData ? item.labelData.role : null\"\r\n                    [ariaLabel]=\"item.labelData ? item.labelData.ariaLabel : null\"\r\n                    [ariaDescribedBy]=\"item.labelData ? item.labelData.ariaDescribedBy: null\"\r\n                    [ariaLabelledBy]=\"item.labelData ? item.labelData.ariaLabelledBy : null\"\r\n                    [ariaHidden]=\"item.labelData ? item.labelData.ariaHidden : null\"\r\n                    [ariaDisabled]=\"item.labelData ? item.labelData.ariaDisabled : null\"\r\n                    [ariaControls]=\"item.labelData ? item.labelData.ariaControls : null\"\r\n                    [ariaCurrent]=\"item.labelData ? item.labelData.ariaCurrent : null\"\r\n                    [ariaLive]=\"item.labelData ? item.labelData.ariaLive : null\"\r\n                    [ariaExpanded]=\"item.labelData ? item.labelData.ariaExpanded : null\"\r\n                    [ariaErrorMessage]=\"item.labelData ? item.labelData.ariaErrorMessage : null\"\r\n                    [ariaHasPopup]=\"item.labelData ? item.labelData.ariaHasPopup : null\"\r\n                    [tabindex]=\"tabindex ? item.labelData.tabindex : null\"></desy-label>\r\n        <desy-hint *ngIf=\"item.hintData && (item.hintData.text || item.hintData.html)\"\r\n                   [text]=\"item.hintData.text\"\r\n                   [html]=\"item.hintData.html\"\r\n                   [classes]=\"item.hintData.classes\"\r\n                   [role]=\"item.hintData.role\"\r\n                   [ariaLabel]=\"item.hintData.ariaLabel\"\r\n                   [ariaDescribedBy]=\"item.hintData.ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"item.hintData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"item.hintData.ariaHidden\"\r\n                   [ariaDisabled]=\"item.hintData.ariaDisabled\"\r\n                   [ariaControls]=\"item.hintData.ariaControls\"\r\n                   [ariaCurrent]=\"item.hintData.ariaCurrent\"\r\n                   [ariaLive]=\"item.hintData.ariaLive\"\r\n                   [ariaExpanded]=\"item.hintData.ariaExpanded\"\r\n                   [ariaErrorMessage]=\"item.hintData.ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"item.hintData.ariaHasPopup\"\r\n                   [tabindex]=\"item.hintData.tabindex\"></desy-hint>\r\n        <desy-hint *ngIf=\"!item.hintData && item.hintText\" [text]=\"item.hintText\"></desy-hint>\r\n        <desy-content *ngIf=\"item.conditionalHtml\">\r\n          <ng-container *ngTemplateOutlet=\"item.conditionalHtml\"></ng-container>\r\n        </desy-content>\r\n      </desy-checkbox-item>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -2982,41 +3015,1000 @@ class SearchBarComponent extends FormFieldComponent {
             throw Error('label is required');
         }
     }
-    ngAfterViewInit() {
-        if (this.button && this.button.length > 1) {
-            throw Error('only 1 button in content is allowed');
+    ngAfterViewInit() {
+        if (this.button && this.button.length > 1) {
+            throw Error('only 1 button in content is allowed');
+        }
+    }
+    onClick(event) {
+        if (!this.disabled) {
+            this.clickEvent.emit(event);
+        }
+    }
+    hasButton() {
+        return this.button && this.button.length > 0;
+    }
+}
+SearchBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-search-bar',
+                template: "<!-- searchbar -->\r\n<div class=\"relative\" [ngClass]=\"{'flex flex-wrap items-end': hasButton()}\">\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              classes=\"sr-only\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" classes=\"sr-only\" [for]=\"id\"></desy-label>\r\n  <input type=\"search\"\r\n         [class]=\"['c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n         [ngClass]=\"{'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(),'w-full': !hasButton()}\"\r\n         [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"id ? id : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"hasButton(); else defaultButton\">\r\n    <ng-content select=\"desy-button\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultButton>\r\n    <button type=\"submit\" [attr.disabled]=\"disabled ? 'disabled' : null\" [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n            (click)=\"onClick($event)\"\r\n            [class]=\"['absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus', buttonClasses] | makeHtmlList\">\r\n      <span class=\"sr-only\">Buscar</span>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"1.375em\" height=\"1.375em\" aria-hidden=\"true\"><path d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\" fill=\"currentColor\"/></svg>\r\n    </button>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n</div>\r\n<!-- /searchbar -->\r\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SearchBarComponent),
+                        multi: true
+                    }
+                ]
+            },] }
+];
+SearchBarComponent.propDecorators = {
+    button: [{ type: ContentChildren, args: [ButtonComponent,] }],
+    describedBy: [{ type: Input }],
+    classes: [{ type: Input }],
+    buttonClasses: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    clickEvent: [{ type: Output }]
+};
+
+class TreeSubComponent extends ContentBaseComponent {
+}
+TreeSubComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree-sub',
+                template: "<ng-template #contentTemplate>\r\n  <ul [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\r\n      [attr.role]=\"role ? role : 'group'\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n      [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n      [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n      [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</ng-template>\r\n"
+            },] }
+];
+TreeSubComponent.propDecorators = {
+    classes: [{ type: Input }]
+};
+
+class ITreeItem {
+}
+
+class SearchUtils {
+    /**
+     * Comprueba si una cadena de texto (target) contiene cualquier palabra de otro texto (text)
+     * @param target - Texto en el que buscar
+     * @param text - Texto a buscar
+     * @param fullWord - Indica si las palabras del texto a buscar deben aparecer enteras
+     */
+    static containsAnyWordFrom(target, text, fullWord) {
+        let words = [];
+        let includes = false;
+        const simplifiedTarget = this.getSimplifiedString(target);
+        if (text && text.split(' ').length > 1) {
+            words = text.split(' ');
+        }
+        words.push(text);
+        words.forEach(word => {
+            if (simplifiedTarget && word) {
+                if ((fullWord && simplifiedTarget === this.getSimplifiedString(word))
+                    || (!fullWord && simplifiedTarget.includes(this.getSimplifiedString(word)))) {
+                    includes = true;
+                }
+            }
+        });
+        return includes;
+    }
+    /**
+     * Convierte a mayúsculas, elimina espacios y reemplaza/elimina caracteres especiales para realizar comparaciones más tolerantes
+     * @param str - cadena de entrada
+     */
+    static getSimplifiedString(str) {
+        let res = str;
+        if (str) {
+            res = str.toLocaleUpperCase().trim();
+            res = res.replace('Á', 'A');
+            res = res.replace('É', 'E');
+            res = res.replace('Í', 'I');
+            res = res.replace('Ó', 'O');
+            res = res.replace('Ú', 'U');
+            res = res.replace('À', 'A');
+            res = res.replace('È', 'E');
+            res = res.replace('Ì', 'I');
+            res = res.replace('Ò', 'O');
+            res = res.replace('Ù', 'U');
+            res = res.replace('Ä', 'A');
+            res = res.replace('Ë', 'E');
+            res = res.replace('Ï', 'I');
+            res = res.replace('Ö', 'O');
+            res = res.replace('Ü', 'U');
+            res = res.replace(',', '');
+            res = res.replace('.', '');
+            res = res.replace('\'', '');
+            res = res.replace('"', '');
+        }
+        return res;
+    }
+}
+
+class TreeCheckboxComponent extends AccessibilityComponent {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+        this.checkedChange = new EventEmitter();
+        this.indeterminateCheckedChange = new EventEmitter();
+        this.hasError = false;
+        this._hasInit = false;
+    }
+    ngOnInit() {
+        this._hasInit = true;
+        this.onDescribedByChange();
+    }
+    detectChanges() {
+        this.changeDetector.detectChanges();
+    }
+    hasChanged() {
+        if (this._hasInit) {
+            const input = this.inputElement.nativeElement;
+            // Se establece el cambio a visualizar en el input
+            if (this.isIndeterminate) {
+                if (input.readOnly) {
+                    input.checked = false;
+                    input.readOnly = false;
+                }
+                else if (!input.checked) {
+                    input.readOnly = true;
+                    input.indeterminate = true;
+                }
+            }
+            this.setIndeterminateChecked(input.indeterminate);
+            this.checkedChange.emit(input.checked);
+        }
+    }
+    onIdChange() {
+        this.overrideLabelParams();
+        this.overrideHintParams();
+    }
+    setIndeterminateStatus() {
+        var _a;
+        const input = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (input) {
+            if (this.indeterminateChecked) {
+                input.readOnly = true;
+                input.indeterminate = true;
+            }
+            else if (input.readOnly) {
+                input.readOnly = false;
+                input.indeterminate = false;
+            }
+        }
+    }
+    setIndeterminateChecked(indeterminateChecked) {
+        this.indeterminateChecked = indeterminateChecked;
+        this._lastIndeterminate = indeterminateChecked;
+        this.indeterminateCheckedChange.emit(indeterminateChecked);
+        this.changeDetector.detectChanges(); // Avisa al elemento input para que actualice su estado
+    }
+    focus() {
+        this.inputElement.nativeElement.focus();
+    }
+    matchesText(value) {
+        const checkboxText = this.contentWrapper.nativeElement.textContent;
+        return SearchUtils.containsAnyWordFrom(checkboxText, value);
+    }
+    preventDefault(event) {
+        event.preventDefault();
+    }
+    getHintId() {
+        return this.hintComponent ? this.hintComponent.id : '';
+    }
+    overrideLabelParams() {
+        if (this.labelComponent) {
+            this.labelComponent.for = this.id + '-input';
+            if (!this.labelComponent.classes) {
+                this.labelComponent.classes = 'block relative -top-xs -left-8 pl-8 py-xs';
+            }
+            this.labelComponent.detectChanges();
+        }
+    }
+    overrideHintParams() {
+        if (this.hintComponent) {
+            if (!this.hintComponent.id) {
+                this.hintComponent.id = this.id + '-item-hint';
+            }
+            this.hintComponent.detectChanges();
+        }
+        this.onDescribedByChange();
+    }
+    getItemDescribedBy() {
+        return (this.describedBy ? this.describedBy : '') + ' ' + this.getHintId();
+    }
+    onDescribedByChange() {
+        if (this.ariaDescribedBy) {
+            this.itemDescribedBy = this.ariaDescribedBy;
+        }
+        else {
+            this.itemDescribedBy = this.getItemDescribedBy();
+        }
+    }
+}
+TreeCheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree-checkbox',
+                template: "<div [class]=\"classes\" [ngClass]=\"{'border-t border-b border-neutral-base -mb-px': hasDividers}\">\r\n  <div class=\"relative flex items-start py-xs\">\r\n    <div class=\"flex items-center mx-sm\">\r\n      <input #input class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base\"\r\n             [id]=\"id + '-input'\"\r\n             [name]=\"name\"\r\n             [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\r\n             [value]=\"value\"\r\n             [checked]=\"checked\"\r\n             (change)=\"hasChanged()\"\r\n             [disabled]=\"disabled ? disabled : null\"\r\n             [attr.aria-invalid]=\"hasError ? 'true' : null\"\r\n\r\n             [attr.role]=\"role ? role : 'group'\"\r\n             [attr.aria-describedby]=\"itemDescribedBy\"\r\n             [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n             [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n             [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n             [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n             [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n             [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n             [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n             [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n\r\n             (keydown.home)=\"preventDefault($event)\"\r\n             (keydown.end)=\"preventDefault($event)\"\r\n             (keydown.arrowup)=\"preventDefault($event)\"\r\n             (keydown.arrowdown)=\"preventDefault($event)\"\r\n             (keydown.arrowright)=\"preventDefault($event)\"\r\n             (keydown.arrowleft)=\"preventDefault($event)\">\r\n    </div>\r\n    <div #contentWrapper class=\"flex-1 pt-0.5 leading-5\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+            },] }
+];
+TreeCheckboxComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TreeCheckboxComponent.propDecorators = {
+    inputElement: [{ type: ViewChild, args: ['input', { static: true },] }],
+    contentWrapper: [{ type: ViewChild, args: ['contentWrapper', { static: true },] }],
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    classes: [{ type: Input }],
+    value: [{ type: Input }],
+    checked: [{ type: Input }],
+    checkedChange: [{ type: Output }],
+    isIndeterminate: [{ type: Input }],
+    indeterminateChecked: [{ type: Input }],
+    indeterminateCheckedChange: [{ type: Output }],
+    disabled: [{ type: Input }],
+    hasDividers: [{ type: Input }],
+    describedBy: [{ type: Input }],
+    hasError: [{ type: Input }],
+    labelComponent: [{ type: Input }],
+    hintComponent: [{ type: Input }]
+};
+__decorate([
+    DesyOnInputChange('onIdChange')
+], TreeCheckboxComponent.prototype, "id", void 0);
+__decorate([
+    DesyOnInputChange('setIndeterminateStatus')
+], TreeCheckboxComponent.prototype, "indeterminateChecked", void 0);
+__decorate([
+    DesyOnInputChange('onDescribedByChange')
+], TreeCheckboxComponent.prototype, "describedBy", void 0);
+__decorate([
+    DesyOnInputChange('overrideLabelParams')
+], TreeCheckboxComponent.prototype, "labelComponent", void 0);
+__decorate([
+    DesyOnInputChange('overrideHintParams')
+], TreeCheckboxComponent.prototype, "hintComponent", void 0);
+
+class TreeItemComponent extends AccessibilityComponent {
+    constructor(changeDetector, element) {
+        super();
+        this.changeDetector = changeDetector;
+        this.element = element;
+        this.checkedChange = new EventEmitter();
+        this.checkedChangeForTree = new EventEmitter();
+        this.expandedChange = new EventEmitter();
+        this.indeterminateCheckedChange = new EventEmitter();
+        /*
+         * Identificador del wrapper del componente. Se utiliza para recorrer el árbol en sentido inverso y que cada item
+         * sepa cuál es su item/árbol padre.
+         * Esto es necesario ya que, a la hora de construir un árbol dinámico con templates,
+         * el decorador @ContentChildren no funciona correctamente y no los detecta.
+         * Dejo el enlace de un problema similar: https://github.com/angular/angular/issues/21751
+         */
+        this.treeItemKey = TreeItemComponent.generateStaticItemKey();
+        this.allParentsExpanded = true; // True si el elemento es visible según los elementos expandidos
+        this.inheritedMatchesSearch = true; // True si el elemento es visible según los criterios de búsqueda
+        // Evento para emitir al componente arbol cuando se pretende abandonar el foco del item
+        this.quitFocus = new EventEmitter();
+        this.isFocus = false;
+        this.isHover = false;
+    }
+    ngOnChanges(changes) {
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(this.allParentsExpanded && this.expanded));
+        }
+        for (const propName in changes) {
+            if (changes.hasOwnProperty(propName)) {
+                switch (propName) {
+                    case 'checked': {
+                        // Reasignamos el valor de checked cuando detectamos el cambio en la entrada
+                        setTimeout(() => {
+                            this.setChecked(this.checked, false, false);
+                            if (this.inheritedExpandedFirstLevel && this.checked && !this.expanded) {
+                                this.expandSub(true);
+                            }
+                        });
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    /*
+     * Métodos expuestos que permiten configurar al ítem de forma externa
+     */
+    focus() {
+        var _a;
+        (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.focus();
+        this.handleItemFocus(true);
+    }
+    setCheckedAutomaticallyDependingOnChildren() {
+        if (this.sub) {
+            this.sub.itemList.forEach(item => item.setCheckedAutomaticallyDependingOnChildren());
+            if (this.areAllChildrenChecked()) {
+                if (this.indeterminateChecked) {
+                    this.setIndeterminateChecked(false);
+                }
+                if (!this.checked) {
+                    this.setChecked(true, true);
+                }
+            }
+            else if (this.hasChildrenCheckedOrIndeterminate()) {
+                if (!this.indeterminateChecked) {
+                    this.setIndeterminateChecked(true);
+                }
+                if (this.checked) {
+                    this.setChecked(false, true);
+                }
+            }
+            else {
+                if (this.indeterminateChecked) {
+                    this.setIndeterminateChecked(false);
+                }
+                if (this.checked) {
+                    this.setChecked(false, true);
+                }
+            }
+        }
+    }
+    refreshAllParentsExpandedRecursive(value) {
+        this.allParentsExpanded = value;
+        if (this.sub) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(value && this.expanded));
+        }
+    }
+    detectChanges() {
+        this.changeDetector.detectChanges();
+    }
+    expandSub(value) {
+        this.expanded = value;
+        if (this.sub) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(this.allParentsExpanded && value));
+        }
+        this.expandedChange.emit(value);
+    }
+    /*
+     * Gestion de eventos
+     */
+    handleCheckboxChange(checked) {
+        this.setChecked(checked, false);
+        if (this.inheritedExpandedFirstLevel && checked && !this.expanded) {
+            this.expandSub(true);
+        }
+    }
+    handleIndeterminateCheckedChange(indeterminate) {
+        this.indeterminateCheckedChange.emit(indeterminate);
+    }
+    handleItemFocus(value, condition = true) {
+        if (condition) {
+            this.isFocus = value;
+        }
+    }
+    handleItemHover(value, condition = true) {
+        if (condition) {
+            this.isHover = value;
+        }
+    }
+    handleArrowUp(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'previous',
+                currentItem: this
+            });
+        }
+    }
+    handleHome(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'first',
+                currentItem: this
+            });
+        }
+    }
+    handleEnd(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'last',
+                currentItem: this
+            });
+        }
+    }
+    handleArrowDown(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'next',
+                currentItem: this
+            });
+        }
+    }
+    handleArrowRight(event, condition = true) {
+        var _a;
+        if (condition && this.sub && ((_a = this.sub.itemList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            event.preventDefault();
+            if (this.expanded) {
+                this.quitFocus.emit({
+                    nextElement: 'firstChild',
+                    currentItem: this
+                });
+            }
+            else {
+                this.expandSub(true);
+            }
+        }
+    }
+    handleArrowLeft(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            if (this.expanded) {
+                this.expandSub(false);
+            }
+            else if (this.subLevel > 0) {
+                this.quitFocus.emit({
+                    nextElement: 'parent',
+                    currentItem: this
+                });
+            }
+        }
+    }
+    /*
+     * Setters and getters
+     */
+    setChecked(checked, ignoreInTree, emitEvent = true) {
+        if (!this.disabled) {
+            this.checked = checked;
+        }
+        if (!this.inheritedDecoupleChildFromParent && this.sub && this.sub.itemList && !this.indeterminateChecked) {
+            this.sub.itemList.forEach(item => {
+                item.setIndeterminateChecked(false);
+                item.setChecked(checked, true);
+            });
+        }
+        if (emitEvent) {
+            this.checkedChange.emit(checked);
+        }
+        if (!ignoreInTree) {
+            this.checkedChangeForTree.emit(checked);
+        }
+    }
+    setIndeterminateChecked(indeterminate) {
+        if (!this.disabled) {
+            this.indeterminateChecked = indeterminate;
+            this.indeterminateCheckedChange.emit(indeterminate);
+        }
+    }
+    setSubLevel(subLevel) {
+        this.subLevel = subLevel;
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => item.setSubLevel(subLevel + 1));
+        }
+    }
+    setOrderRecursively(order) {
+        this.orderInTree = order;
+        let newOrder = order + 1;
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => {
+                newOrder = item.setOrderRecursively(newOrder);
+            });
+        }
+        return newOrder;
+    }
+    setDefaultId(defaultId) {
+        this.defaultId = defaultId;
+        this.setDefaultIdRecursive();
+    }
+    setDefaultIdRecursive() {
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach((item, index) => {
+                item.setDefaultId(`sub-${this.getId()}-${index}`);
+            });
+        }
+    }
+    getId() {
+        return this.id ? this.id : this.defaultId;
+    }
+    isHidden() {
+        return !this.inheritedMatchesSearch && (!this.sub || this.areAllChildrenHidden());
+    }
+    areAllChildrenHidden() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => !child.isHidden()) < 0;
+    }
+    areAllChildrenChecked() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => !child.checked) < 0;
+    }
+    hasChildrenCheckedOrIndeterminate() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => child.checked || child.indeterminateChecked) >= 0;
+    }
+    matchesText(value) {
+        var _a;
+        let matches;
+        if (this.allParentsExpanded && !this.isHidden()) {
+            matches = (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.matchesText(value);
+        }
+        else {
+            const itemText = this.hiddenWrapper.nativeElement.textContent;
+            matches = SearchUtils.containsAnyWordFrom(itemText, value);
+        }
+        return matches;
+    }
+    getKey() {
+        return this.treeItemKey;
+    }
+    getParentKey() {
+        let parentKey;
+        let parentElement = this.element.nativeElement.parentElement;
+        while (parentElement && parentElement.tagName !== 'BODY' && parentElement.tagName !== 'DESY-TREE-ITEM' && parentElement.tagName !== 'DESY-TREE') {
+            parentElement = parentElement.parentElement;
+        }
+        if (parentElement.tagName === 'BODY') {
+            throw new Error('Parent for tree-item not found');
+        }
+        if (parentElement.tagName === 'DESY-TREE') {
+            parentKey = 'root';
+        }
+        if (parentElement.tagName === 'DESY-TREE-ITEM') {
+            parentKey = parentElement.getAttribute('desy-tree-item-key');
+        }
+        return parentKey;
+    }
+    /*
+     * Métodos privados
+     */
+    /**
+     * Genera una clave única para el componente
+     * @private
+     */
+    static generateStaticItemKey() {
+        const key = 'tree-item-key-' + TreeItemComponent._treeItemKeySuffix;
+        TreeItemComponent._treeItemKeySuffix++;
+        return key;
+    }
+}
+TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siempre claves distintas
+TreeItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree-item',
+                template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n    [id]=\"id\"\r\n    [class]=\"'c-tree__item focus:outline-none'\"\r\n    [ngClass]=\"{\r\n      'ml-4': subLevel === 0,\r\n      'ml-8': subLevel !== 0,\r\n      'c-tree__item--focus': isFocus && !sub,\r\n      'c-tree__item--hover': isHover && !sub,\r\n      'font-bold': active && subLevel === 0\r\n    }\"\r\n    (focusin)=\"handleItemFocus(true, !sub)\"\r\n    (focusout)=\"handleItemFocus(false, !sub)\"\r\n    (mouseover)=\"handleItemHover(true, !sub)\"\r\n    (mouseout)=\"handleItemHover(false, !sub)\"\r\n    (keydown.home)=\"handleHome($event, !sub)\"\r\n    (keydown.end)=\"handleEnd($event, !sub)\"\r\n    (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n    (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n    (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n    (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n    [attr.aria-current]=\"active && subLevel === 0 ? 'page' : null\"\r\n    [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n    [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n    [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\r\n       [ngClass]=\"{'font-bold': active}\"\r\n       [attr.title]=\"title ? title : null\"\r\n       [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n       [attr.role]=\"role ? role : 'tree'\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (active ? 'page' : null)\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n    <div class=\"font-bold\" *ngIf=\"active; else checkbox\">\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n  <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n       [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n       (focusin)=\"handleItemFocus(true)\"\r\n       (focusout)=\"handleItemFocus(false)\"\r\n       (mouseover)=\"handleItemHover(true)\"\r\n       (mouseout)=\"handleItemHover(false)\"\r\n       (keydown.home)=\"handleHome($event)\"\r\n       (keydown.end)=\"handleEnd($event)\"\r\n       (keydown.arrowup)=\"handleArrowUp($event)\"\r\n       (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n       (keydown.arrowright)=\"handleArrowRight($event)\"\r\n       (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n    <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n        <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n        <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n      </span>\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n  <li class=\"hidden\">\r\n    <div #hiddenWrapper>\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n  <desy-tree-checkbox [name]=\"name ? name : parentName\"\r\n                      [id]=\"getId()\"\r\n                      [value]=\"value\"\r\n                      [classes]=\"classes\"\r\n                      [type]=\"type\"\r\n                      [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n                      [hasError]=\"inheritedHasError\"\r\n                      [disabled]=\"disabled\"\r\n                      [hasDividers]=\"hasDividers\"\r\n                      [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n                      [isIndeterminate]=\"isIndeterminate\"\r\n                      [(indeterminateChecked)]=\"indeterminateChecked\"\r\n                      (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n                      [labelComponent]=\"label\"\r\n                      [hintComponent]=\"hint\"\r\n\r\n                      [role]=\"role\"\r\n                      [ariaLabel]=\"ariaLabel\"\r\n                      [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                      [ariaHidden]=\"ariaHidden\"\r\n                      [ariaDisabled]=\"ariaDisabled\"\r\n                      [ariaControls]=\"ariaControls\"\r\n                      [ariaCurrent]=\"ariaCurrent\"\r\n                      [ariaLive]=\"ariaLive\"\r\n                      [ariaExpanded]=\"ariaExpanded\"\r\n                      [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"ariaHasPopup\"\r\n                      [ariaModal]=\"ariaModal\"\r\n                      [tabindex]=\"tabindex\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n",
+                providers: [
+                    {
+                        provide: ITreeItem,
+                        useExisting: forwardRef(() => TreeItemComponent)
+                    }
+                ]
+            },] }
+];
+TreeItemComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+TreeItemComponent.propDecorators = {
+    hiddenWrapper: [{ type: ViewChild, args: ['hiddenWrapper',] }],
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    value: [{ type: Input }],
+    classes: [{ type: Input }],
+    active: [{ type: Input }],
+    disabled: [{ type: Input }],
+    title: [{ type: Input }],
+    hasDividers: [{ type: Input }],
+    isIndeterminate: [{ type: Input }],
+    checked: [{ type: Input }],
+    checkedChange: [{ type: Output }],
+    expanded: [{ type: Input }],
+    expandedChange: [{ type: Output }],
+    indeterminateChecked: [{ type: Input }],
+    indeterminateCheckedChange: [{ type: Output }],
+    sub: [{ type: ContentChildren, args: [TreeSubComponent,] }],
+    hint: [{ type: ContentChildren, args: [HintComponent,] }],
+    label: [{ type: ContentChildren, args: [LabelComponent,] }],
+    checkbox: [{ type: ViewChild, args: [TreeCheckboxComponent,] }],
+    treeItemKey: [{ type: HostBinding, args: ['attr.desy-tree-item-key',] }]
+};
+__decorate([
+    DesyOnInputChange('setDefaultIdRecursive')
+], TreeItemComponent.prototype, "id", void 0);
+__decorate([
+    DesyContentChild({ onSetCallbackName: 'overrideSubValues' })
+], TreeItemComponent.prototype, "sub", void 0);
+__decorate([
+    DesyContentChild()
+], TreeItemComponent.prototype, "hint", void 0);
+__decorate([
+    DesyContentChild()
+], TreeItemComponent.prototype, "label", void 0);
+
+class TreeComponent extends FormFieldComponent {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+        this.expandedFirstLevel = true;
+        this.decoupleChildFromParent = false;
+        this.disableDefaultSearch = false;
+        this.searchMatchValuesChange = new EventEmitter();
+        this.rootItems = [];
+        this._itemListCheckedSubscriptions = [];
+        this._itemListQuitFocusSubscriptions = [];
+        this._alreadyConfiguringItems = false;
+    }
+    ngOnDestroy() {
+        var _a, _b;
+        this.clearSubscriptions(this._itemListCheckedSubscriptions);
+        this.clearSubscriptions(this._itemListQuitFocusSubscriptions);
+        (_a = this._itemListSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this._allItemListSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        this.configureAllItems();
+    }
+    /*
+     * Eventos
+     */
+    /**
+     * Actualiza el valor del componente al checkquearse un ítem
+     * @param originItem ítem modificado
+     */
+    updateValueFromItems(originItem) {
+        // Si es radio, se desactivan el resto de items cuando se activa otro item
+        if (this.type !== 'checkbox') {
+            const items = this.getAllItemsInOrder();
+            items.forEach(item => {
+                if (item !== originItem && item.checked) {
+                    item.setChecked(false, true);
+                }
+            });
+        }
+        else if (!this.decoupleChildFromParent) {
+            this.rootItems.forEach(item => item.setCheckedAutomaticallyDependingOnChildren());
+        }
+        // Si es checkbox se modifica el valor y se emite
+        if (this.type === 'checkbox') {
+            this.value = [];
+            const items = this.getAllItemsInOrder();
+            items.forEach(item => {
+                if (item.checked) {
+                    this.value.push(item.value);
+                }
+            });
+            this.onChange(this.value);
+        }
+    }
+    /**
+     * Gestiona cuando el foco abandona un ítem desde un evento de teclado controlado
+     * @param options
+     */
+    handleItemQuitFocus(options) {
+        if (options && options.nextElement) {
+            const items = this.getAllItemsInOrder();
+            const focusableItems = items.filter(item => !item.isHidden() && !item.disabled && item.allParentsExpanded);
+            switch (options.nextElement) {
+                case "first":
+                    focusableItems[0].focus();
+                    break;
+                case "last":
+                    focusableItems[focusableItems.length - 1].focus();
+                    break;
+                case "parent":
+                    const currentSubLevel = options.currentItem.subLevel;
+                    if (currentSubLevel > 0) {
+                        const currentItemIndex = focusableItems.findIndex(item => item === options.currentItem);
+                        const parent = focusableItems.slice(0, currentItemIndex).reverse().find(item => item.subLevel < currentSubLevel);
+                        if (parent) {
+                            parent.focus();
+                        }
+                    }
+                    break;
+                case "firstChild":
+                case "next":
+                    if (options.currentItem) {
+                        let currentItemIndex = focusableItems.findIndex(item => item === options.currentItem);
+                        if (currentItemIndex < focusableItems.length - 1) {
+                            focusableItems[currentItemIndex + 1].focus();
+                        }
+                    }
+                    break;
+                case "previous":
+                    if (options.currentItem) {
+                        const currentItemIndex = focusableItems.findIndex(item => item === options.currentItem);
+                        if (currentItemIndex > 0) {
+                            focusableItems[currentItemIndex - 1].focus();
+                        }
+                    }
+                    break;
+            }
+        }
+    }
+    /**
+     * Realiza la búsqueda interna de los items en el componente
+     * @param value texto de búsqueda
+     */
+    onSearch(value) {
+        if (!this.disableDefaultSearch) {
+            if (value && value.length > 0) {
+                this.searchMatchValues = this.allItems.filter(item => item.matchesText(value)).map(item => item.value);
+            }
+            else {
+                this.searchMatchValues = null;
+            }
+            this.searchMatchValuesChange.emit(this.searchMatchValues);
+        }
+    }
+    /*
+     * Eventos al cambiar propiedades
+     */
+    /**
+     * Configura los items del árbol
+     */
+    configureAllItems() {
+        if (!this._alreadyConfiguringItems) {
+            this._alreadyConfiguringItems = true;
+            // Lo realizamos desde un setTimeout para que todos los inputs, values y demás vivan en paz y armonía
+            setTimeout(() => {
+                var _a;
+                if (((_a = this.allItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    this.clearSubscriptions(this._itemListCheckedSubscriptions);
+                    this.clearSubscriptions(this._itemListQuitFocusSubscriptions);
+                    this.allItems.forEach(item => {
+                        item.parentName = this.name;
+                        item.type = this.type;
+                        item.inheritedDescribedBy = this.getDescribedByForItems();
+                        item.inheritedExpandedFirstLevel = this.expandedFirstLevel;
+                        item.inheritedDecoupleChildFromParent = this.decoupleChildFromParent;
+                        if (this.value && this.value.length > 0) {
+                            item.setChecked(!!this.value.find(v => v === item.value), true);
+                        }
+                        item.detectChanges();
+                        const checkedSubscription = item.checkedChangeForTree.subscribe(() => this.updateValueFromItems(item));
+                        this._itemListCheckedSubscriptions.push(checkedSubscription);
+                        const quitFocusSubscription = item.quitFocus.subscribe(options => this.handleItemQuitFocus(options));
+                        this._itemListQuitFocusSubscriptions.push(quitFocusSubscription);
+                    });
+                    this.setErrorInItems(this.hasErrorMessageComponent());
+                    this.buildTree();
+                    if (!this.value) {
+                        this.updateValueFromItems();
+                    }
+                }
+                if (this.allItems && !this._allItemListSubscription) {
+                    this._allItemListSubscription = this.allItems.changes.subscribe(() => this.configureAllItems());
+                }
+                this.changeDetector.detectChanges();
+                this._alreadyConfiguringItems = false;
+            });
+        }
+    }
+    /**
+     * Modifica los items visibles según el filtro de búsqueda
+     */
+    onSearchMatchValuesChange() {
+        if (this.allItems) {
+            this.allItems.forEach(item => {
+                item.inheritedMatchesSearch = true;
+            });
+            if (this.searchMatchValues !== null && this.searchMatchValues !== undefined) {
+                this.allItems.forEach(item => {
+                    if (this.searchMatchValues.findIndex(value => item.value === value) < 0) {
+                        item.inheritedMatchesSearch = false;
+                    }
+                });
+            }
+        }
+    }
+    /*
+     * Getters and setters
+     */
+    getIdPrefix() {
+        return this.idPrefix ? this.idPrefix : this.name;
+    }
+    getDescribedBy() {
+        let describedBy = '';
+        if (this.describedBy) {
+            describedBy = this.describedBy;
+        }
+        if (this.hasHintComponent() && this.hintComponent.id) {
+            describedBy = describedBy + ' ' + this.hintComponent.id;
+        }
+        if (this.hasErrorMessageComponent() && this.errorMessageComponent.id) {
+            describedBy = describedBy + ' ' + this.errorMessageComponent.id;
+        }
+        return describedBy;
+    }
+    /**
+     * Devuelve el valor de describedBy que se transmitirá a los items
+     */
+    getDescribedByForItems() {
+        let describedBy;
+        if (this.hasFieldsetComponent()) {
+            describedBy = this.fieldsetComponent.describedBy;
+        }
+        else {
+            describedBy = this.getDescribedBy();
+        }
+        return describedBy;
+    }
+    hasFieldsetComponent() {
+        return !!this.fieldsetComponent;
+    }
+    /**
+     * Overrides super.getHintId();
+     */
+    getHintId() {
+        var _a;
+        return this.idPrefix ? this.idPrefix + '-hint' : (_a = this.hintComponent) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    /**
+     * Overrides super.getHintId();
+     */
+    getErrorId() {
+        var _a;
+        return this.idPrefix ? this.idPrefix + '-error' : (_a = this.errorMessageComponent) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    /*
+     * Funciones para reemplazar el contenido del fieldset, label, hint o errormessage
+     */
+    overrideFieldsetParams(fieldset) {
+        fieldset.caller = this.innerHtml;
+        fieldset.errorId = this.getErrorId();
+        fieldset.describedBy = this.getDescribedBy();
+        fieldset.detectChanges();
+    }
+    overrideSearchBarParams(searchbar) {
+        const defaultOnChange = searchbar.onChange;
+        const newOnChange = value => {
+            this.onSearch(value);
+            defaultOnChange(value);
+        };
+        searchbar.registerOnChange(newOnChange);
+    }
+    /**
+     * Se llama desde FormField
+     */
+    overrideHintParams(hint) {
+        hint.id = this.getHintId();
+        hint.detectChanges();
+    }
+    /**
+     * Se llama desde FormField
+     */
+    overrideErrorMessageParams(errorMessage) {
+        errorMessage.id = this.getErrorId();
+        this.setErrorInItems(this.hasErrorMessageComponent());
+        errorMessage.detectChanges();
+    }
+    /**
+     * Se llama desde FormField
+     */
+    onDeleteErrorMessage(errorMessage) {
+        this.setErrorInItems(this.hasErrorMessageComponent());
+    }
+    /*
+     * Métodos privados
+     */
+    /**
+     * Configura la estructura del árbol
+     * @private
+     */
+    buildTree() {
+        // Se crea un mapa para tener accesibles los items por key y se borran los listados existentes
+        const itemMap = {};
+        this.rootItems = [];
+        this.allItems.forEach(item => {
+            const key = item.getKey();
+            itemMap[key] = item;
+            if (item.sub) {
+                item.sub.itemList = [];
+            }
+        });
+        // Se añaden los items a los listados correspondientes
+        this.allItems.forEach(item => {
+            const parentKey = item.getParentKey();
+            if (parentKey === 'root') {
+                this.rootItems.push(item);
+            }
+            else if (parentKey) {
+                const sub = itemMap[parentKey].sub;
+                if (sub) {
+                    sub.itemList.push(item);
+                }
+            }
+        });
+        // Se configuran los items desde root
+        let order = 0;
+        this.rootItems.forEach((item, index) => {
+            item.setSubLevel(0);
+            item.setDefaultId(`${this.idPrefix}-${index}`);
+            item.refreshAllParentsExpandedRecursive(true);
+            item.setCheckedAutomaticallyDependingOnChildren();
+            order = item.setOrderRecursively(order);
+        });
+    }
+    /**
+     * Si tiene un mensaje de error, se indica a los items
+     * @param hasError
+     * @private
+     */
+    setErrorInItems(hasError) {
+        var _a;
+        if (((_a = this.allItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.allItems.forEach(item => {
+                item.inheritedHasError = hasError;
+                item.detectChanges();
+            });
+        }
+    }
+    /**
+     * Limpia un listado de subscripciones
+     * @param subscriptionList
+     * @private
+     */
+    clearSubscriptions(subscriptionList) {
+        if (subscriptionList.length > 0) {
+            subscriptionList.forEach(s => s.unsubscribe());
+            subscriptionList.splice(0, subscriptionList.length);
         }
     }
-    onClick(event) {
-        if (!this.disabled) {
-            this.clickEvent.emit(event);
+    /**
+     * Devuelve los items del árbol ordenados
+     * @private
+     */
+    getAllItemsInOrder() {
+        let list = [];
+        if (this.allItems) {
+            list = this.allItems.toArray().sort((a, b) => a.orderInTree > b.orderInTree ? 1 : -1);
         }
-    }
-    hasButton() {
-        return this.button && this.button.length > 0;
+        return list;
     }
 }
-SearchBarComponent.decorators = [
+TreeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'desy-search-bar',
-                template: "<!-- searchbar -->\r\n<div class=\"relative\" [ngClass]=\"{'flex flex-wrap items-end': hasButton()}\">\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              classes=\"sr-only\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" classes=\"sr-only\" [for]=\"id\"></desy-label>\r\n  <input type=\"search\"\r\n         [class]=\"['c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n         [ngClass]=\"{'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(),'w-full': !hasButton()}\"\r\n         [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"id ? id : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"hasButton(); else defaultButton\">\r\n    <ng-content select=\"desy-button\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultButton>\r\n    <button type=\"submit\" [attr.disabled]=\"disabled ? 'disabled' : null\" [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n            (click)=\"onClick($event)\"\r\n            [class]=\"['absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus', buttonClasses] | makeHtmlList\">\r\n      <span class=\"sr-only\">Buscar</span>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"1.375em\" height=\"1.375em\" aria-hidden=\"true\"><path d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\" fill=\"currentColor\"/></svg>\r\n    </button>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n</div>\r\n<!-- /searchbar -->\r\n",
+                selector: 'desy-tree',
+                template: "\r\n<ng-template #innerHtml>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n  <ng-content select=\"desy-error-message\"></ng-content>\r\n  <ng-content select=\"desy-search-bar\"></ng-content>\r\n  <ul [class]=\"['c-tree', classes] | makeHtmlList\"\r\n      [attr.role]=\"role ? role : 'tree'\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n      [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n      [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n      [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</ng-template>\r\n\r\n<!-- tree -->\r\n<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses === 'c-form-group--error') }\">\r\n  <ng-container *ngIf=\"hasFieldsetComponent(); else innerHtml\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => SearchBarComponent),
+                        useExisting: forwardRef(() => TreeComponent),
                         multi: true
                     }
                 ]
             },] }
 ];
-SearchBarComponent.propDecorators = {
-    button: [{ type: ContentChildren, args: [ButtonComponent,] }],
-    describedBy: [{ type: Input }],
+TreeComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TreeComponent.propDecorators = {
+    idPrefix: [{ type: Input }],
     classes: [{ type: Input }],
-    buttonClasses: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    clickEvent: [{ type: Output }]
-};
+    formGroupClasses: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    describedBy: [{ type: Input }],
+    expandedFirstLevel: [{ type: Input }],
+    decoupleChildFromParent: [{ type: Input }],
+    disableDefaultSearch: [{ type: Input }],
+    searchMatchValues: [{ type: Input }],
+    searchMatchValuesChange: [{ type: Output }],
+    allItems: [{ type: ContentChildren, args: [TreeItemComponent, { descendants: true },] }],
+    fieldsetComponent: [{ type: ContentChildren, args: [FieldsetComponent,] }],
+    searchBarComponent: [{ type: ContentChildren, args: [SearchBarComponent,] }],
+    innerHtml: [{ type: ViewChild, args: ['innerHtml', { static: true },] }]
+};
+__decorate([
+    DesyOnInputChange('onSearchMatchValuesChange')
+], TreeComponent.prototype, "searchMatchValues", void 0);
+__decorate([
+    DesyOnInputChange('configureAllItems')
+], TreeComponent.prototype, "allItems", void 0);
+__decorate([
+    DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
+], TreeComponent.prototype, "fieldsetComponent", void 0);
+__decorate([
+    DesyContentChild({ onSetCallbackName: 'overrideSearchBarParams' })
+], TreeComponent.prototype, "searchBarComponent", void 0);
 
 class ConditionDirective {
     constructor(templateRef) {
@@ -3052,6 +4044,30 @@ ConditionDirective.propDecorators = {
     items: [{ type: Input }]
 };
 
+class TreeItemsGeneratorComponent {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.content);
+    }
+}
+TreeItemsGeneratorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree-items-generator',
+                template: "<ng-template #content>\r\n  <ng-container *ngIf=\"items && itemTemplate\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: {item: item}\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+TreeItemsGeneratorComponent.ctorParameters = () => [
+    { type: ViewContainerRef }
+];
+TreeItemsGeneratorComponent.propDecorators = {
+    content: [{ type: ViewChild, args: ['content', { static: true },] }],
+    items: [{ type: Input }],
+    itemTemplate: [{ type: Input }]
+};
+
 class ModalButtonPrimaryComponent extends ContentBaseComponent {
     constructor() {
         super(...arguments);
@@ -3181,7 +4197,7 @@ class ModalComponent extends AccessibilityComponent {
 ModalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-modal',
-                template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap gap-sm w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-frontend.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-frontend que lo contemple -->\r\n        <ul class=\"flex flex-wrap gap-sm\" *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li>\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path 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\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
+                template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap gap-sm w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-html.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-html que lo contemple -->\r\n        <ul class=\"flex flex-wrap gap-sm\" *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li>\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path 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\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
             },] }
 ];
 ModalComponent.ctorParameters = () => [
@@ -3567,6 +4583,8 @@ class HeaderOffcanvasComponent {
         if (this.isOpen()) {
             this.dialogService.closeDialog(this.dialog);
             this.dialog = null;
+            const elementToFocus = document.getElementById('header-offcanvas-button');
+            elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
         }
     }
     isOpen() {
@@ -3591,14 +4609,15 @@ class HeaderOffcanvasComponent {
 }
 HeaderOffcanvasComponent.dialogOptions = {
     id: 'header-offcanvas-dialog',
-    focusOnClose: 'header-offcanvas',
+    focusOnClose: 'header-offcanvas-button',
     ariaModal: 'true',
-    ariaLabelledBy: 'header-offcanvas-button-text'
+    ariaLabelledBy: 'header-offcanvas-button-text',
+    role: 'dialog'
 };
 HeaderOffcanvasComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-offcanvas',
-                template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
+                template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
             },] }
 ];
 HeaderOffcanvasComponent.ctorParameters = () => [
@@ -3765,11 +4784,42 @@ class NavComponent extends AccessibilityComponent {
     getIdPrefix() {
         return this.idPrefix ? this.idPrefix : 'nav-item';
     }
+    movePrevious(event, currentIndex) {
+        event.preventDefault();
+        const items = this.getItemList();
+        let nextIndex = currentIndex - 1;
+        while (nextIndex >= 0 && !this.isFocusableItem(items[nextIndex])) {
+            nextIndex--;
+        }
+        if (nextIndex < items.length) {
+            const itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+            if (itemElem) {
+                itemElem.focus();
+            }
+        }
+    }
+    moveNext(event, currentIndex) {
+        event.preventDefault();
+        const items = this.getItemList();
+        let nextIndex = currentIndex + 1;
+        while (nextIndex < items.length && !this.isFocusableItem(items[nextIndex])) {
+            nextIndex++;
+        }
+        if (nextIndex < items.length) {
+            const itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+            if (itemElem) {
+                itemElem.focus();
+            }
+        }
+    }
+    isFocusableItem(item) {
+        return !item.active && !item.disabled;
+    }
 }
 NavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-nav',
-                template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
+                template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n             (keydown.arrowDown)=\"moveNext($event, i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n               (keydown.arrowDown)=\"moveNext($event, i)\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
             },] }
 ];
 NavComponent.propDecorators = {
@@ -3781,20 +4831,7 @@ NavComponent.propDecorators = {
     itemComponentList: [{ type: ContentChildren, args: [NavItemComponent,] }]
 };
 
-class HeaderSubnavComponent {
-    constructor() {
-        this.isOpen = false;
-        this.clickOutsideEnabled = false;
-    }
-    toggleOpen() {
-        this.isOpen = !this.isOpen;
-        setTimeout(() => this.clickOutsideEnabled = this.isOpen);
-    }
-    onKeydownEscape() {
-        this.isOpen = false;
-        this.clickOutsideEnabled = false;
-        document.getElementById('header-subnav-button').focus();
-    }
+class HeaderSubnavComponent extends AccessibilityComponent {
     hasSubnavItems() {
         return this.nav && this.nav.getItemList().length > 0;
     }
@@ -3812,50 +4849,21 @@ class HeaderSubnavComponent {
 HeaderSubnavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-subnav',
-                template: "\r\n<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #temlpateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 relative\">\r\n    <h2 id=\"subnav-title\">\r\n      <button id=\"header-subnav-button\" (click)=\"toggleOpen()\" class=\"pr-2 pl-3 py-4 border-r border-l border-neutral-base text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n              aria-haspopup=\"true\" [attr.aria-expanded]=\"isOpen\" (keydown.escape)=\"onKeydownEscape()\">\r\n        <span class=\"inline-block align-middle\" (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n          <ng-container *ngTemplateOutlet=\"temlpateContent\"></ng-container>\r\n        </span>\r\n        <svg class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\">\r\n          <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>\r\n        </svg>\r\n      </button>\r\n    </h2>\r\n    <div  *ngIf=\"isOpen\" @toggleDropdown\r\n          [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"toggleOpen()\"\r\n          (keydown.escape)=\"onKeydownEscape()\"\r\n          class=\"origin-top-left absolute left-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md\">\r\n      <div class=\"bg-white shadow-xs\" (desyContentEmpty)=\"handleEmptyContent('Header-subnav nav')\">\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n    <span #desyContentEmptyIgnore class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"temlpateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n",
-                animations: [
-                    trigger('toggleDropdown', [
-                        state('void', style({
-                            opacity: '0.0',
-                            transform: 'scale(0.95)'
-                        })),
-                        state('*', style({
-                            opacity: '1.0',
-                            transform: 'scale(1.0)'
-                        })),
-                        transition(':enter', [
-                            animate('100ms ease-out')
-                        ]),
-                        transition(':leave', [
-                            animate('75ms ease-in')
-                        ])
-                    ])
-                ]
+                template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <p class=\"sr-only\">Aplicaci\u00F3n actual: </p>\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </desy-dropdown>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n    <span #desyContentEmptyIgnore class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n"
             },] }
 ];
 HeaderSubnavComponent.propDecorators = {
-    classes: [{ type: HostBinding, args: ['class',] }, { type: Input }],
+    hiddenText: [{ type: Input }],
+    classesContainer: [{ type: Input }],
+    classesTooltip: [{ type: Input }],
+    classes: [{ type: Input }],
     nav: [{ type: ContentChildren, args: [NavComponent,] }]
 };
 __decorate([
     DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
 ], HeaderSubnavComponent.prototype, "nav", void 0);
 
-class HeaderDropdownComponent {
-    constructor() {
-        this.hostClass = 'hidden lg:block';
-        this.isOpen = false;
-        this.clickOutsideEnabled = false;
-    }
-    toggleOpen() {
-        this.isOpen = !this.isOpen;
-        setTimeout(() => this.clickOutsideEnabled = this.isOpen);
-    }
-    onKeydownEscape() {
-        this.isOpen = false;
-        this.clickOutsideEnabled = false;
-        document.getElementById('header-dropdown-button').focus();
-    }
+class HeaderDropdownComponent extends AccessibilityComponent {
     overrideNavParams(nav) {
         nav.hasNav = true;
         nav.idPrefix = 'header-dropdown-nav-item';
@@ -3863,12 +4871,6 @@ class HeaderDropdownComponent {
         nav.classes = 'w-max max-w-64';
         // nav.id = 'id-dropdown-nav'; // No existe como param de navComponent
     }
-    /**
-     * Estable las clases del elemento html del componente
-     */
-    setHostClass() {
-        this.hostClass = this.classes ? this.classes : 'hidden lg:block';
-    }
     handleEmptyContent(element) {
         throw new Error(`${element} content is required`);
     }
@@ -3876,38 +4878,23 @@ class HeaderDropdownComponent {
 HeaderDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-dropdown',
-                template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <div>\r\n      <button id=\"header-dropdown-button\" (click)=\"toggleOpen()\" class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n              aria-haspopup=\"true\" [attr.aria-expanded]=\"isOpen\" (keydown.escape)=\"onKeydownEscape()\">\r\n        <span class=\"inline-block align-middle text-right\" (desyContentEmpty)=\"handleEmptyContent('Header-dropdown')\">\r\n          <ng-content></ng-content>\r\n        </span> <svg class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" aria-hidden=\"true\" 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>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"isOpen\" @toggleDropdown (keydown.escape)=\"onKeydownEscape()\"\r\n         [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"toggleOpen()\"\r\n          class=\"origin-top-right absolute right-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md\">\r\n      <div class=\"bg-white shadow-xs\" (desyContentEmpty)=\"handleEmptyContent('Header-dropdown nav')\">\r\n        <ng-content select=\"desy-nav\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                animations: [
-                    trigger('toggleDropdown', [
-                        state('void', style({
-                            opacity: '0.0',
-                            transform: 'scale(0.95)'
-                        })),
-                        state('*', style({
-                            opacity: '1.0',
-                            transform: 'scale(1.0)'
-                        })),
-                        transition(':enter', [
-                            animate('100ms ease-out')
-                        ]),
-                        transition(':leave', [
-                            animate('75ms ease-in')
-                        ])
-                    ])
-                ]
+                template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer ? classesContainer : 'hidden lg:block'\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-content></ng-content>\r\n    </desy-dropdown>\r\n    <ng-template #caller>\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: templateNav }\"></ng-container>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n"
             },] }
 ];
 HeaderDropdownComponent.propDecorators = {
+    hiddenText: [{ type: Input }],
+    classesContainer: [{ type: Input }],
+    classesTooltip: [{ type: Input }],
     classes: [{ type: Input }],
-    hostClass: [{ type: HostBinding, args: ['class',] }],
-    nav: [{ type: ContentChildren, args: [NavComponent,] }]
+    nav: [{ type: ContentChildren, args: [NavComponent,] }],
+    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }]
 };
-__decorate([
-    DesyOnInputChange('setHostClass')
-], HeaderDropdownComponent.prototype, "classes", void 0);
 __decorate([
     DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
-], HeaderDropdownComponent.prototype, "nav", void 0);
+], HeaderDropdownComponent.prototype, "nav", void 0);
+__decorate([
+    DesyContentChild()
+], HeaderDropdownComponent.prototype, "contentComponent", void 0);
 
 class SkipLinkComponent extends AccessibilityComponent {
     constructor(changeDetectorRef) {
@@ -3962,7 +4949,7 @@ class HeaderComponent extends AccessibilityComponent {
 HeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header',
-                template: "<header [ngClass]=\"classes\"\r\n        [attr.role]=\"role ? role : null\"\r\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div [ngClass]=\"containerClasses\">\r\n    <nav [attr.aria-labelledby]=\"skiplinkComponent ? skiplinkComponent.id : 'skip-link'\">\r\n      <ng-content select=\"desy-skip-link\"></ng-content>\r\n      <desy-skip-link *ngIf=\"!skiplinkComponent\" text=\"Saltar al contenido principal\" [id]=\"'skip-link'\"></desy-skip-link>\r\n    </nav>\r\n    <div class=\"flex h-1 bg-red-700\">\r\n      <div class=\"flex-auto bg-yellow-300 h-full\"></div>\r\n      <div class=\"flex-auto bg-red-500 h-full\"></div>\r\n      <div class=\"flex-auto bg-red-800 h-full\"></div>\r\n    </div>\r\n    <div class=\"bg-black\">\r\n      <div class=\"container mx-auto px-base\">\r\n        <div class=\"flex items-center justify-between min-h-14\">\r\n          <div class=\"flex flex-wrap items-center\">\r\n            <div class=\"flex items-center flex-shrink-0\">\r\n              <a *ngIf=\"homepageRouterLink || !homepageUrl\" [routerLink]=\"homepageRouterLink\" [fragment]=\"homepageFragment\" class=\"text-white focus:outline-none focus:shadow-outline-warning\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 216.878 51.894\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/><path data-name=\"typo\" d=\"M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z\" fill-rule=\"evenodd\"/></svg>\r\n                <svg class=\"w-8 h-8 fill-current\" [ngClass]=\"{'sm:hidden': expandedLogo}\" viewBox=\"0 0 51.894 51.894\" width=\"32\" height=\"32\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/></svg>\r\n              </a>\r\n              <a *ngIf=\"!homepageRouterLink && homepageUrl\" [href]=\"homepageUrl | externalHref\" class=\"text-white focus:outline-none focus:shadow-outline-warning\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 216.878 51.894\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/><path data-name=\"typo\" d=\"M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z\" fill-rule=\"evenodd\"/></svg>\r\n                <svg class=\"w-8 h-8 fill-current\" [ngClass]=\"{'sm:hidden': expandedLogo}\" viewBox=\"0 0 51.894 51.894\" width=\"32\" height=\"32\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/></svg>\r\n              </a>\r\n\r\n              <ng-content select=\"desy-header-subnav\"></ng-content>\r\n              <desy-header-subnav *ngIf=\"!subnavComponent && subnavData && (subnavData.text || subnavData.html)\" [classes]=\"subnavData.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ html: subnavData.html, text: subnavData.text }\"></ng-container>\r\n                <desy-nav *ngIf=\"subnavData && subnavData.items && subnavData.items.length > 0\"\r\n                          [hasNav]=\"true\"\r\n                          [idPrefix]=\"'header-subnav-nav-item'\"\r\n                          [classes]=\"'w-max max-w-64'\"\r\n                          [items]=\"subnavData.items\"\r\n                          [id]=\"'id-subnav-nav'\"\r\n                          [ariaLabel]=\"'Aplicaciones'\"></desy-nav>\r\n              </desy-header-subnav>\r\n            </div>\r\n\r\n            <ng-content select=\"desy-header-navigation\"></ng-content>\r\n            <desy-header-navigation *ngIf=\"!navigationComponent && navigationData && navigationData.items && navigationData.items.length > 0\"\r\n                                    [idPrefix]=\"'header-nav-item'\"\r\n                                    [classes]=\"navigationData.classes\"\r\n                                    [items]=\"navigationData.items\"\r\n                                    [ariaLabel]=\"'Men\u00FA principal'\"></desy-header-navigation>\r\n          </div>\r\n\r\n          <ng-content select=\"desy-header-dropdown\"></ng-content>\r\n          <ng-container *ngIf=\"!dropdownComponent && dropdownData && dropdownData.items && dropdownData.items.length > 0\">\r\n            <desy-header-dropdown [classes]=\"dropdownData.classes\">\r\n              <ng-container *desyCustomInnerContent=\"{ html: dropdownData.html, text: dropdownData.text }\"></ng-container>\r\n              <desy-nav [hasNav]=\"true\"\r\n                        [idPrefix]=\"'header-dropdown-nav-item'\"\r\n                        [classes]=\"'w-max max-w-64'\"\r\n                        [items]=\"dropdownData.items\"\r\n                        [id]=\"'id-dropdown-nav'\"\r\n                        [ariaLabel]=\"'Men\u00FA de usuario'\"></desy-nav>\r\n            </desy-header-dropdown>\r\n          </ng-container>\r\n\r\n          <ng-content select=\"desy-header-offcanvas\"></ng-content>\r\n          <ng-container *ngIf=\"!offcanvasComponent && offcanvasData\">\r\n            <desy-header-offcanvas [classes]=\"offcanvasData.classes\">\r\n              <desy-header-offcanvas-button>\r\n                <ng-container *desyCustomInnerContent=\"{ html: offcanvasData.html, text: offcanvasData.text }\"></ng-container>\r\n              </desy-header-offcanvas-button>\r\n              <desy-header-offcanvas-close-button>{{ offcanvasData.textClose }}</desy-header-offcanvas-close-button>\r\n              <desy-content>\r\n                <ng-container *desyCustomInnerContent=\"{ template: offcanvasData.contentHtml }\"></ng-container>\r\n              </desy-content>\r\n            </desy-header-offcanvas>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</header>\r\n"
+                template: "<header [ngClass]=\"classes\"\r\n        [attr.role]=\"role ? role : null\"\r\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div [ngClass]=\"containerClasses\">\r\n    <nav [attr.aria-labelledby]=\"skiplinkComponent ? skiplinkComponent.id : 'skip-link'\">\r\n      <ng-content select=\"desy-skip-link\"></ng-content>\r\n      <desy-skip-link *ngIf=\"!skiplinkComponent\" text=\"Saltar al contenido principal\" [id]=\"'skip-link'\"></desy-skip-link>\r\n    </nav>\r\n    <div class=\"flex h-1 bg-red-700\">\r\n      <div class=\"flex-auto bg-yellow-300 h-full\"></div>\r\n      <div class=\"flex-auto bg-red-500 h-full\"></div>\r\n      <div class=\"flex-auto bg-red-800 h-full\"></div>\r\n    </div>\r\n    <div class=\"bg-black\">\r\n      <div class=\"container mx-auto px-base\">\r\n        <div class=\"flex items-center justify-between min-h-14\">\r\n          <div class=\"flex flex-wrap items-center\">\r\n            <div class=\"flex items-center flex-shrink-0\">\r\n              <a *ngIf=\"homepageRouterLink || !homepageUrl\" [routerLink]=\"homepageRouterLink\" [fragment]=\"homepageFragment\" class=\"text-white focus:outline-none focus:shadow-outline-warning\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 216.878 51.894\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/><path data-name=\"typo\" d=\"M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z\" fill-rule=\"evenodd\"/></svg>\r\n                <svg class=\"w-8 h-8 fill-current\" [ngClass]=\"{'sm:hidden': expandedLogo}\" viewBox=\"0 0 51.894 51.894\" width=\"32\" height=\"32\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/></svg>\r\n              </a>\r\n              <a *ngIf=\"!homepageRouterLink && homepageUrl\" [href]=\"homepageUrl | externalHref\" class=\"text-white focus:outline-none focus:shadow-outline-warning\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 216.878 51.894\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/><path data-name=\"typo\" d=\"M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z\" fill-rule=\"evenodd\"/></svg>\r\n                <svg class=\"w-8 h-8 fill-current\" [ngClass]=\"{'sm:hidden': expandedLogo}\" viewBox=\"0 0 51.894 51.894\" width=\"32\" height=\"32\" aria-label=\"Gobierno de Arag\u00F3n\" role=\"img\"><title>Ir a la p\u00E1gina de inicio</title><path data-name=\"img\" d=\"M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z\"/></svg>\r\n              </a>\r\n\r\n              <ng-content select=\"desy-header-subnav\"></ng-content>\r\n              <desy-header-subnav *ngIf=\"!subnavComponent && subnavData && (subnavData.text || subnavData.html)\"\r\n                                  [classes]=\"subnavData.classes\"\r\n                                  [hiddenText]=\"subnavData.hiddenText\"\r\n                                  [classesContainer]=\"subnavData.classesContainer\"\r\n                                  [classesTooltip]=\"subnavData.classesTooltip\"\r\n                                  [role]=\"subnavData.role\"\r\n                                  [ariaLabel]=\"subnavData.ariaLabel\"\r\n                                  [ariaDescribedBy]=\"subnavData.ariaDescribedBy\"\r\n                                  [ariaLabelledBy]=\"subnavData.ariaLabelledBy\"\r\n                                  [ariaHidden]=\"subnavData.ariaHidden\"\r\n                                  [ariaDisabled]=\"subnavData.ariaDisabled\"\r\n                                  [ariaControls]=\"subnavData.ariaControls\"\r\n                                  [ariaCurrent]=\"subnavData.ariaCurrent\"\r\n                                  [ariaLive]=\"subnavData.ariaLive\"\r\n                                  [ariaExpanded]=\"subnavData.ariaExpanded\"\r\n                                  [ariaErrorMessage]=\"subnavData.ariaErrorMessage\"\r\n                                  [ariaHasPopup]=\"subnavData.ariaHasPopup\"\r\n                                  [tabindex]=\"subnavData.tabindex\">\r\n                <ng-container *desyCustomInnerContent=\"{ html: subnavData.html, text: subnavData.text }\"></ng-container>\r\n                <desy-nav *ngIf=\"subnavData && subnavData.items && subnavData.items.length > 0\"\r\n                          [hasNav]=\"true\"\r\n                          [idPrefix]=\"'header-subnav-nav-item'\"\r\n                          [classes]=\"'w-max max-w-64'\"\r\n                          [items]=\"subnavData.items\"\r\n                          [id]=\"'id-subnav-nav'\"\r\n                          [ariaLabel]=\"'Aplicaciones'\"></desy-nav>\r\n              </desy-header-subnav>\r\n            </div>\r\n\r\n            <ng-content select=\"desy-header-navigation\"></ng-content>\r\n            <desy-header-navigation *ngIf=\"!navigationComponent && navigationData && navigationData.items && navigationData.items.length > 0\"\r\n                                    [idPrefix]=\"'header-nav-item'\"\r\n                                    [classes]=\"navigationData.classes\"\r\n                                    [items]=\"navigationData.items\"\r\n                                    [ariaLabel]=\"'Men\u00FA principal'\"></desy-header-navigation>\r\n          </div>\r\n\r\n          <ng-content select=\"desy-header-dropdown\"></ng-content>\r\n          <ng-container *ngIf=\"!dropdownComponent && dropdownData && dropdownData.items && dropdownData.items.length > 0\">\r\n            <desy-header-dropdown [classes]=\"dropdownData.classes\"\r\n                                  [hiddenText]=\"dropdownData.hiddenText\"\r\n                                  [classesContainer]=\"dropdownData.classesContainer\"\r\n                                  [classesTooltip]=\"dropdownData.classesTooltip\"\r\n                                  [role]=\"dropdownData.role\"\r\n                                  [ariaLabel]=\"dropdownData.ariaLabel\"\r\n                                  [ariaDescribedBy]=\"dropdownData.ariaDescribedBy\"\r\n                                  [ariaLabelledBy]=\"dropdownData.ariaLabelledBy\"\r\n                                  [ariaHidden]=\"dropdownData.ariaHidden\"\r\n                                  [ariaDisabled]=\"dropdownData.ariaDisabled\"\r\n                                  [ariaControls]=\"dropdownData.ariaControls\"\r\n                                  [ariaCurrent]=\"dropdownData.ariaCurrent\"\r\n                                  [ariaLive]=\"dropdownData.ariaLive\"\r\n                                  [ariaExpanded]=\"dropdownData.ariaExpanded\"\r\n                                  [ariaErrorMessage]=\"dropdownData.ariaErrorMessage\"\r\n                                  [ariaHasPopup]=\"dropdownData.ariaHasPopup\"\r\n                                  [tabindex]=\"dropdownData.tabindex\">\r\n              <ng-container *desyCustomInnerContent=\"{ html: dropdownData.html, text: dropdownData.text }\"></ng-container>\r\n              <desy-nav [hasNav]=\"true\"\r\n                        [idPrefix]=\"'header-dropdown-nav-item'\"\r\n                        [classes]=\"'w-max max-w-64'\"\r\n                        [items]=\"dropdownData.items\"\r\n                        [id]=\"'id-dropdown-nav'\"\r\n                        [ariaLabel]=\"'Men\u00FA de usuario'\"></desy-nav>\r\n            </desy-header-dropdown>\r\n          </ng-container>\r\n\r\n          <ng-content select=\"desy-header-offcanvas\"></ng-content>\r\n          <ng-container *ngIf=\"!offcanvasComponent && offcanvasData\">\r\n            <desy-header-offcanvas [classes]=\"offcanvasData.classes\">\r\n              <desy-header-offcanvas-button>\r\n                <ng-container *desyCustomInnerContent=\"{ html: offcanvasData.html, text: offcanvasData.text }\"></ng-container>\r\n              </desy-header-offcanvas-button>\r\n              <desy-header-offcanvas-close-button>{{ offcanvasData.textClose }}</desy-header-offcanvas-close-button>\r\n              <desy-content>\r\n                <ng-container *desyCustomInnerContent=\"{ template: offcanvasData.contentHtml }\"></ng-container>\r\n              </desy-content>\r\n            </desy-header-offcanvas>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</header>\r\n"
             },] }
 ];
 HeaderComponent.propDecorators = {
@@ -4245,7 +5232,7 @@ class MenuHorizontalComponent extends AccessibilityComponent {
 MenuHorizontalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menu-horizontal',
-                template: "<!-- menu-horizontal -->\r\n<nav [class]=\"['c-menu-horizontal', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ul class=\"c-menu-horizontal__list lg:flex lg:flex-wrap\">\r\n    <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n      <li *ngIf=\"item\">\r\n        <span *ngIf=\"item.active; else elseBlock\" [attr.id]=\"getItemId(item, i)\"\r\n              [class]=\"['c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold', item.classes] | makeHtmlList\"\r\n              [attr.title]=\"item.title ? item.title : null\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              aria-current=\"page\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n          <strong (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </span>\r\n        <ng-template #elseBlock>\r\n          <a *ngIf=\"item.routerLink && !item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [routerLink]=\"item.routerLink\"\r\n             [fragment]=\"item.fragment\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n          <a *ngIf=\"!item.routerLink && item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [href]=\"item.href | externalHref\"\r\n             [target]=\"item.target\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n        </ng-template>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n<!-- /menu-horizontal -->\r\n"
+                template: "<!-- menu-horizontal -->\r\n<nav [class]=\"['c-menu-horizontal', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ul class=\"c-menu-horizontal__list lg:flex lg:flex-wrap\">\r\n    <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n      <li *ngIf=\"item\">\r\n        <span *ngIf=\"item.active; else elseBlock\" [attr.id]=\"getItemId(item, i)\"\r\n              [class]=\"['c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold', item.classes] | makeHtmlList\"\r\n              [attr.title]=\"item.title ? item.title : null\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              aria-current=\"page\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n          <strong (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </span>\r\n        <ng-template #elseBlock>\r\n          <a *ngIf=\"item.routerLink && !item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [routerLink]=\"item.routerLink\"\r\n             [fragment]=\"item.fragment\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'no-underline pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n          <a *ngIf=\"!item.routerLink && item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [href]=\"item.href | externalHref\"\r\n             [target]=\"item.target\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'no-underline pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n        </ng-template>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n<!-- /menu-horizontal -->\r\n"
             },] }
 ];
 MenuHorizontalComponent.propDecorators = {
@@ -4340,7 +5327,7 @@ class MenuVerticalComponent extends AccessibilityComponent {
         else {
             const idPrefix = this.idPrefix ? this.idPrefix : 'nav-item';
             if (i === 0) {
-                return idPrefix;
+                return idPrefix + '-0';
             }
             else {
                 return idPrefix + '-' + i;
@@ -4377,11 +5364,20 @@ class MenuVerticalComponent extends AccessibilityComponent {
         const subItems = sub instanceof MenuVerticalItemSubComponent ? sub.itemComponents.toArray() : sub.items;
         return subItems && subItems.length > 0 ? subItems : null;
     }
+    focus(id, idFocus) {
+        const elementToQuitFocus = document.getElementById(id);
+        elementToQuitFocus.blur();
+        if (idFocus) {
+            const elementToFocus = document.getElementById(idFocus);
+            elementToFocus.tabIndex = 0;
+            elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+        }
+    }
 }
 MenuVerticalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menu-vertical',
-                template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\" [routerLinkActive]=\"item.routerLinkActiveClasses\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
+                template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\"\r\n             \r\n             (click)=\"focus(id, item.fragment ? item.fragment : null)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
                 animations: [
                     trigger('displayMenuVertical', [
                         state('void', style({
@@ -4775,7 +5771,7 @@ class MenubarComponent extends AccessibilityComponent {
         if (!items || items.length === 0) {
             throw Error('Items are required');
         }
-        // No se ha puesto label required porque en algunos ejemplos de desy-frontend no aparece
+        // No se ha puesto label required porque en algunos ejemplos de desy-html no aparece
     }
     handleEmptyItem(text) {
         throw Error(text);
@@ -5156,7 +6152,7 @@ class MenubarComponent extends AccessibilityComponent {
 MenubarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menubar',
-                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <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>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
+                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <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>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
             },] }
 ];
 MenubarComponent.ctorParameters = () => [
@@ -5408,63 +6404,6 @@ __decorate([
     DesyContentChild()
 ], TableComponent.prototype, "headerComponent", void 0);
 
-class SearchUtils {
-    /**
-     * Comprueba si una cadena de texto (target) contiene cualquier palabra de otro texto (text)
-     * @param target - Texto en el que buscar
-     * @param text - Texto a buscar
-     * @param fullWord - Indica si las palabras del texto a buscar deben aparecer enteras
-     */
-    static containsAnyWordFrom(target, text, fullWord) {
-        let words = [];
-        let includes = false;
-        const simplifiedTarget = this.getSimplifiedString(target);
-        if (text && text.split(' ').length > 1) {
-            words = text.split(' ');
-        }
-        words.push(text);
-        words.forEach(word => {
-            if (simplifiedTarget && word) {
-                if ((fullWord && simplifiedTarget === this.getSimplifiedString(word))
-                    || (!fullWord && simplifiedTarget.includes(this.getSimplifiedString(word)))) {
-                    includes = true;
-                }
-            }
-        });
-        return includes;
-    }
-    /**
-     * Convierte a mayúsculas, elimina espacios y reemplaza/elimina caracteres especiales para realizar comparaciones más tolerantes
-     * @param str - cadena de entrada
-     */
-    static getSimplifiedString(str) {
-        let res = str;
-        if (str) {
-            res = str.toLocaleUpperCase().trim();
-            res = res.replace('Á', 'A');
-            res = res.replace('É', 'E');
-            res = res.replace('Í', 'I');
-            res = res.replace('Ó', 'O');
-            res = res.replace('Ú', 'U');
-            res = res.replace('À', 'A');
-            res = res.replace('È', 'E');
-            res = res.replace('Ì', 'I');
-            res = res.replace('Ò', 'O');
-            res = res.replace('Ù', 'U');
-            res = res.replace('Ä', 'A');
-            res = res.replace('Ë', 'E');
-            res = res.replace('Ï', 'I');
-            res = res.replace('Ö', 'O');
-            res = res.replace('Ü', 'U');
-            res = res.replace(',', '');
-            res = res.replace('.', '');
-            res = res.replace('\'', '');
-            res = res.replace('"', '');
-        }
-        return res;
-    }
-}
-
 var OrderBy;
 (function (OrderBy) {
     OrderBy["none"] = "none";
@@ -5868,13 +6807,20 @@ class AlertComponent extends AccessibilityComponent {
         this.activeChange = new EventEmitter();
         this.lastActiveState = undefined;
         this.hasViewinit = false;
+        this.createdCallerFromType = false;
     }
-    ngOnChanges() {
-        this.handleActiveState();
+    set active(value) {
+        setTimeout(() => {
+            this._active = value;
+            this.cdRef.detectChanges();
+            this.handleActiveState();
+        });
+    }
+    get active() {
+        return this._active;
     }
     ngOnDestroy() {
         this.active = false;
-        this.handleActiveState();
     }
     ngAfterViewInit() {
         if (!this.id) {
@@ -5884,30 +6830,28 @@ class AlertComponent extends AccessibilityComponent {
             throw Error('caller is required');
         }
         this.hasViewinit = true;
-        this.cdRef.detectChanges();
-        if (this.callerType) {
-            const factory = this.factoryResolver.resolveComponentFactory(this.callerType);
-            const component = this.container.createComponent(factory);
-            if (this.onCallerCreationCallback) {
-                this.onCallerCreationCallback(this, component);
-            }
-        }
         this.handleActiveState();
-        this.cdRef.detectChanges();
     }
     dismiss() {
         this.activeChange.emit(false);
     }
     handleActiveState() {
-        if (this.active !== this.lastActiveState && this.hasViewinit) {
-            this.lastActiveState = this.active;
-            if (this.active && this.focusFirst) {
-                setTimeout(() => {
-                    const focusElem = FocusUtils.getFirstFocusableElement(this.alertWrapper.nativeElement);
-                    if (focusElem) {
-                        setTimeout(() => focusElem.focus());
-                    }
-                });
+        if (this._active && this.callerType && !this.createdCallerFromType) {
+            const factory = this.factoryResolver.resolveComponentFactory(this.callerType);
+            const component = this.container.createComponent(factory);
+            if (this.onCallerCreationCallback) {
+                this.onCallerCreationCallback(this, component);
+            }
+            this.createdCallerFromType = true;
+        }
+        if (this._active !== this.lastActiveState && this.hasViewinit) {
+            this.lastActiveState = this._active;
+            if (this._active && this.focusFirst) {
+                this.cdRef.detectChanges();
+                const focusElem = FocusUtils.getFirstFocusableElement(this.alertWrapper.nativeElement);
+                if (focusElem) {
+                    focusElem.focus();
+                }
             }
         }
     }
@@ -5915,7 +6859,7 @@ class AlertComponent extends AccessibilityComponent {
 AlertComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-alert',
-                template: "<div #alertWrapper\r\n     [id]=\"id\" [class]=\"classes ? classes : null\" *ngIf=\"active\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\">\r\n  <ng-template #container></ng-template>\r\n  <ng-container *ngTemplateOutlet=\"caller; context:callerContext\"></ng-container>\r\n</div>\r\n\r\n"
+                template: "<div #alertWrapper\r\n     [id]=\"id\" [class]=\"classes ? classes : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\">\r\n  <ng-container *ngIf=\"active\">\r\n    <ng-template #container></ng-template>\r\n    <ng-container *ngTemplateOutlet=\"caller; context:callerContext\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n"
             },] }
 ];
 AlertComponent.ctorParameters = () => [
@@ -6828,7 +7772,7 @@ class PaginationComponent extends AccessibilityComponent {
 PaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-pagination',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
+                template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
             },] }
 ];
 PaginationComponent.propDecorators = {
@@ -7307,6 +8251,11 @@ DesyFormsModule.decorators = [
                     DateInputDayComponent,
                     DateInputMonthComponent,
                     DateInputYearComponent,
+                    TreeComponent,
+                    TreeSubComponent,
+                    TreeItemComponent,
+                    TreeCheckboxComponent,
+                    TreeItemsGeneratorComponent,
                     ConditionDirective,
                 ],
                 imports: [
@@ -7343,6 +8292,10 @@ DesyFormsModule.decorators = [
                     DateInputDayComponent,
                     DateInputMonthComponent,
                     DateInputYearComponent,
+                    TreeComponent,
+                    TreeSubComponent,
+                    TreeItemComponent,
+                    TreeItemsGeneratorComponent,
                     ConditionDirective
                 ]
             },] }
@@ -7537,6 +8490,67 @@ DesyViewsModule.decorators = [
             },] }
 ];
 
+class ToggleOffStateComponent extends AccessibilityComponent {
+}
+ToggleOffStateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-toggle-off-state',
+                template: "<ng-template #contentTemplateOffState>\r\n   <ng-content></ng-content>\r\n</ng-template>"
+            },] }
+];
+ToggleOffStateComponent.propDecorators = {
+    content: [{ type: ViewChild, args: ['contentTemplateOffState', { static: true },] }],
+    classes: [{ type: Input }]
+};
+
+class ToggleOnStateComponent extends AccessibilityComponent {
+}
+ToggleOnStateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-toggle-on-state',
+                template: "<ng-template #contentTemplateOnState>\r\n   <ng-content></ng-content>\r\n</ng-template>"
+            },] }
+];
+ToggleOnStateComponent.propDecorators = {
+    content: [{ type: ViewChild, args: ['contentTemplateOnState', { static: true },] }],
+    classes: [{ type: Input }]
+};
+
+class ToggleComponent extends AccessibilityComponent {
+    constructor() {
+        super(...arguments);
+        this.clickEvent = new EventEmitter();
+        this.pressedChange = new EventEmitter();
+    }
+    onClick(event) {
+        this.pressed = !this.pressed;
+        this.pressedChange.emit(this.pressed);
+        this.clickEvent.emit(event);
+    }
+}
+ToggleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-toggle',
+                template: "<!-- toggle -->\r\n<div class=\"relative\">\r\n  <button *ngIf=\"isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\r\n          \r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"'switch'\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n\r\n  <button *ngIf=\"!isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n</div>\r\n<!-- /toggle -->"
+            },] }
+];
+ToggleComponent.propDecorators = {
+    id: [{ type: Input }],
+    isSwitch: [{ type: Input }],
+    pressed: [{ type: Input }],
+    classes: [{ type: Input }],
+    clickEvent: [{ type: Output }],
+    pressedChange: [{ type: Output }],
+    contentTemplateOnState: [{ type: ContentChildren, args: [ToggleOnStateComponent,] }],
+    contentTemplateOffState: [{ type: ContentChildren, args: [ToggleOffStateComponent,] }]
+};
+__decorate([
+    DesyContentChild()
+], ToggleComponent.prototype, "contentTemplateOnState", void 0);
+__decorate([
+    DesyContentChild()
+], ToggleComponent.prototype, "contentTemplateOffState", void 0);
+
 class DesyButtonsModule {
 }
 DesyButtonsModule.decorators = [
@@ -7548,7 +8562,10 @@ DesyButtonsModule.decorators = [
                     ListboxComponent,
                     PillComponent,
                     ListboxItemComponent,
-                    ListboxLabelComponent
+                    ListboxLabelComponent,
+                    ToggleComponent,
+                    ToggleOnStateComponent,
+                    ToggleOffStateComponent
                 ],
                 imports: [
                     CommonModule,
@@ -7563,7 +8580,10 @@ DesyButtonsModule.decorators = [
                     ListboxComponent,
                     PillComponent,
                     ListboxItemComponent,
-                    ListboxLabelComponent
+                    ListboxLabelComponent,
+                    ToggleComponent,
+                    ToggleOnStateComponent,
+                    ToggleOffStateComponent
                 ]
             },] }
 ];
@@ -7636,7 +8656,8 @@ DesyNavModule.decorators = [
                 imports: [
                     CommonModule,
                     SharedModule,
-                    DesyCommonsModule
+                    DesyCommonsModule,
+                    DesyButtonsModule
                 ],
                 exports: [
                     BreadcrumbsComponent,
@@ -7819,7 +8840,6 @@ class DesyAngularModule {
 DesyAngularModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    BrowserAnimationsModule,
                     DesyButtonsModule,
                     DesyCommonsModule,
                     DesyFormsModule,
@@ -7852,5 +8872,5 @@ DesyAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, summaryTextOrSummaryHtmlRequiredFunction, AccessibilityAndContentRequiredComponent as ɵa, AccessibilityAndTextOrHtmlRequiredComponent as ɵb, CustomInnerContentDirective as ɵba, TooltipComponent as ɵbb, TemplateDrivenWrapperComponent as ɵbc, DateInputDividerComponent as ɵbd, DateInputDayComponent as ɵbe, DateInputMonthComponent as ɵbf, DateInputYearComponent as ɵbg, FocusClickedCellDirective as ɵbh, DesyContentChild as ɵc, AccessibilityComponent as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, HeaderNavigationItemComponent as ɵk, MenubaritemDirective as ɵl, RowDirective as ɵm, CellDirective as ɵn, TabItemComponent as ɵo, PanelComponent as ɵp, SharedModule as ɵq, TextOrHtmlRequiredComponent as ɵr, InnerHtmlPipe as ɵs, MakeHtmlListPipe as ɵt, ExternalHrefPipe as ɵu, AttributeChangeDirective as ɵv, InnerContentDirective as ɵw, ClickOutsideDirective as ɵx, ContentChangeDirective as ɵy, ContentEmptyDirective as ɵz };
+export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, TreeComponent, TreeItemComponent, TreeItemsGeneratorComponent, TreeSubComponent, summaryTextOrSummaryHtmlRequiredFunction, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, AttributeChangeDirective as ɵba, InnerContentDirective as ɵbb, ClickOutsideDirective as ɵbc, ContentChangeDirective as ɵbd, ContentEmptyDirective as ɵbe, CustomInnerContentDirective as ɵbf, TooltipComponent as ɵbg, TemplateDrivenWrapperComponent as ɵbh, DateInputDividerComponent as ɵbi, DateInputDayComponent as ɵbj, DateInputMonthComponent as ɵbk, DateInputYearComponent as ɵbl, FocusClickedCellDirective as ɵbm, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, ITreeItem as ɵk, TreeCheckboxComponent as ɵl, HeaderNavigationItemComponent as ɵm, MenubaritemDirective as ɵn, RowDirective as ɵo, CellDirective as ɵp, TabItemComponent as ɵq, PanelComponent as ɵr, ToggleComponent as ɵs, ToggleOnStateComponent as ɵt, ToggleOffStateComponent as ɵu, SharedModule as ɵv, TextOrHtmlRequiredComponent as ɵw, InnerHtmlPipe as ɵx, MakeHtmlListPipe as ɵy, ExternalHrefPipe as ɵz };
 //# sourceMappingURL=desy-angular.js.map