npm - desy-angular - Versions diffs - 5.3.0 → 6.0.0 - Mend

desy-angular 5.3.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/fesm2015/desy-angular.js CHANGED Viewed

@@ -118,7 +118,7 @@ AccessibilityAndContentRequiredComponent.propDecorators = {
     tabindex: [{ type: Input }]
 };
-class ButtonComponent extends AccessibilityComponent {
+class ButtonComponent extends ContentBaseComponent {
     constructor() {
         super(...arguments);
         this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
@@ -186,7 +186,7 @@ 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\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"
+                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        [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        [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 = {
@@ -245,7 +245,7 @@ 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\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"
+                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() ? getSpinnerText() : 'Acci\u00F3n en curso'\" [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    <span class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</span>\r\n    <span aria-hidden=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"  aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"></path></svg></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       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\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    <span class=\"c-button-loader__content inline-flex align-baseline\">\r\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" \r\n      class=\"bg-transparent font-semibold\" \r\n      [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\" \r\n      [attr.disabled]=\"isDisabled()\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.name]=\"name ? name : null\">\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 = {
@@ -381,6 +381,9 @@ class DropdownComponent extends AccessibilityAndContentRequiredComponent {
             };
         }
     }
+    ngOnChanges(changes) {
+        this.classesContainer = this.classesContainer ? this.classesContainer : 'relative';
+    }
     onClick(event) {
         if (!this.isDisabled()) {
             this.clickEvent.emit(event);
@@ -397,7 +400,7 @@ DropdownComponent.KEY_CODE_ESC = 'Escape';
 DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-dropdown',
-                template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button (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\" 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"
+                template: "<button (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\" 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>"
             },] }
 ];
 DropdownComponent.propDecorators = {
@@ -405,10 +408,10 @@ DropdownComponent.propDecorators = {
     id: [{ type: Input }],
     disabled: [{ type: Input }],
     hiddenText: [{ type: Input }],
-    classesContainer: [{ type: Input }],
+    classesContainer: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     classesTooltip: [{ type: Input }],
-    classes: [{ type: Input }],
     caller: [{ type: Input }],
+    classes: [{ type: Input }],
     clickEvent: [{ type: Output }]
 };
@@ -737,7 +740,7 @@ ListboxComponent.KEY_CODE_ESC = 'Escape';
 ListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-listbox',
-                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"
+                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>"
             },] }
 ];
 ListboxComponent.propDecorators = {
@@ -847,7 +850,8 @@ DescriptionComponent.decorators = [
             },] }
 ];
 DescriptionComponent.propDecorators = {
-    classes: [{ type: Input }]
+    classes: [{ type: Input }],
+    visuallyHiddenTitle: [{ type: Input }]
 };
 class IconComponent extends ContentBaseComponent {
@@ -859,7 +863,8 @@ IconComponent.decorators = [
             },] }
 ];
 IconComponent.propDecorators = {
-    type: [{ type: Input }]
+    type: [{ type: Input }],
+    containerClasses: [{ type: Input }]
 };
 class TitleComponent extends ContentBaseComponent {
@@ -1104,10 +1109,13 @@ __decorate([
 class TextareaComponent extends FormFieldComponent {
     constructor() {
         super();
+        //  form group class - asignar clases a la etiqueta desy-input
+        this.cfg = true;
         this.inputTransform = (value) => value;
     }
     ngOnChanges() {
         this.writeValue(this.value);
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
     }
     getRows() {
         return this.rows ? this.rows : TextareaComponent.DEFAULT_ROWS;
@@ -1130,7 +1138,7 @@ TextareaComponent.DEFAULT_ROWS = 5;
 TextareaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-textarea',
-                template: "<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\" [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\r\n\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]=\"labelData.classes\"\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\" [for]=\"id\"></desy-label>\r\n\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\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\r\n\r\n  <textarea #textarea\r\n            [class]=\"['block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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            [value]=\"value ? value : ''\" (input)=\"onInput($event.target.value)\"\r\n            [ngClass]=\"{'border-alert-base ring-2 ring-alert-base' : hasErrorsMessage()}\"\r\n            [rows]=\"getRows()\"\r\n            [attr.id]=\"id ? id : null\"\r\n            [attr.name]=\"name ? name : null\"\r\n            [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n            [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n            [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n            [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n            [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n            [attr.disabled]=\"disabled ? true : null\"\r\n            [attr.maxlength]=\"maxlength\"\r\n\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\"></textarea>\r\n</div>\r\n",
+                template: "<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]=\"labelData.classes\"\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\" [for]=\"id\"></desy-label>\r\n\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\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\r\n\r\n<textarea #textarea\r\n          [class]=\"['block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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          [value]=\"value ? value : ''\" (input)=\"onInput($event.target.value)\"\r\n          [ngClass]=\"{'border-alert-base ring-2 ring-alert-base' : hasErrorsMessage()}\"\r\n          [rows]=\"getRows()\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n          [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n          [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n          [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n          [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n          [attr.disabled]=\"disabled ? true : null\"\r\n          [attr.maxlength]=\"maxlength\"\r\n\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\"></textarea>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1147,7 +1155,9 @@ TextareaComponent.propDecorators = {
     rows: [{ type: Input }],
     placeholder: [{ type: Input }],
     describedBy: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     classes: [{ type: Input }],
     autocomplete: [{ type: Input }],
     maxlength: [{ type: Input }]
@@ -1233,7 +1243,7 @@ class CharacterCountComponent extends FormFieldComponent {
 CharacterCountComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-character-count',
-                template: "<div>\r\n  <desy-textarea\r\n    [id]=\"id\"\r\n    [name]=\"name\"\r\n    [describedBy]=\"id + '-info'\"\r\n    [rows]=\"rows\"\r\n    [placeholder]=\"placeholder\"\r\n    [formGroupClasses]=\"[formGroupClasses ? formGroupClasses : 'mb-0'] | makeHtmlList\"\r\n    [classes]=\"['js-character-count',  hasErrorsMessage() ? 'border-alert-base ring-2 ring-alert-base' : null, classes] | makeHtmlList\"\r\n    [labelRef]=\"labelRef\" [labelData]=\"labelData\" [labelText]=\"labelText\"\r\n    [hintRef]=\"hintRef\" [hintData]=\"hintData\" [hintText]=\"hintText\"\r\n    [errorMessageRef]=\"errorMessageRef\" [errorMessageData]=\"errorMessageData\" [errorMessageText]=\"errorMessageText\"\r\n    [role]=\"role\"\r\n    [ariaLabel]=\"ariaLabel\"\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\"></desy-textarea>\r\n\r\n  <desy-hint *ngIf=\"!!displayCountMessage\"\r\n    [id]=\"id + '-info'\" [classes]=\"['mt-xs text-sm', countMessageClasses] | makeHtmlList\" ariaLive=\"polite\"\r\n    [text]=\"'Puedes escribir hasta ' + remaining + (maxlength ? ' caracteres' : ' palabras')\"></desy-hint>\r\n</div>\r\n",
+                template: "<desy-textarea\r\n  [id]=\"id\"\r\n  [name]=\"name\"\r\n  [describedBy]=\"id + '-info'\"\r\n  [rows]=\"rows\"\r\n  [placeholder]=\"placeholder\"\r\n  [formGroupClasses]=\"[formGroupClasses ? formGroupClasses : 'mb-0'] | makeHtmlList\"\r\n  [classes]=\"['js-character-count',  hasErrorsMessage() ? 'border-alert-base ring-2 ring-alert-base' : null, classes] | makeHtmlList\"\r\n  [labelRef]=\"labelRef\" [labelData]=\"labelData\" [labelText]=\"labelText\"\r\n  [hintRef]=\"hintRef\" [hintData]=\"hintData\" [hintText]=\"hintText\"\r\n  [errorMessageRef]=\"errorMessageRef\" [errorMessageData]=\"errorMessageData\" [errorMessageText]=\"errorMessageText\"\r\n  [role]=\"role\"\r\n  [ariaLabel]=\"ariaLabel\"\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\"></desy-textarea>\r\n\r\n<desy-hint *ngIf=\"!!displayCountMessage\"\r\n  [id]=\"id + '-info'\" [classes]=\"['mt-xs text-sm', countMessageClasses] | makeHtmlList\" ariaLive=\"polite\"\r\n  [text]=\"'Puedes escribir hasta ' + remaining + (maxlength ? ' caracteres' : ' palabras')\"></desy-hint>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1401,7 +1411,7 @@ class SelectComponent extends FormFieldComponent {
 SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-select',
-                template: "\r\n     <ng-container *ngIf=\"labelComponent\">\r\n      <ng-content select=\"desy-label\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData && !labelComponent\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              [classes]=\"labelData.classes\"\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 && !labelComponent\" [text]=\"labelText\" [for]=\"id\"></desy-label>\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <ng-container *ngIf=\"hintComponent\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData && !hintComponent\"\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 && !hintComponent\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData && !errorMessageComponent\"\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 && !errorMessageComponent && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  <select\r\n    [class]=\"['c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\r\n              classes,\r\n              hasErrorsMessage() ? 'c-select--error border-alert-base ring-2 ring-alert-base' : null] | makeHtmlList\"\r\n    [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n    [attr.id]=\"id ? id : null\"\r\n    [attr.name]=\"name ? name : null\"\r\n    [attr.role]=\"role ? role : null\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n    [attr.aria-invalid]=\"hasErrorsMessage() ? true : 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    [disabled]=disabled>\r\n\r\n    <ng-container *ngFor=\"let item of getItems()\">\r\n      <optgroup *ngIf=\"isOptionGroup(item)\" [label]=\"item.label\" [attr.disabled]=\"item.disabled ? true : null\"\r\n                [attr.role]=\"item?.role\"\r\n                [attr.aria-label]=\"item?.ariaLabel\"\r\n                [attr.aria-describedby]=\"item?.describedBy\"\r\n                [attr.aria-labelledby]=\"item?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item?.ariaHidden\"\r\n                [attr.aria-disabled]=\"item?.ariaDisabled\"\r\n                [attr.aria-controls]=\"item?.ariaControls\"\r\n                [attr.aria-current]=\"item?.ariaCurrent\"\r\n                [attr.aria-live]=\"item?.ariaLive\"\r\n                [attr.aria-expanded]=\"item?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"item?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"item?.ariaHasPopup\"\r\n                [attr.tabindex]=\"item?.tabindex\">>\r\n        <option *ngFor=\"let subItem of item.items\"\r\n                [value]=\"subItem.value\"\r\n                [disabled]=\"subItem.disabled\"\r\n                [selected]=\"isItemSelected(subItem)\"\r\n                [attr.hidden]=\"subItem.hidden\"\r\n                [attr.role]=\"subItem?.role\"\r\n                [attr.aria-label]=\"subItem?.ariaLabel\"\r\n                [attr.aria-describedby]=\"subItem?.describedBy\"\r\n                [attr.aria-labelledby]=\"subItem?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"subItem?.ariaHidden\"\r\n                [attr.aria-disabled]=\"subItem?.ariaDisabled\"\r\n                [attr.aria-controls]=\"subItem?.ariaControls\"\r\n                [attr.aria-current]=\"subItem?.ariaCurrent\"\r\n                [attr.aria-live]=\"subItem?.ariaLive\"\r\n                [attr.aria-expanded]=\"subItem?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"subItem?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"subItem?.ariaHasPopup\"\r\n                [attr.tabindex]=\"subItem?.tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: subItem, text: subItem.text }\"></ng-container>\r\n        </option>\r\n      </optgroup>\r\n      <option *ngIf=\"!isOptionGroup(item)\"  [value]=\"item.value\" [disabled]=\"item.disabled ? true : null\" [selected]=\"isItemSelected(item)\"\r\n              [attr.hidden]=\"item.hidden\"\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.describedBy ? item.describedBy : ariaDescribedBy\"\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-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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n      </option>\r\n    </ng-container>\r\n  </select>\r\n\r\n",
+                template: "\r\n     <ng-container *ngIf=\"labelComponent\">\r\n      <ng-content select=\"desy-label\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData && !labelComponent\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              [classes]=\"labelData.classes\"\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 && !labelComponent\" [text]=\"labelText\" [for]=\"id\"></desy-label>\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <ng-container *ngIf=\"hintComponent\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData && !hintComponent\"\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 && !hintComponent\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData && !errorMessageComponent\"\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 && !errorMessageComponent && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  <select\r\n    [class]=\"['c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\r\n              classes,\r\n              hasErrorsMessage() ? 'c-select--error border-alert-base ring-2 ring-alert-base' : null] | makeHtmlList\"\r\n    [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n    [attr.id]=\"id ? id : null\"\r\n    [attr.name]=\"name ? name : null\"\r\n    [attr.role]=\"role ? role : null\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n    [attr.aria-invalid]=\"hasErrorsMessage() ? true : 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    [disabled]=\"disabled\">\r\n\r\n    <ng-container *ngFor=\"let item of getItems()\">\r\n      <optgroup *ngIf=\"isOptionGroup(item)\" [label]=\"item.label\" [attr.disabled]=\"item.disabled ? true : null\"\r\n                [attr.role]=\"item?.role\"\r\n                [attr.aria-label]=\"item?.ariaLabel\"\r\n                [attr.aria-describedby]=\"item?.describedBy\"\r\n                [attr.aria-labelledby]=\"item?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item?.ariaHidden\"\r\n                [attr.aria-disabled]=\"item?.ariaDisabled\"\r\n                [attr.aria-controls]=\"item?.ariaControls\"\r\n                [attr.aria-current]=\"item?.ariaCurrent\"\r\n                [attr.aria-live]=\"item?.ariaLive\"\r\n                [attr.aria-expanded]=\"item?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"item?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"item?.ariaHasPopup\"\r\n                [attr.tabindex]=\"item?.tabindex\">>\r\n        <option *ngFor=\"let subItem of item.items\"\r\n                [value]=\"subItem.value\"\r\n                [disabled]=\"subItem.disabled\"\r\n                [selected]=\"isItemSelected(subItem)\"\r\n                [attr.hidden]=\"subItem.hidden\"\r\n                [attr.role]=\"subItem?.role\"\r\n                [attr.aria-label]=\"subItem?.ariaLabel\"\r\n                [attr.aria-describedby]=\"subItem?.describedBy\"\r\n                [attr.aria-labelledby]=\"subItem?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"subItem?.ariaHidden\"\r\n                [attr.aria-disabled]=\"subItem?.ariaDisabled\"\r\n                [attr.aria-controls]=\"subItem?.ariaControls\"\r\n                [attr.aria-current]=\"subItem?.ariaCurrent\"\r\n                [attr.aria-live]=\"subItem?.ariaLive\"\r\n                [attr.aria-expanded]=\"subItem?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"subItem?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"subItem?.ariaHasPopup\"\r\n                [attr.tabindex]=\"subItem?.tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: subItem, text: subItem.text }\"></ng-container>\r\n        </option>\r\n      </optgroup>\r\n      <option *ngIf=\"!isOptionGroup(item)\"  [value]=\"item.value\" [disabled]=\"item.disabled ? true : null\" [selected]=\"isItemSelected(item)\"\r\n              [attr.hidden]=\"item.hidden\"\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.describedBy ? item.describedBy : ariaDescribedBy\"\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-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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n      </option>\r\n    </ng-container>\r\n  </select>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1425,6 +1435,7 @@ SelectComponent.propDecorators = {
 class FileUploadComponent extends FormFieldComponent {
     constructor() {
         super();
+        this.cfg = true;
     }
     /***
      * nos devuelve un array de file : File[]
@@ -1441,11 +1452,14 @@ class FileUploadComponent extends FormFieldComponent {
         this.onTouch();
         this.onChange(this.value);
     }
+    ngOnChanges(changes) {
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
+    }
 }
 FileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-file-upload',
-                template: "<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\" [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\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]=\"labelData.classes\"\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\" [for]=\"id\"></desy-label>\r\n\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\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\r\n  <input [class]=\"['mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus', classes] | makeHtmlList\" type=\"file\"\r\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\r\n         (input)=\"onInput($event.target.files)\"\r\n\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.accept]=\"accept ? accept : 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</div>\r\n",
+                template: "\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]=\"labelData.classes\"\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\" [for]=\"id\"></desy-label>\r\n\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\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\r\n  <input [class]=\"['mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base', classes] | makeHtmlList\" type=\"file\"\r\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\r\n         (input)=\"onInput($event.target.files)\"\r\n\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.accept]=\"accept ? accept : 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\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1459,9 +1473,11 @@ FileUploadComponent.ctorParameters = () => [];
 FileUploadComponent.propDecorators = {
     name: [{ type: Input }],
     describedBy: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
     classes: [{ type: Input }],
-    accept: [{ type: Input }]
+    accept: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }]
 };
 class InputGroupItemComponent {
@@ -1536,6 +1552,7 @@ InputGroupInputComponent.propDecorators = {
     placeholder: [{ type: Input }],
     pattern: [{ type: Input }],
     maxlength: [{ type: Input }],
+    disabled: [{ type: Input }],
     labelRef: [{ type: ViewChild, args: ['label', { static: true },] }],
     labelComponent: [{ type: ContentChildren, args: [LabelComponent,] }]
 };
@@ -1563,6 +1580,7 @@ InputGroupSelectComponent.propDecorators = {
     value: [{ type: Input }],
     valueChange: [{ type: Output }],
     formGroupClasses: [{ type: Input }],
+    disabled: [{ type: Input }],
     labelRef: [{ type: ViewChild, args: ['label', { static: true },] }],
     selectItemComponentList: [{ type: ContentChildren, args: [OptionComponent,] }],
     labelComponent: [{ type: ContentChildren, args: [LabelComponent,] }]
@@ -1708,7 +1726,7 @@ class InputGroupComponent extends FormFieldComponent {
 InputGroupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-input-group',
-                template: "\r\n<!-- Divider no forma parte del formulario, por lo que es reutilizable en cualquier caso -->\r\n<ng-template #itemDivider let-item=\"item\">\r\n  <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n    <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtml>\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\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\r\n  <!-- Reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [formControlName]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\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\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [formControlName]=\"getItemName(item)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [ngClass]=\"classes ? classes : 'flex'\"\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      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n        <ng-template #itemSelect>\r\n          <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                       [labelRef]=\"getItemLabelRef(item)\"\r\n                       [labelData]=\"getItemLabelData(item)\"\r\n                       [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                       [formGroupClasses]=\"item.formGroupClasses\"\r\n                       [name]=\"getItemName(item)\"\r\n                       [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                       [items]=\"getItemSelectOptions(item)\"\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\"></desy-select>\r\n        </ng-template>\r\n        <ng-template #itemInput>\r\n          <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [labelData]=\"getItemLabelData(item)\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [formGroupClasses]=\"item.formGroupClasses\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                      [type]=\"item.type ? item.type : 'text'\"\r\n                      [inputmode]=\"item.inputmode\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern\"\r\n                      [placeholder]=\"item.placeholder\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n                     [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\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\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n\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=\"group\"\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 && hasLegendComponent()\"\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 && !hasLegendComponent() && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !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\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n\r\n    <ng-container *ngIf=\"!hasFieldset()\">\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n",
+                template: "\r\n<!-- Divider no forma parte del formulario, por lo que es reutilizable en cualquier caso -->\r\n<ng-template #itemDivider let-item=\"item\">\r\n  <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n    <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtml>\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\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\r\n  <!-- Reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [formControlName]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n                     [disabled]=\"item.disabled\"\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\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [formControlName]=\"getItemName(item)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n                    [disabled]=\"item.disabled\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [ngClass]=\"classes ? classes : 'flex'\"\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      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n        <ng-template #itemSelect>\r\n          <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                       [labelRef]=\"getItemLabelRef(item)\"\r\n                       [labelData]=\"getItemLabelData(item)\"\r\n                       [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                       [formGroupClasses]=\"item.formGroupClasses\"\r\n                       [name]=\"getItemName(item)\"\r\n                       [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                       [items]=\"getItemSelectOptions(item)\"\r\n                       [disabled]=\"item.disabled\"\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\"></desy-select>\r\n        </ng-template>\r\n        <ng-template #itemInput>\r\n          <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [labelData]=\"getItemLabelData(item)\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [formGroupClasses]=\"item.formGroupClasses\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                      [type]=\"item.type ? item.type : 'text'\"\r\n                      [inputmode]=\"item.inputmode\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern\"\r\n                      [placeholder]=\"item.placeholder\"\r\n                      [disabled]=\"item.disabled\"\r\n                      \r\n                      [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n                     [disabled]=\"item.disabled\"\r\n                     [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\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\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n                    [disabled]=\"item.disabled\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n\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=\"group\"\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 && hasLegendComponent()\"\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 && !hasLegendComponent() && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !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\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n\r\n    <ng-container *ngIf=\"!hasFieldset()\">\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1850,7 +1868,7 @@ class RadioItemComponent extends ContentBaseComponent {
 RadioItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-radio-item',
-                template: "<div [ngClass]=\"{'border-t border-b border-neutral-base -mb-px': hasDividers()}\" [class]=\"classes\">\r\n  <div *ngIf=\"divider\"><p>{{ divider }}</p></div>\r\n  <div *ngIf=\"!divider\">\r\n    <div class=\"relative flex items-start py-base\">\r\n      <div class=\"flex items-center mx-sm\">\r\n        <input #input class=\"w-6 h-6 text-primary-base 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               [attr.id]=\"radioId\"\r\n               [attr.name]=\"name ? name : getNameRadio()\"\r\n               type=\"radio\"\r\n               [value]=\"value\" (change)=\"hasChanged()\"\r\n               [checked]=\"checked\"\r\n               [attr.disabled]=\"disabled ? true : null\"\r\n               [attr.aria-controls]=\"conditionalContentList && conditionalContentList.length > 0 ? 'conditional-' + this.radioId : null\"\r\n               [attr.aria-describedby]=\"[getDescribedBy(), getItemHintId()] | makeHtmlList:null\"\r\n               [attr.aria-invalid]=\"hasError ? true : null\"\r\n\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-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>\r\n\r\n        <div class=\"pt-0.5 leading-5\">\r\n            <ng-container *ngIf=\"labelComponentList && labelComponentList.length > 0\">\r\n                <ng-content select=\"desy-label\"></ng-content>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!(labelComponentList && labelComponentList.length > 0)\">\r\n                <desy-label [for]=\"radioId\">\r\n                    <ng-content></ng-content>\r\n                </desy-label>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"desy-hint\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"conditional && conditionalContentList && conditionalContentList.length > 0 && checked\"  @displayConditional\r\n      class=\"mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base\"\r\n      [attr.id]=\"'conditional-' + this.radioId\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: conditionalContentList.first }\"></ng-container>\r\n  </div>\r\n</div>\r\n",
+                template: "<div [ngClass]=\"{'border-t border-b border-neutral-base -mb-px': hasDividers()}\" [class]=\"classes\">\r\n  <div *ngIf=\"divider\"><p>{{ divider }}</p></div>\r\n  <div *ngIf=\"!divider\">\r\n    <div class=\"relative flex items-start py-base\">\r\n      <div class=\"flex items-center mx-sm\">\r\n        <input #input class=\"w-6 h-6 text-primary-base 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                [attr.id]=\"radioId\"\r\n                [attr.name]=\"name ? name : getNameRadio()\"\r\n                type=\"radio\"\r\n                [value]=\"value\" (change)=\"hasChanged()\"\r\n                [checked]=\"checked\"\r\n                [attr.disabled]=\"disabled ? true : null\"\r\n                [attr.aria-controls]=\"conditionalContentList && conditionalContentList.length > 0 ? 'conditional-' + this.radioId : null\"\r\n                [attr.aria-describedby]=\"[getDescribedBy(), getItemHintId()] | makeHtmlList:null\"\r\n                [attr.aria-invalid]=\"hasError ? true : null\"\r\n  \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-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>\r\n  \r\n        <div class=\"pt-0.5 leading-5\">\r\n            <ng-container *ngIf=\"labelComponentList && labelComponentList.length > 0\">\r\n                <ng-content select=\"desy-label\"></ng-content>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!(labelComponentList && labelComponentList.length > 0)\">\r\n                <desy-label [for]=\"radioId\">\r\n                    <ng-content></ng-content>\r\n                </desy-label>\r\n            </ng-container>\r\n  \r\n            <ng-content select=\"desy-hint\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"conditional && conditionalContentList && conditionalContentList.length > 0 && checked\"  @displayConditional\r\n      class=\"mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base\"\r\n      [attr.id]=\"'conditional-' + this.radioId\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: conditionalContentList.first }\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n",
                 animations: [
                     trigger('displayConditional', [
                         state('void', style({
@@ -1882,8 +1900,8 @@ RadioItemComponent.propDecorators = {
     value: [{ type: Input }],
     conditional: [{ type: Input }],
     disabled: [{ type: Input }],
-    classes: [{ type: Input }],
     divider: [{ type: Input }],
+    classes: [{ type: Input }],
     labelComponentList: [{ type: ContentChildren, args: [LabelComponent,] }],
     hintComponentList: [{ type: ContentChildren, args: [HintComponent,] }],
     conditionalContentList: [{ type: ContentChildren, args: [ContentComponent,] }],
@@ -2071,7 +2089,7 @@ class RadiosComponent extends FormFieldComponent {
 RadiosComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-radios',
-                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 && hasLegendComponent()\"\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 && !hasLegendComponent() && 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 && !hasLegendComponent() && !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 && !hasLegendComponent() && !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<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\r\n  <div class=\"c-radios\" [ngClass]=\"classes\"\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      <ng-container *ngIf=\"radioComponentItems && radioComponentItems.length > 0\">\r\n        <ng-content select=\"desy-radio-item\"></ng-content>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!(radioComponentItems && radioComponentItems.length > 0) && items\">\r\n        <desy-radio-item *ngFor=\"let item of items; index as i\"\r\n                         [id]=\"item.id\"\r\n                         [disabled]=\"item.disabled\"\r\n                         [classes]=\"item.classes\"\r\n                         [value]=\"item.value\"\r\n                         [(checked)]=\"item.checked\"\r\n                         [conditional]=\"item.conditional\"\r\n                         [divider]=\"item.divider\"\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-radio-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 && hasLegendComponent()\"\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 && !hasLegendComponent() && 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 && !hasLegendComponent() && !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 && !hasLegendComponent() && !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<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\r\n  <div class=\"['c-radios', 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\r\n      <ng-container *ngIf=\"radioComponentItems && radioComponentItems.length > 0\">\r\n        <ng-content select=\"desy-radio-item\"></ng-content>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!(radioComponentItems && radioComponentItems.length > 0) && items\">\r\n        <desy-radio-item *ngFor=\"let item of items; index as i\"\r\n                         [id]=\"item.id\"\r\n                         [disabled]=\"item.disabled\"\r\n                         [classes]=\"item.classes\"\r\n                         [value]=\"item.value\"\r\n                         [(checked)]=\"item.checked\"\r\n                         [conditional]=\"item.conditional\"\r\n                         [divider]=\"item.divider\"\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-radio-item>\r\n      </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -2132,6 +2150,7 @@ class CheckboxItemComponent extends AccessibilityComponent {
         this.checkboxes.markForUpdateCheckboxIds();
     }
     ngOnChanges(changes) {
+        this.classes = this.checkboxes.hasDividers ? this.classes += ' border-t border-b border-neutral-base -mb-px' : this.classes;
         if (this.checked !== this.lastChecked && this.isInit()) {
             this.setChecked(this.checked);
             this.checkboxes.updateValueFromCheckboxItems();
@@ -2246,7 +2265,7 @@ class CheckboxItemComponent extends AccessibilityComponent {
 CheckboxItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-checkbox-item',
-                template: "<div [ngClass]=\"{'border-t border-b border-neutral-base -mb-px' : hasDividers()}\" [class]=\"classes\">\r\n  <div class=\"relative flex items-start py-base\">\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               [checked]=\"checked\"\r\n               [attr.id]=\"checkboxId\"\r\n               [attr.name]=\"name ? name : getNameCheckbox()\"\r\n               type=\"checkbox\"\r\n               [value]=\"value\" (change)=\"hasChanged()\"\r\n               [attr.disabled]=\"disabled ? true : null\"\r\n               [attr.aria-controls]=\"conditionalContentList && conditionalContentList.length > 0 ? 'conditional-' + checkboxId : null\"\r\n               [attr.aria-describedby]=\"[getDescribedBy(), getItemHintId()] | makeHtmlList:null\"\r\n               [attr.aria-invalid]=\"hasError() ? true : null\"\r\n\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-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>\r\n      <div class=\"pt-0.5 leading-5\">\r\n        <ng-container *ngIf=\"labelComponentList && labelComponentList.length > 0\">\r\n          <ng-content select=\"desy-label\"></ng-content>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!(labelComponentList && labelComponentList.length > 0)\">\r\n          <desy-label [for]=\"checkboxId\">\r\n            <ng-content></ng-content>\r\n          </desy-label>\r\n        </ng-container>\r\n        <ng-content select=\"desy-hint\"></ng-content>\r\n      </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"conditional && conditionalContentList && conditionalContentList.length > 0 && (input.checked || input.indeterminate)\" @displayConditional\r\n       class=\"mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base\"\r\n       [attr.id]=\"'conditional-' + checkboxId\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: conditionalContentList.first }\"></ng-container>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"relative flex items-start py-base\">\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              [checked]=\"checked\"\r\n              [attr.id]=\"checkboxId\"\r\n              [attr.name]=\"name ? name : getNameCheckbox()\"\r\n              type=\"checkbox\"\r\n              [value]=\"value\" (change)=\"hasChanged()\"\r\n              [attr.disabled]=\"disabled ? true : null\"\r\n              [attr.aria-controls]=\"conditionalContentList && conditionalContentList.length > 0 ? 'conditional-' + checkboxId : null\"\r\n              [attr.aria-describedby]=\"[getDescribedBy(), getItemHintId()] | makeHtmlList:null\"\r\n              [attr.aria-invalid]=\"hasError() ? true : null\"\r\n\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-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>\r\n    <div class=\"pt-0.5 leading-5\">\r\n      <ng-container *ngIf=\"labelComponentList && labelComponentList.length > 0\">\r\n        <ng-content select=\"desy-label\"></ng-content>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!(labelComponentList && labelComponentList.length > 0)\">\r\n        <desy-label [for]=\"checkboxId\">\r\n          <ng-content></ng-content>\r\n        </desy-label>\r\n      </ng-container>\r\n      <ng-content select=\"desy-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"conditional && conditionalContentList && conditionalContentList.length > 0 && (input.checked || input.indeterminate)\" @displayConditional\r\n      class=\"mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base\"\r\n      [attr.id]=\"'conditional-' + checkboxId\">\r\n  <ng-container *desyCustomInnerContent=\"{ component: conditionalContentList.first }\"></ng-container>\r\n</div>\r\n",
                 animations: [
                     trigger('displayConditional', [
                         state('void', style({
@@ -2280,7 +2299,7 @@ CheckboxItemComponent.propDecorators = {
     disabled: [{ type: Input }],
     isIndeterminate: [{ type: Input }],
     indeterminateChecked: [{ type: Input }],
-    classes: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     labelComponentList: [{ type: ContentChildren, args: [LabelComponent,] }],
     hintComponentList: [{ type: ContentChildren, args: [HintComponent,] }],
     conditionalContentList: [{ type: ContentChildren, args: [ContentComponent,] }],
@@ -2465,7 +2484,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                          [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",
+                template: "<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()\">\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<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,
@@ -2639,8 +2658,13 @@ class DateInputComponent extends FormFieldComponent {
         super();
         this.controlContainer = controlContainer;
         this.itemsChange = new EventEmitter();
+        //  form group class - asignar clases a la etiqueta desy-input
+        this.cfg = true;
         this.contentInit = false;
     }
+    ngOnChanges(changes) {
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
+    }
     ngAfterContentInit() {
         this.contentInit = true;
     }
@@ -2790,7 +2814,7 @@ DateInputComponent.defaultItems = [
 DateInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-date-input',
-                template: "\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\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  <!-- With reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [class]=\"['flex', 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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n          <desy-input [labelData]=\"getItemLabel(item)\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [formControlName]=\"getItemName(item)\"\r\n                      [type]=\"'text'\"\r\n                      [inputmode]=\"'numeric'\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [class]=\"['flex', 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      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        \r\n        <ng-container *ngIf=\"item.divider\">\r\n          <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.divider\">\r\n          <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [class]=\"['flex', 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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      \r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n</div>\r\n</ng-template>\r\n\r\n<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      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"\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 && hasLegendComponent()\"\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 && !hasLegendComponent() && legendRef\"\r\n      [legendRef]=\"legendRef\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !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\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n      [legendText]=\"legendText\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></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",
+                template: "<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\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  <!-- With reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [class]=\"['flex', 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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n          <desy-input [labelData]=\"getItemLabel(item)\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [formControlName]=\"getItemName(item)\"\r\n                      [type]=\"'text'\"\r\n                      [inputmode]=\"'numeric'\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [class]=\"['flex', 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      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        \r\n        <ng-container *ngIf=\"item.divider\">\r\n          <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.divider\">\r\n          <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [class]=\"['flex', 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    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      \r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\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\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n</div>\r\n</ng-template>\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    [caller]=\"innerHtml\"\r\n    [errorId]=\"getErrorId()\"\r\n    [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    role=\"group\"\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 && hasLegendComponent()\"\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 && !hasLegendComponent() && legendRef\"\r\n    [legendRef]=\"legendRef\"\r\n    [caller]=\"innerHtml\"\r\n    [errorId]=\"getErrorId()\"\r\n    [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    role=\"group\"></desy-fieldset>\r\n  <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !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\"\r\n    role=\"group\"></desy-fieldset>\r\n  <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n    [legendText]=\"legendText\"\r\n    [caller]=\"innerHtml\"\r\n    [errorId]=\"getErrorId()\"\r\n    [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    role=\"group\"></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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -2809,9 +2833,11 @@ DateInputComponent.propDecorators = {
     itemsChange: [{ type: Output }],
     namePrefix: [{ type: Input }],
     classes: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
     errorMessage: [{ type: Input }],
     id: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     fieldsetComponent: [{ type: ContentChildren, args: [FieldsetComponent,] }],
     legendComponent: [{ type: ContentChildren, args: [LegendComponent,] }],
     dateInputItemComponents: [{ type: ContentChildren, args: [DateInputItemComponent,] }],
@@ -2848,11 +2874,14 @@ class SearchBarComponent extends FormFieldComponent {
     hasButton() {
         return this.button && this.button.length > 0;
     }
+    ngDoCheck() {
+        this.hasButtonClass = this.hasButton() ? 'relative flex flex-wrap items-end' : 'relative';
+    }
 }
 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",
+                template: "<!-- searchbar -->\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', labelData.classes] | makeHtmlList\"\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 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<!-- /searchbar -->\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -2865,6 +2894,7 @@ SearchBarComponent.decorators = [
 SearchBarComponent.propDecorators = {
     button: [{ type: ContentChildren, args: [ButtonComponent,] }],
     describedBy: [{ type: Input }],
+    hasButtonClass: [{ type: HostBinding, args: ['class',] }],
     classes: [{ type: Input }],
     buttonClasses: [{ type: Input }],
     placeholder: [{ type: Input }],
@@ -3420,7 +3450,7 @@ TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siemp
 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    }\"\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]=\"isActive() && 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       [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 : (isActive() ? '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    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\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  <!--\r\n    El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\r\n    Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\r\n    Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\r\n    que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\r\n    ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\r\n  -->\r\n  <desy-tree-checkbox *ngIf=\"name || parentName\"\r\n                      [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  <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n    <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n  </div>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                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    }\"\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]=\"isActive() && subLevel === 0 ? 'page' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\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 : (isActive() ? '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    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\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         [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  <!--\r\n    El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\r\n    Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\r\n    Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\r\n    que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\r\n    ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\r\n  -->\r\n  <desy-tree-checkbox *ngIf=\"name || parentName\"\r\n                      [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  <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n    <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n  </div>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
                 providers: [
                     {
                         provide: ITreeItem,
@@ -3825,7 +3855,7 @@ class TreeComponent extends FormFieldComponent {
 TreeComponent.decorators = [
     { type: Component, args: [{
                 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",
+                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>",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -3841,10 +3871,10 @@ TreeComponent.ctorParameters = () => [
 TreeComponent.propDecorators = {
     idPrefix: [{ type: Input }],
     classes: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
     name: [{ type: Input }],
     type: [{ type: Input }],
     describedBy: [{ type: Input }],
+    formGroupClasses: [{ type: Input }],
     expandedFirstLevel: [{ type: Input }],
     decoupleChildFromParent: [{ type: Input }],
     disableDefaultSearch: [{ type: Input }],
@@ -3923,7 +3953,7 @@ TreeItemsGeneratorComponent.propDecorators = {
     itemTemplate: [{ type: Input }]
 };
-class ModalButtonPrimaryComponent extends ContentBaseComponent {
+class ModalButtonPrimaryComponent extends ButtonComponent {
     constructor() {
         super(...arguments);
         this.clickEvent = new EventEmitter();
@@ -3940,7 +3970,7 @@ ModalButtonPrimaryComponent.propDecorators = {
     clickEvent: [{ type: Output }]
 };
-class ModalButtonSecondaryComponent extends ContentBaseComponent {
+class ModalButtonSecondaryComponent extends ButtonComponent {
     constructor() {
         super(...arguments);
         this.clickEvent = new EventEmitter();
@@ -3957,6 +3987,41 @@ ModalButtonSecondaryComponent.propDecorators = {
     clickEvent: [{ type: Output }]
 };
+class ModalButtonLoaderPrimaryComponent extends ButtonLoaderComponent {
+    constructor() {
+        super(...arguments);
+        this.clickEvent = new EventEmitter();
+    }
+}
+ModalButtonLoaderPrimaryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-modal-button-loader-primary',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+ModalButtonLoaderPrimaryComponent.propDecorators = {
+    classes: [{ type: Input }],
+    state: [{ type: Input }],
+    clickEvent: [{ type: Output }]
+};
+class ModalButtonLoaderSecondaryComponent extends ButtonLoaderComponent {
+    constructor() {
+        super(...arguments);
+        this.clickEvent = new EventEmitter();
+    }
+}
+ModalButtonLoaderSecondaryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-modal-button-loader-secondary',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+ModalButtonLoaderSecondaryComponent.propDecorators = {
+    classes: [{ type: Input }],
+    clickEvent: [{ type: Output }]
+};
 class ModalComponent extends AccessibilityComponent {
     constructor(changeDetectorRef) {
         super();
@@ -4001,7 +4066,7 @@ class ModalComponent extends AccessibilityComponent {
     }
     clickButtonEmit(item, event) {
         this.clickButton.emit(event);
-        if (item instanceof ModalButtonPrimaryComponent || item instanceof ModalButtonSecondaryComponent) {
+        if (item instanceof ModalButtonPrimaryComponent || item instanceof ModalButtonSecondaryComponent || item instanceof ModalButtonLoaderPrimaryComponent || item instanceof ModalButtonLoaderSecondaryComponent) {
             item.clickEvent.emit(event);
         }
     }
@@ -4037,11 +4102,17 @@ class ModalComponent extends AccessibilityComponent {
         return this.secondaryButtonComponents && this.secondaryButtonComponents.length > 0 ? this.secondaryButtonComponents.toArray()
             : this.itemsSecondary;
     }
+    getPrimaryLoaderItems() {
+        return this.primaryButtonLoaderComponents && this.primaryButtonLoaderComponents.length > 0 ? this.primaryButtonLoaderComponents.toArray() : this.itemsLoaderPrimary;
+    }
+    getSecondaryLoaderItems() {
+        return this.secondaryButtonLoaderComponents && this.secondaryButtonLoaderComponents.length > 0 ? this.secondaryButtonLoaderComponents.toArray() : this.itemsLoaderSecondary;
+    }
 }
 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    <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'\" 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'\" 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'\" 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'\" 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'\" 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      <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      <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      <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      <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      <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"
+                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    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n      <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n        <svg *ngSwitchCase=\"'discard'\" 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'\" 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'\" 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'\" 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'\" 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  </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      <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      <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      <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      <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      <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\" *ngIf=\"itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0) || itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)\"\r\n  [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)\"\r\n           [disabled]=\"items[0].disabled\"\r\n           [classes]=\"items[0].classes\"\r\n           [id]=\"items[0].id\"\r\n           [text]=\"items[0].text\"\r\n           [html]=\"items[0].html\"\r\n           [element]=\"items[0].element\"\r\n           [name]=\"items[0].name\"\r\n           [type]=\"items[0].type\"\r\n           [value]=\"items[0].value\"\r\n           [href]=\"items[0].href\"\r\n           [target]=\"items[0].target\"\r\n           [preventDoubleClick]=\"items[0].preventDoubleClick\"\r\n           [routerLink]=\"items[0].routerLink\"\r\n           [routerLinkActiveClasses]=\"items[0].routerLinkActiveClasses\">\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)\"\r\n                [disabled]=\"item.disabled\"\r\n                [classes]=\"item.classes\"\r\n                [id]=\"item.id\"\r\n                [text]=\"item.text\"\r\n                [html]=\"item.html\"\r\n                [element]=\"item.element\"\r\n                [name]=\"item.name\"\r\n                [type]=\"item.type\"\r\n                [value]=\"item.value\"\r\n                [href]=\"item.href\"\r\n                [target]=\"item.target\"\r\n                [preventDoubleClick]=\"item.preventDoubleClick\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [routerLinkActiveClasses]=\"item.routerLinkActiveClasses\">\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  <!-- Button loader -->\r\n  <div class=\"flex flex-wrap gap-sm w-full\" *ngIf=\"(primaryButtonLoaderComponents && primaryButtonLoaderComponents.length > 0) || (secondaryButtonLoaderComponents && secondaryButtonLoaderComponents.length > 0)\" \r\n  [ngClass]=\"((primaryButtonLoaderComponents && primaryButtonLoaderComponents.length > 0)) && ((secondaryButtonLoaderComponents && secondaryButtonLoaderComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttonsLoader let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button-loader (clickEvent)=\"clickButtonEmit(items[0], $event)\"\r\n              [loaderText]=\"items[0].loaderText\"\r\n              [loaderClasses]=\"items[0].loaderClasses\"\r\n              [state]=\"items[0].state\"\r\n              [successText]=\"items[0].successText\"\r\n              [disabled]=\"items[0].disabled\"\r\n              [classes]=\"(items[0].state == null || items[0].state == 'is-success') ? items[0].classes : items[0].classes + ' c-button-loader--is-loading'\"\r\n              [id]=\"items[0].id\"\r\n              [text]=\"items[0].text\"\r\n              [html]=\"items[0].html\"\r\n              [element]=\"items[0].element\"\r\n              [name]=\"items[0].name\"\r\n              [type]=\"items[0].type\"\r\n              [value]=\"items[0].value\"\r\n              [href]=\"items[0].href\"\r\n              [target]=\"items[0].target\"\r\n              [preventDoubleClick]=\"items[0].preventDoubleClick\"\r\n              [routerLink]=\"items[0].routerLink\"\r\n              [routerLinkActiveClasses]=\"items[0].routerLinkActiveClasses\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button-loader>\r\n        </div>\r\n\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-loader (clickEvent)=\"clickButtonEmit(item, $event)\"\r\n                  [loaderText]=\"item.loaderText\"\r\n                  [loaderClasses]=\"item.loaderClasses\"\r\n                  [state]=\"item.state\"\r\n                  [successText]=\"item.successText\"\r\n                  [disabled]=\"item.disabled\"\r\n                  [classes]=\"(item.state == null || item.state == 'is-success') ? item.classes : item.classes + ' c-button-loader--is-loading'\"\r\n                  [id]=\"item.id\"\r\n                  [text]=\"item.text\"\r\n                  [html]=\"item.html\"\r\n                  [element]=\"item.element\"\r\n                  [name]=\"item.name\"\r\n                  [type]=\"item.type\"\r\n                  [value]=\"item.value\"\r\n                  [href]=\"item.href\"\r\n                  [target]=\"item.target\"\r\n                  [preventDoubleClick]=\"item.preventDoubleClick\"\r\n                  [routerLink]=\"item.routerLink\"\r\n                  [routerLinkActiveClasses]=\"item.routerLinkActiveClasses\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button-loader>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttonsLoader; context: { items: getPrimaryLoaderItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttonsLoader; context: { items: getSecondaryLoaderItems() }\"></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 = () => [
@@ -4052,6 +4123,8 @@ ModalComponent.propDecorators = {
     description: [{ type: Input }],
     itemsPrimary: [{ type: Input }],
     itemsSecondary: [{ type: Input }],
+    itemsLoaderPrimary: [{ type: Input }],
+    itemsLoaderSecondary: [{ type: Input }],
     icon: [{ type: Input }],
     headingLevel: [{ type: Input }],
     isDismissible: [{ type: Input }],
@@ -4065,6 +4138,8 @@ ModalComponent.propDecorators = {
     contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }],
     primaryButtonComponents: [{ type: ContentChildren, args: [ModalButtonPrimaryComponent,] }],
     secondaryButtonComponents: [{ type: ContentChildren, args: [ModalButtonSecondaryComponent,] }],
+    primaryButtonLoaderComponents: [{ type: ContentChildren, args: [ModalButtonLoaderPrimaryComponent,] }],
+    secondaryButtonLoaderComponents: [{ type: ContentChildren, args: [ModalButtonLoaderSecondaryComponent,] }],
     iconComponent: [{ type: ContentChildren, args: [IconComponent,] }]
 };
 __decorate([
@@ -4176,7 +4251,7 @@ DialogComponent.KEY_CODE_ESC = 'Escape';
 DialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-dialog',
-                template: "<div class=\"dialog-backdrop\" [ngClass]=\"{'active': 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  <div #focusTrapWrapper [id]=\"id\" [class]=\"classes\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"handleClickOutside()\" [desyClickOutsideElem]=\"childElem\">\r\n    <ng-template #container></ng-template>\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
+                template: "<div class=\"dialog-backdrop\" [ngClass]=\"{'active': 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\r\n    <div #focusTrapWrapper [id]=\"id\" [class]=\"classes\"\r\n        [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"handleClickOutside()\" [desyClickOutsideElem]=\"childElem\">\r\n      <ng-template #container></ng-template>\r\n      <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n    </div>\r\n</div>"
             },] }
 ];
 DialogComponent.ctorParameters = () => [
@@ -4191,9 +4266,9 @@ DialogComponent.propDecorators = {
     activeChange: [{ type: Output }],
     id: [{ type: Input }],
     caller: [{ type: Input }],
-    classes: [{ type: Input }],
     focusOnClose: [{ type: Input }],
     dismissOnBackdrop: [{ type: Input }],
+    classes: [{ type: Input }],
     onKeyUp: [{ type: HostListener, args: ['document:keyup', ['$event'],] }]
 };
@@ -4385,7 +4460,7 @@ class HeaderOffcanvasButtonComponent extends ContentBaseComponent {
 HeaderOffcanvasButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-offcanvas-button',
-                template: "<ng-template #contentTemplate>\r\n  <button id=\"header-offcanvas-button\" tabindex=\"0\" aria-haspopup=\"true\"\r\n          class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:shadow-outline-warning\"\r\n          (click)=\"handleClick($event)\">\r\n    <span id=\"header-offcanvas-button-text\" class=\"inline-block align-middle text-right\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg role=\"img\" aria-label=\"Cerrado\" class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" 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</ng-template>\r\n\r\n"
+                template: "<ng-template #contentTemplate>\r\n  <button id=\"header-offcanvas-button\" tabindex=\"0\" aria-haspopup=\"true\"\r\n          class=\"inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base\"\r\n          (click)=\"handleClick($event)\">\r\n    <span id=\"header-offcanvas-button-text\" class=\"inline-block align-middle text-right\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg role=\"img\" aria-label=\"Cerrado\" class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" 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</ng-template>\r\n\r\n"
             },] }
 ];
@@ -4502,7 +4577,7 @@ class HeaderNavigationComponent extends AccessibilityComponent {
 HeaderNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-navigation',
-                template: "<nav [class]=\"classes ? classes : 'hidden lg:block'\"\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=\"ml-sm flex flex-wrap items-baseline uppercase\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <li *ngIf=\"item\">\r\n\r\n        <!-- Active + routerlink -->\r\n        <a *ngIf=\"item.active && (item.routerLink || !item.href)\" [id]=\"getItemId(item, i)\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\" aria-current=\"page\">\r\n          <strong>\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </a>\r\n\r\n        <!-- Active + href -->\r\n        <a *ngIf=\"item.active && !item.routerLink && item.href\" [id]=\"getItemId(item, i)\" [href]=\"item.href\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\" aria-current=\"page\">\r\n          <strong>\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </a>\r\n\r\n        <!-- Not active + routerlink -->\r\n        <a *ngIf=\"!item.active && (item.routerLink || !item.href)\" [id]=\"getItemId(item, i)\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n           [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\" [attr.aria-disabled]=\"item.disabled ? item.disabled : null\" [attr.tabindex]=\"item.disabled ? -1 : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n        </a>\r\n\r\n        <!-- Not active + href -->\r\n        <a *ngIf=\"!item.active && !item.routerLink && item.href\" [id]=\"getItemId(item, i)\" [href]=\"item.href\"\r\n           [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\" [attr.aria-disabled]=\"item.disabled ? item.disabled : null\" [attr.tabindex]=\"item.disabled ? -1 : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n"
+                template: "<nav [class]=\"classes ? classes : 'hidden lg:block'\"\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=\"ml-sm flex flex-wrap items-baseline\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <li *ngIf=\"item\">\r\n\r\n        <!-- Active + routerlink -->\r\n        <a *ngIf=\"item.active && (item.routerLink || !item.href)\" [id]=\"getItemId(item, i)\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base\" \r\n           aria-current=\"page\"\r\n           [target]=\"item.target\">\r\n          <strong class=\"font-bold\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </a>\r\n\r\n        <!-- Active + href -->\r\n        <a *ngIf=\"item.active && !item.routerLink && item.href\" [id]=\"getItemId(item, i)\" [href]=\"item.href\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base\" \r\n           aria-current=\"page\"\r\n           [target]=\"item.target\">\r\n          <strong class=\"font-bold\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </a>\r\n\r\n        <!-- Not active + routerlink -->\r\n        <a *ngIf=\"!item.active && (item.routerLink || !item.href)\" [id]=\"getItemId(item, i)\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n           [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\" [attr.aria-disabled]=\"item.disabled ? item.disabled : null\" [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [target]=\"item.target\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n        </a>\r\n\r\n        <!-- Not active + href -->\r\n        <a *ngIf=\"!item.active && !item.routerLink && item.href\" [id]=\"getItemId(item, i)\" [href]=\"item.href\"\r\n           [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n           class=\"max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\" [attr.aria-disabled]=\"item.disabled ? item.disabled : null\" [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [target]=\"item.target\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n"
             },] }
 ];
 HeaderNavigationComponent.propDecorators = {
@@ -4657,7 +4732,7 @@ class HeaderSubnavComponent extends AccessibilityComponent {
 HeaderSubnavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-subnav',
-                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    <span 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"
+                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=\"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 px-3 py-4 border-r border-l border-neutral-base text-sm text-black\">\r\n    <span 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 = {
@@ -4745,7 +4820,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)\"\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"
+                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 text=\"Saltar al contenido principal\" [id]=\"'skip-link'\"></desy-skip-link>\r\n    </nav>\r\n    <div class=\"bg-neutral-lighter border-b border-neutral-base\">\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=\"flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg *ngIf=\"!noLogo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 144 32\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n. Ir a la p\u00E1gina de inicio\" role=\"img\"><defs><clipPath id=\"b-logo-expanded\"><path fill=\"gold\" d=\"M0 0h31.509v31.495H0z\"/></clipPath><clipPath id=\"a-logo-expanded\"><path d=\"M0 0h144v32H0z\"/></clipPath></defs><g clip-path=\"url(#a-logo-expanded)\"><path fill=\"gold\" d=\"M0 .205h31.509V31.7H0z\"/><g clip-path=\"url(#b-logo-expanded)\" transform=\"translate(0 .205)\"><g fill=\"#dd171b\" fill-rule=\"evenodd\"><path d=\"m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z\"/></g></g><path d=\"M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z\" fill=\"#161615\" fill-rule=\"evenodd\"/></g></svg>\r\n                <svg *ngIf=\"!noLogo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" [ngClass]=\"{'sm:hidden': expandedLogo}\" class=\"w-8 h-8 fill-current\" ><title>Ir a la p\u00E1gina de inicio</title><defs><clipPath id=\"b-logo-mini\"><path fill=\"gold\" d=\"M0 0h32v32.001H0z\"/></clipPath><clipPath id=\"a-logo-mini\"><path d=\"M0 0h32v32H0z\"/></clipPath></defs><g clip-path=\"url(#a-logo-mini)\"><path fill=\"gold\" d=\"M0 .305h32v32.001H0z\"/><g clip-path=\"url(#b-logo-mini)\" transform=\"translate(0 .305)\"><g fill=\"#dd171b\" fill-rule=\"evenodd\"><path d=\"m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z\"/></g></g></g></svg>\r\n                <img [src]=\"customLogoHtml ? noLogo && customLogoHtml : ''\">\r\n              </a>\r\n              <a *ngIf=\"!homepageRouterLink && homepageUrl\" [href]=\"homepageUrl | externalHref\" class=\"flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black\" title=\"Ir a la p\u00E1gina de inicio\">\r\n                <svg *ngIf=\"!noLogo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 144 32\" width=\"144\" height=\"32\" [ngClass]=\"{'sm:block': expandedLogo}\" class=\"fill-current hidden\" aria-label=\"Gobierno de Arag\u00F3n. Ir a la p\u00E1gina de inicio\" role=\"img\"><defs><clipPath id=\"b-logo-expanded\"><path fill=\"gold\" d=\"M0 0h31.509v31.495H0z\"/></clipPath><clipPath id=\"a-logo-expanded\"><path d=\"M0 0h144v32H0z\"/></clipPath></defs><g clip-path=\"url(#a-logo-expanded)\"><path fill=\"gold\" d=\"M0 .205h31.509V31.7H0z\"/><g clip-path=\"url(#b-logo-expanded)\" transform=\"translate(0 .205)\"><g fill=\"#dd171b\" fill-rule=\"evenodd\"><path d=\"m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z\"/></g></g><path d=\"M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z\" fill=\"#161615\" fill-rule=\"evenodd\"/></g></svg>\r\n                <svg *ngIf=\"!noLogo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" [ngClass]=\"{'sm:hidden': expandedLogo}\" class=\"w-8 h-8 fill-current\" ><title>Ir a la p\u00E1gina de inicio</title><defs><clipPath id=\"b-logo-mini\"><path fill=\"gold\" d=\"M0 0h32v32.001H0z\"/></clipPath><clipPath id=\"a-logo-mini\"><path d=\"M0 0h32v32H0z\"/></clipPath></defs><g clip-path=\"url(#a-logo-mini)\"><path fill=\"gold\" d=\"M0 .305h32v32.001H0z\"/><g clip-path=\"url(#b-logo-mini)\" transform=\"translate(0 .305)\"><g fill=\"#dd171b\" fill-rule=\"evenodd\"><path d=\"m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z\"/></g></g></g></svg>\r\n                <img [src]=\"customLogoHtml ? noLogo && customLogoHtml : ''\">\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          <ng-container *ngIf=\"customNavigationHtml\">{{customNavigationHtml}}</ng-container>\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 = {
@@ -4755,6 +4830,9 @@ HeaderComponent.propDecorators = {
     homepageRouterLink: [{ type: Input }],
     homepageFragment: [{ type: Input }],
     expandedLogo: [{ type: Input }],
+    noLogo: [{ type: Input }],
+    customLogoHtml: [{ type: Input }],
+    customNavigationHtml: [{ type: Input }],
     subnavData: [{ type: Input }],
     navigationData: [{ type: Input }],
     dropdownData: [{ type: Input }],
@@ -4858,7 +4936,7 @@ class FooterComponent extends AccessibilityComponent {
 FooterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-footer',
-                template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', 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  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\r\n    <ng-container *ngIf=\"getNavigationItems()\">\r\n      <div class=\"flex flex-wrap\">\r\n        <div class=\"flex-1 mr-base\" *ngFor=\"let nav of getNavigationItems()\">\r\n          <h3 class=\"mb-base font-bold text-xl\">{{nav.title}}</h3>\r\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\r\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\r\n              <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n      <hr class=\"my-base border-t border-neutral-base\">\r\n    </ng-container>\r\n\r\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\r\n      <div class=\"mb-base\">\r\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\r\n          <ng-container *ngIf=\"metaElement\">\r\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\r\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap\" *ngIf=\"getMetaItems(metaElement)\">\r\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\r\n                <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n              </li>\r\n            </ul>\r\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\r\n              <p>\r\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\r\n        <div class=\"leading-tight\">\r\n          <p>\r\n            Todo el contenido bajo\r\n            <a\r\n              class=\"c-link c-link--neutral\"\r\n              href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\"\r\n              rel=\"license\" target=\"_blank\"\r\n            >licencia CC BY 4.0</a>\r\n          </p>\r\n        </div>\r\n        <div class=\"leading-tight\">\r\n          <p>\r\n            <a target=\"_blank\"\r\n              class=\"c-link c-link--neutral\"\r\n              href=\"https://www.aragon.es/\"\r\n            >Gobierno de Arag\u00F3n</a>. Edificio Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\" class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\r\n        <p *ngIf=\"iconComponent || icon?.html\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\r\n        </p>\r\n        <p>\r\n          <a href=\"http://www.aragon.es/Fondos_Europeos\" target=\"_blank\" class=\"inline-block text-sm c-link no-underline\" title=\"M\u00E1s informaci\u00F3n sobre los Fondos Estructurales y de Inversi\u00F3n Europeos (Fondos EIE)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 575 96\" width=\"288\" height=\"48\" class=\"w-auto h-12\" role=\"img\" aria-label=\"Logotipo Uni\u00F3n Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Arag\u00F3n.\"><text transform=\"translate(126 33)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\" font-weight=\"700\"><tspan x=\"0\" y=\"0\">UNI\u00D3N EUROPEA</tspan></text><text transform=\"translate(126 56)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform=\"translate(126 79)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">\u201CConstruyendo Europa desde Arag\u00F3n\u201D</tspan></text><path fill=\"#039\" stroke=\"#fff\" stroke-width=\"1%\" d=\"M14.086 13.02h104.282v69.522H14.086z\"/><g fill=\"#fc0\"><path d=\"M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z\"/></g></svg>\r\n          </a>\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</footer>\r\n\r\n<ng-template #itemHref let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #itemRouterLink let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n"
+                template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', 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  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\r\n    <ng-container *ngIf=\"getNavigationItems()\">\r\n      <div class=\"flex flex-col lg:flex-row flex-wrap gap-base\">\r\n        <div class=\"flex-1\" *ngFor=\"let nav of getNavigationItems()\">\r\n          <div class=\"lg:flex-1\">\r\n            <h3 class=\"c-h3 mb-base\">{{nav.title}}</h3>\r\n          </div>\r\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\r\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\r\n              <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n      <hr class=\"my-base border-t border-neutral-base\">\r\n    </ng-container>\r\n\r\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\r\n      <div class=\"mb-base\">\r\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\r\n          <ng-container *ngIf=\"metaElement\">\r\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\r\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap mb-base\" *ngIf=\"getMetaItems(metaElement)\">\r\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\r\n                <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n              </li>\r\n            </ul>\r\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\r\n              <p>\r\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\r\n\r\n        <!-- Description -->\r\n        <div *ngIf=\"descriptionComponent || description?.html || description?.text; else noDesc\">\r\n          <h2 class=\"sr-only\">{{descriptionComponent?.visuallyHiddenTitle ? descriptionComponent?.visuallyHiddenTitle : description?.visuallyHiddenTitle ? description?.visuallyHiddenTitle : 'Acerca de'}}</h2>\r\n          <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description?.html, text: description?.text }\"></ng-container>\r\n        </div>\r\n        <ng-template #noDesc>\r\n          <div class=\"leading-tight\">\r\n            <p>\r\n              Todo el contenido bajo\r\n              <a class=\"c-link c-link--neutral\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\" rel=\"license\"\r\n                target=\"_blank\">licencia CC BY 4.0</a>\r\n            </p>\r\n          </div>\r\n          <div class=\"leading-tight\">\r\n            <p>\r\n              <a target=\"_blank\" class=\"c-link c-link--neutral\" href=\"https://www.aragon.es/\">Gobierno de Arag\u00F3n</a>. Edificio\r\n              Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\"\r\n                class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </div>\r\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\r\n        <p *ngIf=\"iconComponent || icon?.html\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\r\n        </p>\r\n        <p *ngIf=\"!noLogo\">\r\n          <a href=\"http://www.aragon.es/Fondos_Europeos\" target=\"_blank\" class=\"inline-block text-sm c-link no-underline\" title=\"M\u00E1s informaci\u00F3n sobre los Fondos Estructurales y de Inversi\u00F3n Europeos (Fondos EIE)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 575 96\" width=\"288\" height=\"48\" class=\"w-auto h-12\" role=\"img\" aria-label=\"Logotipo Uni\u00F3n Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Arag\u00F3n.\"><text transform=\"translate(126 33)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\" font-weight=\"700\"><tspan x=\"0\" y=\"0\">UNI\u00D3N EUROPEA</tspan></text><text transform=\"translate(126 56)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform=\"translate(126 79)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">\u201CConstruyendo Europa desde Arag\u00F3n\u201D</tspan></text><path fill=\"#039\" stroke=\"#fff\" stroke-width=\"1%\" d=\"M14.086 13.02h104.282v69.522H14.086z\"/><g fill=\"#fc0\"><path d=\"M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z\"/></g></svg>\r\n          </a>\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</footer>\r\n\r\n<ng-template #itemHref let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #itemRouterLink let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n"
             },] }
 ];
 FooterComponent.propDecorators = {
@@ -4867,8 +4945,11 @@ FooterComponent.propDecorators = {
     icon: [{ type: Input }],
     containerClasses: [{ type: Input }],
     classes: [{ type: Input }],
+    description: [{ type: Input }],
+    noLogo: [{ type: Input }],
     iconComponent: [{ type: ContentChildren, args: [IconComponent,] }],
     metaComponent: [{ type: ContentChildren, args: [FooterMetaComponent,] }],
+    descriptionComponent: [{ type: ContentChildren, args: [DescriptionComponent,] }],
     navigationComponent: [{ type: ContentChildren, args: [FooterNavigationComponent,] }]
 };
 __decorate([
@@ -4876,7 +4957,10 @@ __decorate([
 ], FooterComponent.prototype, "iconComponent", void 0);
 __decorate([
     DesyContentChild()
-], FooterComponent.prototype, "metaComponent", void 0);
+], FooterComponent.prototype, "metaComponent", void 0);
+__decorate([
+    DesyContentChild()
+], FooterComponent.prototype, "descriptionComponent", void 0);
 class ErrorSummaryItemComponent extends ContentBaseComponent {
 }
@@ -5301,10 +5385,24 @@ class MenubarComponent extends AccessibilityComponent {
         this.itemsChange = new EventEmitter();
         this.activeItemChange = new EventEmitter();
         this.activeSubItemChange = new EventEmitter();
+        this.cfg = true;
         this.viewInit = false;
         this.currentFocusItemIndex = 0;
     }
     ngOnChanges(changes) {
+        this.roleData = this.role ? this.role : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.ariaModalData = this.ariaModal ? this.ariaModal : null;
         if (this.viewInit) {
             this.checkChanges();
         }
@@ -5902,16 +6000,14 @@ 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           [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            <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           (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           (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                  (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                          (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                  (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                  (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: "  <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.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            <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           (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           (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                  (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                          (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                  (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                  (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"
             },] }
 ];
 MenubarComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 MenubarComponent.propDecorators = {
-    id: [{ type: Input }],
     idPrefix: [{ type: Input }],
-    classes: [{ type: Input }],
     items: [{ type: Input }],
     itemsChange: [{ type: Output }],
     activeItemChange: [{ type: Output }],
@@ -5919,6 +6015,22 @@ MenubarComponent.propDecorators = {
     labelRef: [{ type: Input }],
     labelData: [{ type: Input }],
     labelText: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    cfg: [{ type: HostBinding, args: ['class.c-menubar',] }],
+    id: [{ type: Input }, { type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    ariaModalData: [{ type: HostBinding, args: ['attr.aria-modal',] }],
     menubar: [{ type: ViewChild, args: ['menubar', { read: ElementRef },] }],
     menuItems: [{ type: ViewChildren, args: [MenubaritemDirective,] }],
     labelComponent: [{ type: ContentChildren, args: [MenubarLabelComponent,] }],
@@ -6142,6 +6254,25 @@ var OrderBy;
     OrderBy["desc"] = "desc";
 })(OrderBy || (OrderBy = {}));
+class TableAdvancedSelectComponent extends SelectComponent {
+    constructor() {
+        super(...arguments);
+        this.isSelect = true;
+        this.valueChange = new EventEmitter();
+    }
+}
+TableAdvancedSelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-table-advanced-select',
+                template: ''
+            },] }
+];
+TableAdvancedSelectComponent.propDecorators = {
+    value: [{ type: Input }],
+    valueChange: [{ type: Output }],
+    selectItemComponentList: [{ type: ContentChildren, args: [OptionComponent,] }]
+};
 class TableAdvancedHeaderCellComponent extends ContentBaseComponent {
 }
 TableAdvancedHeaderCellComponent.decorators = [
@@ -6157,8 +6288,17 @@ TableAdvancedHeaderCellComponent.propDecorators = {
     rowspan: [{ type: Input }],
     orderBy: [{ type: Input }],
     hasFilter: [{ type: Input }],
-    filterClasses: [{ type: Input }]
-};
+    filterClasses: [{ type: Input }],
+    hasSelect: [{ type: Input }],
+    selectComponent: [{ type: ContentChildren, args: [TableAdvancedSelectComponent,] }],
+    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }]
+};
+__decorate([
+    DesyContentChild()
+], TableAdvancedHeaderCellComponent.prototype, "selectComponent", void 0);
+__decorate([
+    DesyContentChild()
+], TableAdvancedHeaderCellComponent.prototype, "contentComponent", void 0);
 class TableAdvancedHeaderComponent {
 }
@@ -6304,6 +6444,9 @@ class TableAdvancedComponent extends AccessibilityComponent {
                 if (headerCell.hasFilter && headerCell.activeFilter) {
                     params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueFilter });
                 }
+                if (headerCell.hasSelect && headerCell.activeSelect) {
+                    params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueSelect });
+                }
             });
             const orderByColumnIndex = head.findIndex(cell => cell.orderBy && cell.orderBy !== OrderBy.none);
             params.sort = (orderByColumnIndex >= 0) ? { columnIndex: orderByColumnIndex, order: head[orderByColumnIndex].orderBy } : null;
@@ -6315,7 +6458,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
      */
     hasFilters() {
         const head = this.getHeaderCells();
-        return head ? head.findIndex(cell => cell.hasFilter) >= 0 : false;
+        return head ? head.findIndex(cell => (cell.hasFilter) || (cell.hasSelect)) >= 0 : false;
     }
     getHeaderCells() {
         return this.headerComponent && this.headerComponent.cells.length > 0 ? this.headerComponent.cells.toArray() : this.head;
@@ -6350,6 +6493,9 @@ class TableAdvancedComponent extends AccessibilityComponent {
     getIdHeaderFilter(index) {
         return this.getIdPrefix() + '-header-filter-' + index;
     }
+    getIdHeaderSelect(index) {
+        return this.getIdPrefix() + '-header-select-' + index;
+    }
     getCaptionClass() {
         return this.captionComponent ? this.captionComponent.classes : this.captionClasses;
     }
@@ -6364,6 +6510,16 @@ class TableAdvancedComponent extends AccessibilityComponent {
             return 'none';
         }
     }
+    getSelectForItem(item) {
+        return item.selectComponent ? item.selectComponent : null;
+    }
+    getItemSelectOptions(item) {
+        return item.selectItemComponentList && item.selectItemComponentList.length > 0 ?
+            item.selectItemComponentList.toArray() : item.items;
+    }
+    getContentComponent(item) {
+        return item.contentComponent ? item.contentComponent : null;
+    }
     /**
      * checks
      */
@@ -6405,6 +6561,10 @@ class TableAdvancedComponent extends AccessibilityComponent {
             item.activeFilter = !!item.valueFilter;
             this.uncheckAll();
         }
+        if (item.hasSelect) { //Si tiene seleccionable
+            item.activeSelect = !!item.valueSelect;
+            this.uncheckAll();
+        }
         this.recalculateVisibleElements();
     }
     /**
@@ -6489,11 +6649,22 @@ class TableAdvancedComponent extends AccessibilityComponent {
         }
         return txt;
     }
+    selectFilter(item, itemValue) {
+        item.valueChange.emit(itemValue);
+        const head = this.getHeaderCells();
+        const rows = this.getRows();
+        if (head && rows) {
+            head.forEach((cell, cellIndex) => {
+            });
+            rows.forEach(row => {
+            });
+        }
+    }
 }
 TableAdvancedComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-table-advanced',
-                template: "<ng-template #tableContent>\r\n  <table role=\"grid\"\r\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', 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      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\r\n      </caption>\r\n      <thead *ngIf=\"getHeaderCells()\">\r\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\r\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\r\n                  <span class=\"sr-only\">Seleccionar fila</span>\r\n              </th>\r\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\r\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\r\n                      [class]=\"['align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\"\r\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\r\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : 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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n\r\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\r\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\r\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\r\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\r\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy == orderByType.asc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy == orderByType.desc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy == orderByType.none\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"text-neutral-base\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                    </span>\r\n                  </span>\r\n\r\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </span>\r\n              </th>\r\n          </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\r\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\r\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\r\n                  [class]=\"['align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\">\r\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\r\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\r\n                                   (clickEvent)=\"handleInputSearch(item)\"\r\n                                   (ngModelChange)=\"handleInputSearch(item)\"\r\n                                   labelText=\"Buscar en esta columna\"\r\n                                   [id]=\"getIdHeaderFilter(iHead)\"\r\n                                   placeholder=\"Buscar\"\r\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\r\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\r\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\r\n              </td>\r\n          </tr>\r\n\r\n\r\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\r\n              [desyRow]=\"row\"\r\n              [ngClass]=\"{'bg-neutral-light': hasCheckboxes && row.checked }\">\r\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\r\n                  tabindex=\"-1\" >\r\n                <div class=\"c-checkboxes c-checkboxes--sm\">\r\n                  <div>\r\n                    <div class=\"relative flex items-start\">\r\n                      <div class=\"flex items-center mx-sm\">\r\n                        <input type=\"checkbox\" 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-light disabled:border-neutral-base text-primary-base\"\r\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\r\n                               [id]=\"getIdRowCheckbox(iRow)\"\r\n                               [name]=\"getIdRowCheckbox(iRow)\"\r\n                               [attr.aria-label]=\"'Fila ' + iRow\">\r\n                      </div>\r\n                      <div class=\"pt-0.5 leading-5\">\r\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\r\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\r\n                      [class]=\"['px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\r\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                      [attr.id]=\"cell.id ? cell.id : null\"\r\n                      [attr.role]=\"cell.role ? cell.role : null\"\r\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                  </th>\r\n                  <ng-template #elseTd>\r\n                      <td tabindex=\"-1\" desyFocusClickedCell\r\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\r\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                          [attr.id]=\"cell.id ? cell.id : null\"\r\n                          [attr.role]=\"cell.role ? cell.role : null\"\r\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                      </td>\r\n                  </ng-template>\r\n              </ng-container>\r\n          </tr>\r\n      </tbody>\r\n  </table>\r\n</ng-template>\r\n\r\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\r\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n</div>\r\n"
+                template: "<ng-template #tableContent>\r\n  <table role=\"grid\"\r\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', 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      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\r\n      </caption>\r\n      <thead *ngIf=\"getHeaderCells()\">\r\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\r\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\r\n                  <span class=\"sr-only\">Seleccionar fila</span>\r\n              </th>\r\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\r\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\r\n                      [class]=\"['align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\"\r\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\r\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : 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.ariaDisabled ? item.ariaDisabled : 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.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n\r\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\r\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\r\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\r\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\r\n                    <ng-container *ngIf=\"item.contentComponent\">\r\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\r\n                    </ng-container>\r\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\r\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\r\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy == orderByType.asc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy == orderByType.desc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy == orderByType.none\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"text-neutral-base\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                    </span>\r\n                  </span>\r\n\r\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\r\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\r\n                    <ng-container *ngIf=\"item.contentComponent\">\r\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\r\n                    </ng-container>\r\n                  </span>\r\n              </th>\r\n          </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\r\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\r\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\r\n                  [class]=\"['align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\">\r\n                  <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) != null\">\r\n                    <ng-container *ngTemplateOutlet=\"tableSelect; context: {selectable: getSelectForItem(item)}\"></ng-container>\r\n                    <ng-template #tableSelect let-selectable=\"selectable\">\r\n                      <desy-select [id]=\"getIdHeaderSelect(iHead)\"\r\n                        [labelData]=\"{ text: 'Filtrar en esta columna', classes: 'sr-only' }\"\r\n                        [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full mt-0'\"\r\n                        [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : 'mb-0'\"\r\n                        [name]=\"selectable.name\"\r\n                        [items]=\"getItemSelectOptions(selectable)\"\r\n                        [disabled]=\"selectable.disabled\"\r\n                        [describedBy]=\"getIdHeaderSelect(iHead)\"\r\n\r\n                        [(ngModel)]=\"item.valueSelect\" (ngModelChange)=\"handleInputSearch(item)\"\r\n\r\n                        [role]=\"selectable.role\"\r\n                        [ariaLabel]=\"selectable.ariaLabel\"\r\n                        [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\r\n                        [ariaHidden]=\"selectable.ariaHidden\"\r\n                        [ariaDisabled]=\"selectable.ariaDisabled\"\r\n                        [ariaControls]=\"selectable.ariaControls\"\r\n                        [ariaCurrent]=\"selectable.ariaCurrent\"\r\n                        [ariaLive]=\"selectable.ariaLive\"\r\n                        [ariaExpanded]=\"selectable.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"selectable.ariaHasPopup\"\r\n                        [tabindex]=\"selectable.tabindex\">\r\n                      </desy-select>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"item.hasSelect && item.hasFilter\" class=\"pb-sm\"></div>\r\n\r\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\r\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\r\n                                   (clickEvent)=\"handleInputSearch(item)\"\r\n                                   (ngModelChange)=\"handleInputSearch(item)\"\r\n                                   labelText=\"Buscar en esta columna\"\r\n                                   [id]=\"getIdHeaderFilter(iHead)\"\r\n                                   placeholder=\"Buscar\"\r\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\r\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\r\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\r\n              </td>\r\n          </tr>\r\n\r\n\r\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\r\n              [desyRow]=\"row\"\r\n              [ngClass]=\"{'bg-neutral-light': hasCheckboxes && row.checked }\">\r\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\r\n                  tabindex=\"-1\" >\r\n                <div class=\"c-checkboxes c-checkboxes--sm\">\r\n                  <div>\r\n                    <div class=\"relative flex items-start\">\r\n                      <div class=\"flex items-center mx-sm\">\r\n                        <input type=\"checkbox\" 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-light disabled:border-neutral-base text-primary-base\"\r\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\r\n                               [id]=\"getIdRowCheckbox(iRow)\"\r\n                               [name]=\"getIdRowCheckbox(iRow)\"\r\n                               [attr.aria-label]=\"'Fila ' + iRow\">\r\n                      </div>\r\n                      <div class=\"pt-0.5 leading-5\">\r\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\r\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\r\n                      [class]=\"['px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\r\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                      [attr.id]=\"cell.id ? cell.id : null\"\r\n                      [attr.role]=\"cell.role ? cell.role : null\"\r\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                  </th>\r\n                  <ng-template #elseTd>\r\n                      <td tabindex=\"-1\" desyFocusClickedCell\r\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\r\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                          [attr.id]=\"cell.id ? cell.id : null\"\r\n                          [attr.role]=\"cell.role ? cell.role : null\"\r\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                      </td>\r\n                  </ng-template>\r\n              </ng-container>\r\n          </tr>\r\n      </tbody>\r\n  </table>\r\n</ng-template>\r\n\r\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\r\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n</div>\r\n"
             },] }
 ];
 TableAdvancedComponent.ctorParameters = () => [
@@ -6611,6 +6782,30 @@ AccordionHeaderComponent.propDecorators = {
     classes: [{ type: Input }]
 };
+class AccordionItemShowButtonComponent extends ContentBaseComponent {
+}
+AccordionItemShowButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-accordion-item-show-button',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+AccordionItemShowButtonComponent.propDecorators = {
+    classes: [{ type: Input }]
+};
+class AccordionItemHideButtonComponent extends ContentBaseComponent {
+}
+AccordionItemHideButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-accordion-item-hide-button',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+AccordionItemHideButtonComponent.propDecorators = {
+    classes: [{ type: Input }]
+};
 class AccordionItemComponent extends AccessibilityComponent {
     constructor() {
         super(...arguments);
@@ -6629,20 +6824,43 @@ AccordionItemComponent.propDecorators = {
     classes: [{ type: Input }],
     openChange: [{ type: Output }],
     headerComponent: [{ type: ContentChildren, args: [AccordionHeaderComponent,] }],
-    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }]
+    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }],
+    showHeaderButton: [{ type: ContentChildren, args: [AccordionItemShowButtonComponent,] }],
+    hideHeaderButton: [{ type: ContentChildren, args: [AccordionItemHideButtonComponent,] }]
 };
 __decorate([
     DesyContentChild()
 ], AccordionItemComponent.prototype, "headerComponent", void 0);
 __decorate([
     DesyContentChild()
-], AccordionItemComponent.prototype, "contentComponent", void 0);
+], AccordionItemComponent.prototype, "contentComponent", void 0);
+__decorate([
+    DesyContentChild()
+], AccordionItemComponent.prototype, "showHeaderButton", void 0);
+__decorate([
+    DesyContentChild()
+], AccordionItemComponent.prototype, "hideHeaderButton", void 0);
 class AccordionComponent extends AccessibilityComponent {
     constructor() {
         super(...arguments);
         this.showAll = true;
     }
+    ngOnChanges(changes) {
+        this.roleData = this.role ? this.role : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.ariaModalData = this.ariaModal ? this.ariaModal : null;
+    }
     getItemId(item, index) {
         let id;
         if (item.id) {
@@ -6737,7 +6955,7 @@ class AccordionComponent extends AccessibilityComponent {
 AccordionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-accordion',
-                template: "<div [class]=\"classes\"\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 class=\"flex justify-between\">\r\n    <ng-container *ngIf=\"headingComponent || heading\">\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h1 *ngSwitchCase=\"1\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h1>\r\n        <h2 *ngSwitchCase=\"2\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h2>\r\n        <h3 *ngSwitchCase=\"3\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h3>\r\n        <h4 *ngSwitchCase=\"4\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h4>\r\n        <h5 *ngSwitchCase=\"5\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h5>\r\n      </ng-container>\r\n      <button *ngIf=\"showControl\" (click)=\"changeAll()\"\r\n              class=\"ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus\">\r\n        {{showAll ? 'Mostrar' : 'Ocultar'}} todo\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"Accordion\">\r\n    <div *ngFor=\"let item of getItems(); index as i\" class=\"-my-px px-xs py-sm border-t border-b border-neutral-base\"\r\n         (keydown.home)=\"focusFirstItem($event)\"\r\n         (keydown.end)=\"focusLastItem($event)\"\r\n         (keydown.arrowup)=\"focusPreviousItem($event, i)\"\r\n         (keydown.arrowdown)=\"focusNextItem($event, i)\"\r\n         (click)=\"selectItem(i)\">\r\n\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h2 *ngSwitchCase=\"1\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h2>\r\n        <h3 *ngSwitchCase=\"2\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h3>\r\n        <h4 *ngSwitchCase=\"3\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h4>\r\n        <h5 *ngSwitchCase=\"4\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h5>\r\n        <h6 *ngSwitchCase=\"5\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h6>\r\n      </ng-container>\r\n      <p class=\"sr-only\" aria-hidden=\"true\">Haz click en el bot\u00F3n anterior para mostrar u ocultar</p>\r\n      <div *ngIf=\"item.open\" class=\"Accordion-panel\"\r\n           [attr.id]=\"getItemId(item, i)\"\r\n           [attr.role]=\"(item.role ? role : 'accordion')\"\r\n           [attr.aria-selected]=\"currentItem === i ? 'true' : 'false'\"\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]=\"'accordion-' + getItemId(item, i)\"\r\n           [attr.aria-current]=\"item.ariaCurrent\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: getItemContent(item), html: item.html, text: item.text }\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemHeaderContent let-item=\"item\" let-id=\"id\" let-index=\"index\">\r\n  <button #itemSelector [id]=\"id + '-title'\" class=\"Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n          [attr.aria-controls]=\"id\" [attr.aria-expanded]=\"item.open\" (click)=\"toggleItem(item)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: getItemHeader(item), html: item.headerHtml, text: item.headerText }\"></ng-container>\r\n    <span *ngIf=\"allowToggle || !item.open\" class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none\" aria-hidden=\"true\">\r\n      {{ item.open ? 'Ocultar' : 'Mostrar' }}\r\n    </span>\r\n  </button>\r\n</ng-template>\r\n"
+                template: "\r\n  <div class=\"flex justify-between\">\r\n    <ng-container *ngIf=\"headingComponent || heading\">\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h1 *ngSwitchCase=\"1\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h1>\r\n        <h2 *ngSwitchCase=\"2\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h2>\r\n        <h3 *ngSwitchCase=\"3\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h3>\r\n        <h4 *ngSwitchCase=\"4\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h4>\r\n        <h5 *ngSwitchCase=\"5\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h5>\r\n      </ng-container>\r\n      <button *ngIf=\"showControl\" (click)=\"changeAll()\"\r\n              class=\"ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus\">\r\n        {{showAll ? 'Mostrar' : 'Ocultar'}} todo\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"Accordion\">\r\n    <div *ngFor=\"let item of getItems(); index as i\" class=\"-my-px px-xs py-sm border-t border-b border-neutral-base\"\r\n         (keydown.home)=\"focusFirstItem($event)\"\r\n         (keydown.end)=\"focusLastItem($event)\"\r\n         (keydown.arrowup)=\"focusPreviousItem($event, i)\"\r\n         (keydown.arrowdown)=\"focusNextItem($event, i)\"\r\n         (click)=\"selectItem(i)\">\r\n\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h2 *ngSwitchCase=\"1\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h2>\r\n        <h3 *ngSwitchCase=\"2\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h3>\r\n        <h4 *ngSwitchCase=\"3\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h4>\r\n        <h5 *ngSwitchCase=\"4\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h5>\r\n        <h6 *ngSwitchCase=\"5\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h6>\r\n      </ng-container>\r\n      <p class=\"sr-only\" aria-hidden=\"true\">Haz click en el bot\u00F3n anterior para mostrar u ocultar</p>\r\n      <div *ngIf=\"item.open\" class=\"Accordion-panel\"\r\n           [class]=\"item.classes\"\r\n           [attr.id]=\"getItemId(item, i)\"\r\n           [attr.role]=\"(item.role ? role : 'accordion')\"           \r\n           [attr.aria-selected]=\"currentItem === i ? 'true' : 'false'\"\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]=\"'accordion-' + getItemId(item, i)\"\r\n           [attr.aria-current]=\"item.ariaCurrent\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: getItemContent(item), html: item.html, text: item.text }\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n<ng-template #itemHeaderContent let-item=\"item\" let-id=\"id\" let-index=\"index\">\r\n  <button #itemSelector [id]=\"id + '-title'\" class=\"Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n          [attr.aria-controls]=\"id\" [attr.aria-expanded]=\"item.open\" (click)=\"toggleItem(item)\" [attr.disabled]=\"item.disabled\" [ngClass]=\"item.disabled ? 'cursor-not-allowed' : classes\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: getItemHeader(item), html: item.headerHtml, text: item.headerText }\"></ng-container>\r\n    <span *ngIf=\"!item.disabled\" class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none\" aria-hidden=\"true\" [ngClass]=\"{'hidden': item.disabled}\">\r\n      <span *ngIf=\"!item.open\" [class]=\"['Accordion-show', item.showHeaderButton?.classes] | makeHtmlList\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item.showHeaderButton, text: 'Mostrar' }\"></ng-container>      \r\n      </span>\r\n      <span *ngIf=\"allowToggle && item.open\" [class]=\"['Accordion-hide', item.showHeaderButton?.classes] | makeHtmlList\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item.hideHeaderButton, text: 'Ocultar' }\"></ng-container>\r\n      </span>\r\n    </span>\r\n  </button>\r\n</ng-template>\r\n"
             },] }
 ];
 AccordionComponent.propDecorators = {
@@ -6749,7 +6967,20 @@ AccordionComponent.propDecorators = {
     headingLevel: [{ type: Input }],
     showControl: [{ type: Input }],
     items: [{ type: Input }],
-    classes: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    ariaModalData: [{ type: HostBinding, args: ['attr.aria-modal',] }],
     headingComponent: [{ type: ContentChildren, args: [AccordionHeaderComponent,] }],
     itemComponentList: [{ type: ContentChildren, args: [AccordionItemComponent,] }]
 };
@@ -6757,30 +6988,6 @@ __decorate([
     DesyContentChild()
 ], AccordionComponent.prototype, "headingComponent", void 0);
-class AccordionHistoryItemHideButtonComponent extends ContentBaseComponent {
-}
-AccordionHistoryItemHideButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'desy-accordion-history-item-hide-button',
-                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
-            },] }
-];
-AccordionHistoryItemHideButtonComponent.propDecorators = {
-    classes: [{ type: Input }]
-};
-class AccordionHistoryItemShowButtonComponent extends ContentBaseComponent {
-}
-AccordionHistoryItemShowButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'desy-accordion-history-item-show-button',
-                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
-            },] }
-];
-AccordionHistoryItemShowButtonComponent.propDecorators = {
-    classes: [{ type: Input }]
-};
 class AccordionHistoryItemComponent extends AccordionItemComponent {
     constructor() {
         super(...arguments);
@@ -6796,8 +7003,8 @@ AccordionHistoryItemComponent.decorators = [
 AccordionHistoryItemComponent.propDecorators = {
     status: [{ type: Input }],
     disabled: [{ type: Input }],
-    showButton: [{ type: ContentChildren, args: [AccordionHistoryItemShowButtonComponent,] }],
-    hideButton: [{ type: ContentChildren, args: [AccordionHistoryItemHideButtonComponent,] }]
+    showButton: [{ type: ContentChildren, args: [AccordionItemShowButtonComponent,] }],
+    hideButton: [{ type: ContentChildren, args: [AccordionItemHideButtonComponent,] }]
 };
 __decorate([
     DesyContentChild()
@@ -6819,16 +7026,45 @@ AccordionHistoryComponent.propDecorators = {
 };
 class SpinnerComponent extends AccessibilityComponent {
+    ngOnChanges(changes) {
+        this.classes = this.classes ? this.classes += ' c-spinner' : 'c-spinner';
+        this.roleData = this.role ? this.role : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.ariaModalData = this.ariaModal ? this.ariaModal : null;
+    }
 }
 SpinnerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-spinner',
-                template: "<div [class]=\"'c-spinner' + (classes ? ' ' + classes : '')\" data-module=\"c-spinner\"\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  <p *ngIf=\"text\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{text}}</p>\r\n</div>\r\n"
+                template: "<span *ngIf=\"text\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{text}}</span>"
             },] }
 ];
 SpinnerComponent.propDecorators = {
-    classes: [{ type: Input }],
     text: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    ariaModalData: [{ type: HostBinding, args: ['attr.aria-modal',] }],
     id: [{ type: Input }]
 };
@@ -6939,7 +7175,7 @@ class CollapsibleComponent extends AccessibilityAndContentRequiredComponent {
 CollapsibleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-collapsible',
-                template: "<div [class]=\"(classes ? classes : '-my-px py-sm border-t border-b border-neutral-base')\"\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    <h3>        \r\n        <button *ngIf=\"headerText && !headerHtml\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\">{{ headerText }}\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n        <button *ngIf=\"headerHtml\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\"><ng-container *ngTemplateOutlet=\"tmpHtml\"></ng-container>\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n        <button *ngIf=\"!headerHtml && !headerText\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\">\r\n            <ng-content></ng-content>\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n    </h3>\r\n    <div *ngIf=\"open && html\"  @displayCollapsible [attr.id]=\"(id ? id : null)\" class=\"py-sm\">\r\n        <ng-container *ngTemplateOutlet=\"html\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"open && !html\" @displayCollapsible [attr.id]=\"(id ? id : null)\" class=\"py-sm\">\r\n        <p [desyInnerContent]=\"text\"></p>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #tmpHtml>\r\n    <div [outerHTML]=\"headerHtml | innerHtml\"></div>  \r\n </ng-template>\r\n",
+                template: "<div [class]=\"(classes ? classes : '-my-px py-sm border-t border-b border-neutral-base')\"\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    <h3>        \r\n        <button *ngIf=\"headerText && !headerHtml\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\">{{ headerText }}\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n        <button *ngIf=\"headerHtml\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\"><ng-container *ngTemplateOutlet=\"tmpHtml\"></ng-container>\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n        <button *ngIf=\"!headerHtml && !headerText\" (click)=\"isOpen()\" [attr.id]=\"id ? (id + '-title') : null\"\r\n            class=\"group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\" \r\n            [attr.aria-expanded]=\"open\"\r\n            [attr.aria-controls]=\"id ? id : null\">\r\n            <ng-content></ng-content>\r\n            <span class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black\" aria-hidden=\"true\">{{show}}</span>\r\n        </button>\r\n    </h3>\r\n    <div *ngIf=\"open && html\"  @displayCollapsible [attr.id]=\"(id ? id : null)\" class=\"py-sm\">\r\n        <ng-container *ngTemplateOutlet=\"html\"></ng-container>\r\n    </div>\r\n    <div *ngIf=\"open && !html\" @displayCollapsible [attr.id]=\"(id ? id : null)\" class=\"py-sm\">\r\n        <p [desyInnerContent]=\"text\"></p>\r\n    </div>\r\n</div>\r\n<ng-template #tmpHtml>\r\n    <div [outerHTML]=\"headerHtml | innerHtml\"></div>  \r\n </ng-template>\r\n",
                 animations: [
                     trigger('displayCollapsible', [
                         state('void', style({
@@ -7003,6 +7239,12 @@ class ItemComponent extends AccessibilityComponent {
         super();
         this.changeDetectorRef = changeDetectorRef;
     }
+    ngOnInit() {
+        const progressInterval = setInterval(() => {
+            this.checkClasses();
+            clearInterval(progressInterval);
+        }, 500);
+    }
     getItems() {
         return this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
     }
@@ -7012,11 +7254,23 @@ class ItemComponent extends AccessibilityComponent {
     getTitle() {
         return this.titleComponent ? this.titleComponent : (this.title ? this.title : null);
     }
+    getIcon() {
+        return this.iconComponent ? this.iconComponent : (this.icon ? this.icon : null);
+    }
+    ngOnChanges(changes) {
+        this.checkClasses();
+    }
+    checkClasses() {
+        if (this.getTitle()) {
+            this.classes = this.classes ? this.classes += ' flex flex-wrap p-base bg-white border border-neutral-base rounded' : 'flex flex-wrap p-base bg-white border border-neutral-base rounded';
+            this.id = this.id ? this.id : null;
+        }
+    }
 }
 ItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-item',
-                template: "<div *ngIf=\"getTitle()\" [class]=\"['flex flex-wrap p-base bg-white border border-neutral-base rounded', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\">\r\n  <div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\r\n    <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\r\n    <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\r\n  </div>\r\n  <div class=\"self-center h-full mr-base\" *ngIf=\"iconComponent || icon\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n      <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Solicitud\" focusable=\"false\"><path d=\"M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z\" fill=\"currentColor\"/><path d=\"M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z\" fill=\"currentColor\"/><path d=\"M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z\" fill=\"currentColor\"/></svg>\r\n      <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Link\" focusable=\"false\"><path d=\"M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z\" fill=\"currentColor\"/><path d=\"M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z\" fill=\"currentColor\"/><path d=\"M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z\" fill=\"currentColor\"/></svg>\r\n      <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Archivo\" focusable=\"false\"><path d=\"M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z\" fill=\"currentColor\"/><path d=\"M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z\" fill=\"currentColor\"/></svg>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"lg:flex flex-1 self-center\">\r\n    <div class=\"lg:flex-1 lg:self-center\">\r\n      <ng-container [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h1>\r\n        <h2 *ngSwitchCase=\"2\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h2>\r\n        <h3 *ngSwitchCase=\"3\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h3>\r\n        <h4 *ngSwitchCase=\"4\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h4>\r\n        <h5 *ngSwitchCase=\"5\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h5>\r\n        <p *ngSwitchDefault\r\n           [class]=\"getTitle().classes\"\r\n           [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </p>\r\n      </ng-container>\r\n\r\n      <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\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        <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\r\n      </p>\r\n      <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\r\n        <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\r\n        </li>\r\n      </ul>\r\n      <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+                template: "<div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\r\n  <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\r\n  <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\r\n</div>\r\n<div [class]=\"getIcon().containerClasses != null ? getIcon().containerClasses : 'self-center h-full mr-base'\" *ngIf=\"getIcon() != null\">\r\n  <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n  <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n    <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de datos\" focusable=\"false\" role=\"img\"><path d=\"M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\r\n    <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de enlace\" focusable=\"false\" role=\"img\"><path d=\"M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\r\n    <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de documento\" focusable=\"false\" role=\"img\"><path d=\"m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\r\n  </ng-container>\r\n</div>\r\n<div class=\"lg:flex flex-1 self-center\">\r\n  <div class=\"lg:flex-1 lg:self-center\">\r\n    <ng-container [ngSwitch]=\"headingLevel\">\r\n      <h1 *ngSwitchCase=\"1\"\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </h1>\r\n      <h2 *ngSwitchCase=\"2\"\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </h2>\r\n      <h3 *ngSwitchCase=\"3\"\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </h3>\r\n      <h4 *ngSwitchCase=\"4\"\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </h4>\r\n      <h5 *ngSwitchCase=\"5\"\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </h5>\r\n      <p *ngSwitchDefault\r\n          [class]=\"getTitle().classes\"\r\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n      </p>\r\n    </ng-container>\r\n\r\n    <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\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      <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\r\n    </p>\r\n    <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\r\n      <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n    <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\r\n    </p>\r\n  </div>\r\n  <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\r\n  </div>\r\n</div>"
             },] }
 ];
 ItemComponent.ctorParameters = () => [
@@ -7031,9 +7285,9 @@ ItemComponent.propDecorators = {
     icon: [{ type: Input }],
     isDraggable: [{ type: Input }],
     isLocked: [{ type: Input }],
-    id: [{ type: Input }],
-    classes: [{ type: Input }],
     caller: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    id: [{ type: Input }, { type: HostBinding, args: ['attr.id',] }],
     titleComponent: [{ type: ContentChildren, args: [TitleComponent,] }],
     descriptionComponent: [{ type: ContentChildren, args: [DescriptionComponent,] }],
     iconComponent: [{ type: ContentChildren, args: [IconComponent,] }],
@@ -7067,22 +7321,55 @@ MediaObjectFigureComponent.decorators = [
 ];
 class MediaObjectComponent extends AccessibilityComponent {
+    ngOnChanges(changes) {
+        this.classes = 'flex' + (this.classes ? ' ' + this.classes : '') + (this.center == true ? ' ' : '');
+        this.cfgr = this.center;
+        this.idData = this.id ? this.id : null;
+        this.roleData = this.role ? this.role : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.tabindexData = this.tabindex ? this.tabindex : null;
+    }
 }
 MediaObjectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-media-object',
-                template: "<div [class]=\"'flex' + (classes ? ' ' + classes : '') + (center==true ? ' ' + 'items-center' : '')\" \r\n    [attr.id]=\"id\"\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 ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex\">\r\n    \r\n    <div *ngIf=\"figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\r\n\r\n    <div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\r\n    </div>\r\n\r\n    <div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n    </div>\r\n    \r\n</div>\r\n\r\n"
+                template: "<div *ngIf=\"figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\r\n\r\n<div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\r\n</div>\r\n\r\n<div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n</div>"
             },] }
 ];
 MediaObjectComponent.propDecorators = {
     figureHtml: [{ type: Input }],
-    classes: [{ type: Input }],
     center: [{ type: Input }],
     reverse: [{ type: Input }],
     figureClasses: [{ type: Input }],
     contenClasses: [{ type: Input }],
     caller: [{ type: Input }],
     id: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    cfgr: [{ type: HostBinding, args: ['class.items-center',] }],
+    idData: [{ type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    tabindexData: [{ type: HostBinding, args: ['attr.tabindex',] }],
     contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }],
     mediaObjectFigureComponent: [{ type: ContentChildren, args: [MediaObjectFigureComponent,] }],
     mediaFigureContent: [{ type: ViewChild, args: ['mediaFigureContent', { read: ElementRef, static: true },] }]
@@ -7095,6 +7382,23 @@ __decorate([
 ], MediaObjectComponent.prototype, "mediaObjectFigureComponent", void 0);
 class StatusComponent extends AccessibilityComponent {
+    ngOnChanges(changes) {
+        this.classes = this.classes ? this.classes : null;
+        this.idData = this.id ? this.id : null;
+        this.roleData = this.role ? this.role : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.tabindexData = this.tabindex ? this.tabindex : null;
+    }
     getType() {
         let type;
         if (this.icon && this.icon.type) {
@@ -7109,17 +7413,48 @@ class StatusComponent extends AccessibilityComponent {
 StatusComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-status',
-                template: "<div [class]=\"(classes ?  classes : '')\"\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\r\n        <p class=\"inline-flex items-center\">\r\n          <span class=\"inline-block font-bold uppercase\">{{text}}</span>\r\n          <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \r\n            <ng-container [ngSwitch]=\"getType()\">\r\n              <ng-container *ngSwitchCase=\"'success'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'loading'\">\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\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'error'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n            </ng-container>\r\n          </span>\r\n          <ng-template #elseBlock>\r\n            <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"icon.html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \r\n          </ng-template>\r\n        </p>        \r\n</div>\r\n"
+                template: "<p class=\"inline-flex items-center\">\r\n  <span class=\"inline-block font-bold uppercase\">{{text}}</span>\r\n  <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \r\n    <ng-container [ngSwitch]=\"getType()\">\r\n      <ng-container *ngSwitchCase=\"'success'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'alert'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'loading'\">\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\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'error'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </span>\r\n  <ng-template #elseBlock>\r\n    <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"icon.html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \r\n  </ng-template>\r\n</p>\r\n"
             },] }
 ];
 StatusComponent.propDecorators = {
     text: [{ type: Input }],
     id: [{ type: Input }],
-    classes: [{ type: Input }],
-    icon: [{ type: Input }]
+    icon: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    idData: [{ type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    tabindexData: [{ type: HostBinding, args: ['attr.tabindex',] }]
 };
 class StatusItemComponent extends AccessibilityComponent {
+    ngOnChanges(changes) {
+        this.classes = this.classes ? this.classes : null;
+        this.idData = this.id ? this.id : null;
+        this.roleData = this.role ? this.role : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.tabindexData = this.tabindex ? this.tabindex : null;
+    }
     getItems() {
         return (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
     }
@@ -7127,12 +7462,11 @@ class StatusItemComponent extends AccessibilityComponent {
 StatusItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-status-item',
-                template: "<ng-template #commonHtml>\r\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\r\n     <ng-container *desyCustomInnerContent=\"{\r\n        component: titleComponent,\r\n        html: title ? title.html : null,\r\n        text: title ? title.text : null\r\n      }\"></ng-container>\r\n  </p>\r\n\r\n  <ng-container *ngIf=\"hintComponent\">\r\n      <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hintComponent && hint\">\r\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\r\n               [role]=\"hint.role\"\r\n               [ariaLabel]=\"hint.ariaLabel\"\r\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\r\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\r\n               [ariaHidden]=\"hint.ariaHidden\"\r\n               [ariaDisabled]=\"hint.ariaDisabled\"\r\n               [ariaControls]=\"hint.ariaControls\"\r\n               [ariaCurrent]=\"hint.ariaCurrent\"\r\n               [ariaLive]=\"hint.ariaLive\"\r\n               [ariaExpanded]=\"hint.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\r\n               [tabindex]=\"hint.tabindex\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\r\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\r\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\r\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\r\n                        [role]=\"errorMessage.role\"\r\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\r\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\r\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessage.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessage.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<div [attr.id]=\"id ? id : null\" [class]=\"(classes ?  classes : 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\r\n  <div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\r\n    <ng-container *ngIf=\"getItems(); else noItems\">\r\n      <div class=\"lg:w-2/3\">\r\n        <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n        <dl>\r\n          <div *ngFor=\"let item of getItems()\"\r\n              [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\r\n              [attr.id]=\"item.id ? item.id : null\"\r\n              [attr.role]=\"item.role\"\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-disabled]=\"item.ariaDisabled\"\r\n              [attr.aria-controls]=\"item.ariaControls\"\r\n              [attr.aria-current]=\"item.ariaCurrent\"\r\n              [attr.aria-live]=\"item.ariaLive\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n            <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\r\n                [attr.id]=\"item.term.id ? item.term.id : null\"\r\n                [attr.role]=\"item.term.role\"\r\n                [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\r\n                [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\r\n                [attr.aria-label]=\"item.term.ariaLabel\"\r\n                [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item.term.ariaHidden\"\r\n                [attr.aria-disabled]=\"item.term.ariaDisabled\"\r\n                [attr.aria-controls]=\"item.term.ariaControls\"\r\n                [attr.aria-current]=\"item.term.ariaCurrent\"\r\n                [attr.aria-live]=\"item.term.ariaLive\"\r\n                [attr.aria-expanded]=\"item.term.ariaExpanded\"\r\n                [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\r\n            </dt>\r\n            <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\r\n                [attr.id]=\"item.definition.id ? item.definition.id : null\"\r\n                [attr.role]=\"item.definition.role\"\r\n                [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\r\n                [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\r\n                [attr.aria-label]=\"item.definition.ariaLabel\"\r\n                [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item.definition.ariaHidden\"\r\n                [attr.aria-disabled]=\"item.definition.ariaDisabled\"\r\n                [attr.aria-controls]=\"item.definition.ariaControls\"\r\n                [attr.aria-current]=\"item.definition.ariaCurrent\"\r\n                [attr.aria-live]=\"item.definition.ariaLive\"\r\n                [attr.aria-expanded]=\"item.definition.ariaExpanded\"\r\n                [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\r\n            </dd>\r\n          </div>\r\n        </dl>\r\n      </div>\r\n    </ng-container>\r\n    <ng-template #noItems>\r\n      <div class=\"lg:w-2/3\">\r\n        <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\r\n\r\n      <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\r\n           [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\r\n        <ng-container *ngIf=\"statusComponent\">\r\n          <ng-content select=\"desy-status\"></ng-content>\r\n        </ng-container>\r\n        <desy-status *ngIf=\"!statusComponent && status\"\r\n                     [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\r\n                     [role]=\"status.role\"\r\n                     [ariaLabel]=\"status.ariaLabel\"\r\n                     [ariaDescribedBy]=\"status.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"status.ariaLabelledBy\"\r\n                     [ariaHidden]=\"status.ariaHidden\"\r\n                     [ariaDisabled]=\"status.ariaDisabled\"\r\n                     [ariaControls]=\"status.ariaControls\"\r\n                     [ariaCurrent]=\"status.ariaCurrent\"\r\n                     [ariaLive]=\"status.ariaLive\"\r\n                     [ariaExpanded]=\"status.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"status.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"status.ariaHasPopup\"\r\n                     [tabindex]=\"status.tabindex\"></desy-status>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+                template: "<ng-template #commonHtml>\r\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\r\n     <ng-container *desyCustomInnerContent=\"{\r\n        component: titleComponent,\r\n        html: title ? title.html : null,\r\n        text: title ? title.text : null\r\n      }\"></ng-container>\r\n  </p>\r\n\r\n  <ng-container *ngIf=\"hintComponent\">\r\n      <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hintComponent && hint\">\r\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\r\n               [role]=\"hint.role\"\r\n               [ariaLabel]=\"hint.ariaLabel\"\r\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\r\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\r\n               [ariaHidden]=\"hint.ariaHidden\"\r\n               [ariaDisabled]=\"hint.ariaDisabled\"\r\n               [ariaControls]=\"hint.ariaControls\"\r\n               [ariaCurrent]=\"hint.ariaCurrent\"\r\n               [ariaLive]=\"hint.ariaLive\"\r\n               [ariaExpanded]=\"hint.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\r\n               [tabindex]=\"hint.tabindex\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\r\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\r\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\r\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\r\n                        [role]=\"errorMessage.role\"\r\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\r\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\r\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessage.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessage.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\r\n  <ng-container *ngIf=\"getItems(); else noItems\">\r\n    <div class=\"lg:w-2/3\">\r\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n      <dl>\r\n        <div *ngFor=\"let item of getItems()\"\r\n            [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\r\n            [attr.id]=\"item.id ? item.id : null\"\r\n            [attr.role]=\"item.role\"\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-disabled]=\"item.ariaDisabled\"\r\n            [attr.aria-controls]=\"item.ariaControls\"\r\n            [attr.aria-current]=\"item.ariaCurrent\"\r\n            [attr.aria-live]=\"item.ariaLive\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n          <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\r\n              [attr.id]=\"item.term.id ? item.term.id : null\"\r\n              [attr.role]=\"item.term.role\"\r\n              [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\r\n              [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\r\n              [attr.aria-label]=\"item.term.ariaLabel\"\r\n              [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\r\n              [attr.aria-hidden]=\"item.term.ariaHidden\"\r\n              [attr.aria-disabled]=\"item.term.ariaDisabled\"\r\n              [attr.aria-controls]=\"item.term.ariaControls\"\r\n              [attr.aria-current]=\"item.term.ariaCurrent\"\r\n              [attr.aria-live]=\"item.term.ariaLive\"\r\n              [attr.aria-expanded]=\"item.term.ariaExpanded\"\r\n              [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\r\n          </dt>\r\n          <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\r\n              [attr.id]=\"item.definition.id ? item.definition.id : null\"\r\n              [attr.role]=\"item.definition.role\"\r\n              [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\r\n              [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\r\n              [attr.aria-label]=\"item.definition.ariaLabel\"\r\n              [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\r\n              [attr.aria-hidden]=\"item.definition.ariaHidden\"\r\n              [attr.aria-disabled]=\"item.definition.ariaDisabled\"\r\n              [attr.aria-controls]=\"item.definition.ariaControls\"\r\n              [attr.aria-current]=\"item.definition.ariaCurrent\"\r\n              [attr.aria-live]=\"item.definition.ariaLive\"\r\n              [attr.aria-expanded]=\"item.definition.ariaExpanded\"\r\n              [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\r\n          </dd>\r\n        </div>\r\n      </dl>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #noItems>\r\n    <div class=\"lg:w-2/3\">\r\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\r\n\r\n    <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\r\n          [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\r\n      <ng-container *ngIf=\"statusComponent\">\r\n        <ng-content select=\"desy-status\"></ng-content>\r\n      </ng-container>\r\n      <desy-status *ngIf=\"!statusComponent && status\"\r\n                    [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\r\n                    [role]=\"status.role\"\r\n                    [ariaLabel]=\"status.ariaLabel\"\r\n                    [ariaDescribedBy]=\"status.ariaDescribedBy\"\r\n                    [ariaLabelledBy]=\"status.ariaLabelledBy\"\r\n                    [ariaHidden]=\"status.ariaHidden\"\r\n                    [ariaDisabled]=\"status.ariaDisabled\"\r\n                    [ariaControls]=\"status.ariaControls\"\r\n                    [ariaCurrent]=\"status.ariaCurrent\"\r\n                    [ariaLive]=\"status.ariaLive\"\r\n                    [ariaExpanded]=\"status.ariaExpanded\"\r\n                    [ariaErrorMessage]=\"status.ariaErrorMessage\"\r\n                    [ariaHasPopup]=\"status.ariaHasPopup\"\r\n                    [tabindex]=\"status.tabindex\"></desy-status>\r\n    </div>\r\n  </div>\r\n</div>"
             },] }
 ];
 StatusItemComponent.propDecorators = {
     id: [{ type: Input }],
-    classes: [{ type: Input }],
     errorId: [{ type: Input }],
     describedBy: [{ type: Input }],
     title: [{ type: Input }],
@@ -7140,6 +7474,21 @@ StatusItemComponent.propDecorators = {
     errorMessage: [{ type: Input }],
     items: [{ type: Input }],
     status: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    idData: [{ type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    tabindexData: [{ type: HostBinding, args: ['attr.tabindex',] }],
     titleComponent: [{ type: ContentChildren, args: [TitleComponent,] }],
     hintComponent: [{ type: ContentChildren, args: [HintComponent,] }],
     errorMessageComponent: [{ type: ContentChildren, args: [ErrorMessageComponent,] }],
@@ -7205,6 +7554,23 @@ class TabsComponent extends AccessibilityComponent {
         this.changeDetector = changeDetector;
         this.currentTab = 0;
     }
+    ngOnChanges(changes) {
+        this.classes = this.classes ? 'c-tabs ' + this.classes : 'c-tabs';
+        this.idData = this.id ? this.id : null;
+        this.roleData = this.role ? this.role : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.tabindexData = this.tabindex ? this.tabindex : null;
+    }
     ngAfterViewInit() {
         if (this.items) {
             const item = this.getItems();
@@ -7294,7 +7660,7 @@ class TabsComponent extends AccessibilityComponent {
 TabsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-tabs',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-tabs ' + classes : 'c-tabs')\" data-module=\"c-tabs\"\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\r\n    <ng-container *ngIf=\"title\">\r\n      <ng-container [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\r\n        <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n        <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\r\n        <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\r\n        <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\r\n        <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!title\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\r\n          <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n          <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\r\n          <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\r\n          <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\r\n          <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getItems()\">\r\n      <div class=\"c-tabs lg:flex lg:flex-wrap\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\r\n          <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n                  <button #tabSelector\r\n                          (click)=\"selectTab(i)\"\r\n                          (keydown.home)=\"focusFirstTab($event)\"\r\n                          (keydown.end)=\"focusLastTab($event)\"\r\n                          (keydown.arrowleft)=\"focusPreviousTab(i)\"\r\n                          (keydown.arrowright)=\"focusNextTab(i)\"\r\n                          class=\"c-tabs__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\"\r\n                          [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item)}\"\r\n                          [attr.id]=\"getItemId(i)\"\r\n                          [attr.role]=\"(item.role ? role : 'tab')\"\r\n                          [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\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]=\"'tab-' + getItemId(i)\"\r\n                          [attr.aria-current]=\"item.ariaCurrent\"\r\n                          [attr.aria-live]=\"item.ariaLive\"\r\n                          [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                          [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                          [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\r\n                          [attr.disabled]=\"isDisabled(item)\"\r\n                          [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\r\n                      <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\r\n                      </span>\r\n                  </button>\r\n          </ng-container>\r\n      </div>\r\n\r\n      <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\r\n           [attr.id]=\"'tab-' + getItemId(currentTab)\"\r\n           [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\r\n           [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\r\n           [attr.aria-label]=\"currentPanel?.ariaLabel\"\r\n           [attr.aria-labelledby]=\"getItemId(currentTab)\"\r\n           [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\r\n           [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\r\n           [attr.aria-controls]=\"currentPanel?.ariaControls\"\r\n           [attr.aria-current]=\"currentPanel?.ariaCurrent\"\r\n           [attr.aria-live]=\"currentPanel?.ariaLive\"\r\n           [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\r\n           [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\r\n          <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\r\n          <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n          <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\r\n          <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\r\n          <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n        </ng-container>\r\n        <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n</div>\r\n"
+                template: "<ng-container *ngIf=\"title\">\r\n  <ng-container [ngSwitch]=\"headingLevel\">\r\n    <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\r\n    <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n    <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\r\n    <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\r\n    <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\r\n    <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!title\">\r\n    <ng-container [ngSwitch]=\"headingLevel\">\r\n      <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\r\n      <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n      <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\r\n      <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\r\n      <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\r\n      <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"getItems()\">\r\n  <div class=\"c-tabs lg:flex lg:flex-wrap\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\r\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n              <button #tabSelector\r\n                      (click)=\"selectTab(i)\"\r\n                      (keydown.home)=\"focusFirstTab($event)\"\r\n                      (keydown.end)=\"focusLastTab($event)\"\r\n                      (keydown.arrowleft)=\"focusPreviousTab(i)\"\r\n                      (keydown.arrowright)=\"focusNextTab(i)\"\r\n                      class=\"c-tabs__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\"\r\n                      [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item)}\"\r\n                      [attr.id]=\"getItemId(i)\"\r\n                      [attr.role]=\"(item.role ? role : 'tab')\"\r\n                      [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\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]=\"'tab-' + getItemId(i)\"\r\n                      [attr.aria-current]=\"item.ariaCurrent\"\r\n                      [attr.aria-live]=\"item.ariaLive\"\r\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                      [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\r\n                      [attr.disabled]=\"isDisabled(item)\"\r\n                      [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\r\n                  <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\r\n                  </span>\r\n              </button>\r\n      </ng-container>\r\n  </div>\r\n\r\n  <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\r\n        [attr.id]=\"'tab-' + getItemId(currentTab)\"\r\n        [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\r\n        [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\r\n        [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\r\n        [attr.aria-label]=\"currentPanel?.ariaLabel\"\r\n        [attr.aria-labelledby]=\"getItemId(currentTab)\"\r\n        [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\r\n        [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\r\n        [attr.aria-controls]=\"currentPanel?.ariaControls\"\r\n        [attr.aria-current]=\"currentPanel?.ariaCurrent\"\r\n        [attr.aria-live]=\"currentPanel?.ariaLive\"\r\n        [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\r\n        [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\r\n        [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\r\n    <ng-container [ngSwitch]=\"headingLevel\">\r\n      <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\r\n      <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\r\n      <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n      <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\r\n      <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\r\n      <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n    </ng-container>\r\n    <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\r\n  </div>\r\n</ng-container>"
             },] }
 ];
 TabsComponent.ctorParameters = () => [
@@ -7307,11 +7673,25 @@ TabsComponent.propDecorators = {
     tabSrOnly: [{ type: ViewChild, args: ['tabSrOnly',] }],
     id: [{ type: Input }],
     idPrefix: [{ type: Input }],
-    classes: [{ type: Input }],
     headingLevel: [{ type: Input }],
     title: [{ type: Input }],
     tablistAriaLabel: [{ type: Input }],
-    items: [{ type: Input }]
+    items: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    idData: [{ type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    tabindexData: [{ type: HostBinding, args: ['attr.tabindex',] }]
 };
 class AlertService {
@@ -7408,16 +7788,61 @@ TooltipContentComponent.decorators = [
             },] }
 ];
+class PaginationItemPerPageComponent extends ContentBaseComponent {
+}
+PaginationItemPerPageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-pagination-item-perpage',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+PaginationItemPerPageComponent.propDecorators = {
+    classes: [{ type: Input }],
+    value: [{ type: Input }]
+};
+class PaginationListboxLabelComponent extends ContentBaseComponent {
+}
+PaginationListboxLabelComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-pagination-listbox-label',
+                template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+            },] }
+];
+PaginationListboxLabelComponent.propDecorators = {
+    classes: [{ type: Input }]
+};
 class PaginationComponent extends AccessibilityComponent {
     constructor() {
         super(...arguments);
         this.currentPage = 1; // == currentPageindex + 1
         this.currentPageChange = new EventEmitter();
+        this.defaultText = false;
         this.previousIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>';
         this.nextIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>';
         this.prefix = '<span class="sr-only">Página&nbsp;</span>';
     }
     ngOnChanges(changes) {
+        this.checkChanges();
+        this.classesContainer = this.classesContainer ? this.classesContainer += ' lg:flex lg:flex-wrap lg:items-center lg:gap-base' : 'lg:flex lg:flex-wrap lg:items-center lg:gap-base';
+        this.id = this.id ? this.id : null;
+    }
+    ngAfterViewInit() {
+        if (this.itemsPerPage && this.listboxItems && this.listboxItems.length > 0) {
+            let itemActive = false;
+            this.listboxItems.forEach((item) => {
+                if (this.itemsPerPage == item.value) {
+                    item.active = true;
+                    itemActive = true;
+                }
+            });
+            if (!itemActive) {
+                this.listboxItems.first.active = true;
+            }
+        }
+    }
+    checkChanges() {
         this.nPages = Math.ceil(this.totalItems / this.itemsPerPage);
         if (!this.currentPage || this.currentPage < 1 || this.currentPage > this.nPages) {
             this.currentPage = 1;
@@ -7478,28 +7903,47 @@ class PaginationComponent extends AccessibilityComponent {
         const activeItems = this.items.filter(item => item.active);
         return activeItems && activeItems.length > 0 ? activeItems[0].text : '';
     }
+    getListboxLabel() {
+        return this.listboxLabel ? this.listboxLabel : null;
+    }
+    getItemsPerPage() {
+        return this.listboxItems && this.listboxItems.length > 0 ? this.listboxItems.toArray() : null;
+    }
+    changeItemsPerPage(event) {
+        if (event && event.value) {
+            let newValue = event.value;
+            this.itemsPerPage = newValue;
+            this.buildPages();
+        }
+    }
 }
 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                    [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\" *ngIf=\"totalItems && itemsPerPage\">\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: "  <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  \r\n  <div *ngIf=\"hasSelectItemsPerPage\" class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\">\r\n    <desy-listbox \r\n      [classes]=\"'c-listbox--sm c-listbox--transparent'\" \r\n      [classesContainer]=\"'flex flex-wrap items-center gap-xs'\" \r\n      [doesChangeButtonText]=\"true\"\r\n      [items]=\"getItemsPerPage()\"\r\n      (activeItemChange)=\"changeItemsPerPage($event)\">\r\n      <desy-listbox-label [classes]=\"listboxLabel && listboxLabel.classes ? listboxLabel.classes : 'inline-block align-middle mb-0'\">\r\n          <ng-container *ngIf=\"listboxLabel\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: listboxLabel }\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!listboxLabel\">\r\n            Items por p\u00E1gina\r\n          </ng-container>\r\n      </desy-listbox-label>\r\n    </desy-listbox>\r\n  </div>\r\n  \r\n  \r\n  <p class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\" *ngIf=\"totalItems && itemsPerPage\">\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"
             },] }
 ];
 PaginationComponent.propDecorators = {
     hasSelect: [{ type: Input }],
     idPrefix: [{ type: Input }],
-    classesContainer: [{ type: Input }],
     totalItems: [{ type: Input }],
     itemsPerPage: [{ type: Input }],
     hasPrevious: [{ type: Input }],
     hasNext: [{ type: Input }],
     previousText: [{ type: Input }],
     nextText: [{ type: Input }],
+    hasSelectItemsPerPage: [{ type: Input }],
     classes: [{ type: Input }],
-    id: [{ type: Input }],
+    classesContainer: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    id: [{ type: Input }, { type: HostBinding, args: ['attr.id',] }],
+    listboxLabel: [{ type: ContentChildren, args: [PaginationListboxLabelComponent,] }],
+    listboxItems: [{ type: ContentChildren, args: [PaginationItemPerPageComponent,] }],
     currentPage: [{ type: Input }],
     currentPageChange: [{ type: Output }]
-};
+};
+__decorate([
+    DesyContentChild()
+], PaginationComponent.prototype, "listboxLabel", void 0);
 class InnerHtmlPipe {
     constructor(sanitizer) {
@@ -7813,6 +8257,19 @@ TemplateDrivenWrapperComponent.decorators = [
             },] }
 ];
+class DividerComponent extends ContentBaseComponent {
+}
+DividerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-divider',
+                template: "<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>"
+            },] }
+];
+DividerComponent.propDecorators = {
+    text: [{ type: Input }],
+    html: [{ type: Input }]
+};
 // componentes
 class DesyCommonsModule {
 }
@@ -7822,7 +8279,8 @@ DesyCommonsModule.decorators = [
                     IconComponent,
                     ContentComponent,
                     DescriptionComponent,
-                    TitleComponent
+                    TitleComponent,
+                    DividerComponent
                 ],
                 imports: [
                     CommonModule,
@@ -7833,7 +8291,8 @@ DesyCommonsModule.decorators = [
                     IconComponent,
                     ContentComponent,
                     DescriptionComponent,
-                    TitleComponent
+                    TitleComponent,
+                    DividerComponent
                 ]
             },] }
 ];
@@ -7931,6 +8390,23 @@ class TooltipComponent extends AccessibilityComponent {
         this.hasContent = true;
         this.hasIconComponentContent = true;
     }
+    ngOnChanges(changes) {
+        this.classes = this.classes ? this.classes : null;
+        this.idData = this.id ? this.id : null;
+        this.roleData = this.role ? this.role : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.tabindexData = this.tabindex ? this.tabindex : null;
+    }
     ngAfterContentInit() {
         const contentTooltip = this.tooltipContent.nativeElement;
         this.tippyProperties = {
@@ -8011,7 +8487,7 @@ TooltipComponent.KEY_CODE_ESC = 'Escape';
 TooltipComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-tooltip',
-                template: "<div [attr.id]=\"id\" [ngClass]=\"classes\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : 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  <div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\r\n       ngxTippy [tippyProps]=\"tippyProperties\"\r\n       class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n       tabindex=\"0\" role=\"button\"\r\n       [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\r\n    <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\r\n    <span *ngIf=\"iconComponent\" class=\"inline-block\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasIconComponentContent\">\r\n        <ng-container [ngSwitch]=\"iconComponent.type\">\r\n          <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\r\n        </ng-container>\r\n      </ng-container>\r\n    </span>\r\n    <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\r\n    </span>\r\n  </div>\r\n\r\n  <div #tooltipContent [attr.id]=\"getIdTooltip()\"\r\n       [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n</div>\r\n"
+                template: "<div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\r\n      ngxTippy [tippyProps]=\"tippyProperties\"\r\n      class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n      tabindex=\"0\" role=\"button\"\r\n      [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\r\n  <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\r\n  <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\r\n  <span *ngIf=\"iconComponent\" class=\"inline-block\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\r\n\r\n    <ng-container *ngIf=\"!hasIconComponentContent\">\r\n      <ng-container [ngSwitch]=\"iconComponent.type\">\r\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </span>\r\n  <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\r\n    <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\r\n  </span>\r\n</div>\r\n\r\n<div #tooltipContent [attr.id]=\"getIdTooltip()\"\r\n      [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\r\n  <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\r\n</div>\r\n"
             },] }
 ];
 TooltipComponent.ctorParameters = () => [
@@ -8026,10 +8502,24 @@ TooltipComponent.propDecorators = {
     text: [{ type: Input }],
     html: [{ type: Input }],
     complex: [{ type: Input }],
-    classes: [{ type: Input }],
     classesTooltip: [{ type: Input }],
     icon: [{ type: Input }],
-    caller: [{ type: Input }]
+    caller: [{ type: Input }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    idData: [{ type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    tabindexData: [{ type: HostBinding, args: ['attr.tabindex',] }]
 };
 __decorate([
     DesyContentChild()
@@ -8051,8 +8541,8 @@ DesyViewsModule.decorators = [
                     AccordionHeaderComponent,
                     AccordionHistoryComponent,
                     AccordionHistoryItemComponent,
-                    AccordionHistoryItemShowButtonComponent,
-                    AccordionHistoryItemHideButtonComponent,
+                    AccordionItemShowButtonComponent,
+                    AccordionItemHideButtonComponent,
                     AccordionItemComponent,
                     SpinnerComponent,
                     DetailsComponent,
@@ -8088,8 +8578,8 @@ DesyViewsModule.decorators = [
                     AccordionHeaderComponent,
                     AccordionHistoryComponent,
                     AccordionHistoryItemComponent,
-                    AccordionHistoryItemShowButtonComponent,
-                    AccordionHistoryItemHideButtonComponent,
+                    AccordionItemShowButtonComponent,
+                    AccordionItemHideButtonComponent,
                     AccordionItemComponent,
                     SpinnerComponent,
                     DetailsComponent,
@@ -8144,6 +8634,7 @@ ToggleOnStateComponent.propDecorators = {
 class ToggleComponent extends AccessibilityComponent {
     constructor() {
         super(...arguments);
+        this.cfg = true;
         this.clickEvent = new EventEmitter();
         this.pressedChange = new EventEmitter();
     }
@@ -8156,7 +8647,7 @@ class ToggleComponent extends AccessibilityComponent {
 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 -->"
+                template: "<!-- toggle -->\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          [attr.aria-pressed]=\"!isExpandible ? (pressed ? 'true' : 'false') : null\"\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]=\"isExpandible ? (pressed ? 'true' : 'false') : 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<!-- /toggle -->"
             },] }
 ];
 ToggleComponent.propDecorators = {
@@ -8164,6 +8655,8 @@ ToggleComponent.propDecorators = {
     isSwitch: [{ type: Input }],
     pressed: [{ type: Input }],
     classes: [{ type: Input }],
+    isExpandible: [{ type: Input }],
+    cfg: [{ type: Input }, { type: HostBinding, args: ['class.relative',] }],
     clickEvent: [{ type: Output }],
     pressedChange: [{ type: Output }],
     contentTemplateOnState: [{ type: ContentChildren, args: [ToggleOnStateComponent,] }],
@@ -8221,6 +8714,8 @@ DesyModalsModule.decorators = [
                     ModalComponent,
                     ModalButtonPrimaryComponent,
                     ModalButtonSecondaryComponent,
+                    ModalButtonLoaderPrimaryComponent,
+                    ModalButtonLoaderSecondaryComponent,
                     DialogComponent
                 ],
                 imports: [
@@ -8233,32 +8728,658 @@ DesyModalsModule.decorators = [
                     ModalComponent,
                     ModalButtonPrimaryComponent,
                     ModalButtonSecondaryComponent,
+                    ModalButtonLoaderPrimaryComponent,
+                    ModalButtonLoaderSecondaryComponent,
                     DialogComponent
                 ],
             },] }
 ];
-class DesyNavModule {
+class MenuNavigationSubitemComponent extends ContentBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.selected = new EventEmitter();
+        this.checkedChange = new EventEmitter();
+    }
 }
-DesyNavModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    BreadcrumbsComponent,
-                    BreadcrumbsItemComponent,
-                    ErrorSummaryComponent,
-                    ErrorSummaryItemComponent,
-                    FooterComponent,
-                    FooterMetaComponent,
-                    FooterMetaItemComponent,
-                    FooterNavigationComponent,
-                    FooterNavigationItemComponent,
-                    HeaderComponent,
-                    HeaderSubnavComponent,
-                    HeaderNavigationComponent,
-                    HeaderNavigationItemComponent,
-                    HeaderDropdownComponent,
-                    HeaderOffcanvasButtonComponent,
-                    HeaderOffcanvasComponent,
+MenuNavigationSubitemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-menu-navigation-subitem',
+                template: "<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>  "
+            },] }
+];
+MenuNavigationSubitemComponent.propDecorators = {
+    href: [{ type: Input }],
+    target: [{ type: Input }],
+    text: [{ type: Input }],
+    html: [{ type: Input }],
+    id: [{ type: Input }],
+    expanded: [{ type: Input }],
+    divider: [{ type: Input }],
+    disabled: [{ type: Input }],
+    sub: [{ type: Input }],
+    classes: [{ type: Input }],
+    active: [{ type: Input }],
+    selected: [{ type: Output }],
+    checkedChange: [{ type: Output }]
+};
+class MenuNavigationItemComponent extends ContentBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.selected = new EventEmitter();
+    }
+    getSubItems() {
+        return this.subItems.toArray();
+    }
+}
+MenuNavigationItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-menu-navigation-item',
+                template: "<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>  "
+            },] }
+];
+MenuNavigationItemComponent.propDecorators = {
+    href: [{ type: Input }],
+    target: [{ type: Input }],
+    text: [{ type: Input }],
+    html: [{ type: Input }],
+    id: [{ type: Input }],
+    expanded: [{ type: Input }],
+    divider: [{ type: Input }],
+    disabled: [{ type: Input }],
+    sub: [{ type: Input }],
+    classes: [{ type: Input }],
+    title: [{ type: Input }],
+    active: [{ type: Input }],
+    selected: [{ type: Output }],
+    subItems: [{ type: ContentChildren, args: [MenuNavigationSubitemComponent,] }]
+};
+class MenuNavigationComponent extends AccessibilityComponent {
+    constructor(changeDetectorRef) {
+        super();
+        this.changeDetectorRef = changeDetectorRef;
+        this.itemsChange = new EventEmitter();
+        this.activeItemChange = new EventEmitter();
+        this.activeSubItemChange = new EventEmitter();
+        this.cfg = true;
+        this.viewInit = false;
+        this.currentFocusItemIndex = 0;
+    }
+    ngOnChanges(changes) {
+        this.roleData = this.role ? this.role : null;
+        this.ariaLabelData = this.ariaLabel ? this.ariaLabel : null;
+        this.ariaDescribedbyData = this.ariaDescribedBy ? this.ariaDescribedBy : null;
+        this.ariaLabelledbyData = this.ariaLabelledBy ? this.ariaLabelledBy : null;
+        this.ariaHiddenData = this.ariaHidden ? this.ariaHidden : null;
+        this.ariaDisabledData = this.ariaDisabled ? this.ariaDisabled : null;
+        this.ariaControlsData = this.ariaControls ? this.ariaControls : null;
+        this.ariaCurrentData = this.ariaCurrent ? this.ariaCurrent : null;
+        this.ariaLiveData = this.ariaLive ? this.ariaLive : null;
+        this.ariaExpandedData = this.ariaExpanded ? this.ariaExpanded : null;
+        this.ariaErrormessageData = this.ariaErrorMessage ? this.ariaErrorMessage : null;
+        this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
+        this.ariaModalData = this.ariaModal ? this.ariaModal : null;
+        if (this.viewInit) {
+            this.checkChanges();
+        }
+    }
+    ngAfterViewInit() {
+        this.viewInit = true;
+        this.checkChanges();
+    }
+    checkChanges() {
+        if (!this.menuItems) {
+            return;
+        }
+        this.menuData = [];
+        this.getItems().forEach((_, index) => {
+            const itemData = {
+                open: false,
+                currentFocusSubItemIndex: 0,
+                currentFocusSubSubItemIndex: 0,
+                menuItem: this.menuItems.toArray()[index]
+            };
+            this.menuData.push(itemData);
+        });
+        if (this.viewInit) {
+            this.checkRequired();
+        }
+        const lastCurrentFocusItemIndex = this.currentFocusItemIndex;
+        const items = this.getItems();
+        if (items) {
+            while (!this.isItemFocusable(this.currentFocusItemIndex % items.length)) {
+                this.currentFocusItemIndex = (this.currentFocusItemIndex + items.length + 1) % items.length;
+                if (this.currentFocusItemIndex === lastCurrentFocusItemIndex) {
+                    break;
+                }
+            }
+        }
+    }
+    /*
+     * Eventos
+     */
+    handleMenuFocusIn() {
+        this.isFocused = true;
+        this.changeDetectorRef.detectChanges();
+    }
+    handleMenuFocusOut(event) {
+        if (!this.menunavigation.nativeElement.contains(event.relatedTarget)) {
+            this.closeMenu();
+        }
+        this.isFocused = false;
+        this.changeDetectorRef.detectChanges();
+    }
+    handleMenuItemClick(event, itemIndex) {
+        if (this.hasPopupMenu(itemIndex)) {
+            event.preventDefault();
+            const isOpen = this.menuData[itemIndex].open;
+            this.closeMenu();
+            if (!isOpen) {
+                this.openMenu(itemIndex);
+            }
+        }
+        else {
+            this.activateMenuItem(itemIndex);
+        }
+    }
+    handleMenuItemKeydown(event, itemIndex) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                if (this.hasPopupMenu(itemIndex)) {
+                    this.openMenu(itemIndex);
+                    setTimeout(() => this.focusFirstSubItem(itemIndex));
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                break;
+            case 'Escape':
+                if (this.hasPopupMenu(itemIndex)) {
+                    this.closeMenu(itemIndex);
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                this.focusNextAvailableItem(itemIndex, -1);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.focusNextAvailableItem(itemIndex, +1);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (this.hasPopupMenu(itemIndex)) {
+                    this.openMenu(itemIndex);
+                    setTimeout(() => this.focusLastSubItem(itemIndex));
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Home':
+            case 'PageUp':
+                if (this.hasPopupMenu(itemIndex)) {
+                    this.closeMenu();
+                }
+                this.focusFirstItem();
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'End':
+            case 'PageDown':
+                if (this.hasPopupMenu(itemIndex)) {
+                    this.closeMenu();
+                }
+                this.focusLastItem();
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            default:
+                if (this.isPrintableChar(event.key)) {
+                    this.focusItemByFirstChar(event.key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    handleMenuItemMouseOver(itemIndex) {
+        this.focusItem(itemIndex, true);
+    }
+    handlePopupMenuItemClick(itemIndex, subItemIndex, subSubItemIndex) {
+        this.activatePopupMenuItem(itemIndex, subItemIndex, subSubItemIndex);
+        this.focusItem(itemIndex);
+        this.closeMenu(itemIndex);
+    }
+    handlePopupMenuItemKeydown(event, itemIndex, subItemIndex, subSubItemIndex) {
+        const currentSubIndex = this.menuData[itemIndex].currentFocusSubItemIndex;
+        const currentSubSubIndex = this.menuData[itemIndex].currentFocusSubSubItemIndex;
+        const items = this.getItems();
+        switch (event.key) {
+            case ' ':
+                this.activatePopupMenuItem(itemIndex, subItemIndex, subSubItemIndex);
+                if (this.mustCloseAfterSelectPopupItem(itemIndex, subItemIndex, subSubItemIndex)) {
+                    this.closeMenu(itemIndex);
+                    this.focusItem(itemIndex);
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Enter':
+                this.activatePopupMenuItem(itemIndex, subItemIndex, subSubItemIndex);
+                this.closeMenu(itemIndex);
+                this.focusItem(itemIndex);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Escape':
+                this.closeMenu(itemIndex);
+                this.focusItem(itemIndex);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.focusNextAvailableSubItem(itemIndex, currentSubIndex, currentSubSubIndex, -1);
+                // this.focusSubItem(itemIndex, (currentSubIndex + listLength - 1) % listLength);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+                this.focusNextAvailableSubItem(itemIndex, currentSubIndex, currentSubSubIndex, +1);
+                // this.focusSubItem(itemIndex, (currentSubIndex + listLength + 1) % listLength);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                this.closeMenu(itemIndex);
+                this.focusItem((itemIndex + items.length - 1) % items.length);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.closeMenu(itemIndex);
+                this.focusItem((itemIndex + items.length + 1) % items.length);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Home':
+            case 'PageUp':
+                this.focusFirstSubItem(itemIndex);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'End':
+            case 'PageDown':
+                this.focusLastSubItem(itemIndex);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Tab':
+                this.closeMenu(itemIndex);
+                this.focusItem(itemIndex);
+                break;
+            default:
+                if (this.isPrintableChar(event.key)) {
+                    this.focusSubItemByFirstChar(itemIndex, event.key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subSubItemIndex) {
+        this.focusSubItem(itemIndex, subItemIndex, subSubItemIndex);
+    }
+    /*
+     * Comunes
+     */
+    checkRequired() {
+        const items = this.getItems();
+    }
+    activateMenuItem(itemIndex) {
+        const items = this.getItems();
+        this.activeItemChange.emit(items[itemIndex]);
+        if (items[itemIndex] instanceof MenuNavigationItemComponent) {
+            items[itemIndex].selected.emit();
+        }
+    }
+    activatePopupMenuItem(itemIndex, subItemIndex, subSubItemIndex) {
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        let item = subItems[subItemIndex];
+        this.itemsChange.emit(items);
+        this.activeSubItemChange.emit(item);
+        if (item instanceof MenuNavigationSubitemComponent) {
+            item.selected.emit();
+        }
+    }
+    mustCloseAfterSelectPopupItem(itemIndex, subItemIndex, subSubItemIndex) {
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        let item = subItems[subItemIndex];
+        return item.role !== 'menuitemcheckbox' && item.role !== 'menuitemradio';
+    }
+    openMenu(itemIndex) {
+        const wasOpened = this.menuData[itemIndex].open;
+        this.menuData[itemIndex].open = true;
+        if (wasOpened) {
+            this.activateMenuItem(itemIndex);
+        }
+    }
+    closeMenu(itemIndex) {
+        if (itemIndex !== null && itemIndex !== undefined) {
+            this.menuData[itemIndex].open = false;
+        }
+        else {
+            this.menuData.forEach(item => item.open = false);
+        }
+    }
+    hasPopupMenu(itemIndex) {
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        return items[itemIndex].sub && subItems && subItems.length > 0;
+    }
+    isPrintableChar(str) {
+        return str.length === 1 && !!str.match(/\S/);
+    }
+    /*
+     * Comunes - focus
+     */
+    focusItem(itemIndex, hover) {
+        const hasFocus = this.menunavigation.nativeElement.contains(document.activeElement);
+        const isOpen = this.menuData[this.currentFocusItemIndex].open;
+        if (!hover || hasFocus) {
+            this.menuData[itemIndex].menuItem.link.nativeElement.focus();
+        }
+        this.closeMenu();
+        if (isOpen && this.hasPopupMenu(itemIndex)) {
+            this.openMenu(itemIndex);
+        }
+        this.currentFocusItemIndex = itemIndex;
+    }
+    focusNextAvailableItem(fromItemIndex, step) {
+        let nextItem = fromItemIndex;
+        const items = this.getItems();
+        do {
+            nextItem = (nextItem + items.length + step) % items.length;
+        } while (!this.isItemFocusable(nextItem) && nextItem !== fromItemIndex);
+        if (nextItem !== fromItemIndex) {
+            this.focusItem(nextItem);
+        }
+    }
+    focusFirstItem() {
+        if (this.isItemFocusable(0)) {
+            this.focusItem(0);
+        }
+        else {
+            this.focusNextAvailableItem(0, +1);
+        }
+    }
+    focusLastItem() {
+        const items = this.getItems();
+        if (this.isItemFocusable(items.length - 1)) {
+            this.focusItem(items.length - 1);
+        }
+        else {
+            this.focusNextAvailableItem(items.length - 1, -1);
+        }
+    }
+    isItemFocusable(itemIndex) {
+        return !this.getItems()[itemIndex].disabled;
+    }
+    focusItemByFirstChar(char) {
+        const itemContents = this.menuItems.map(menuItem => menuItem.itemContentWrapper.nativeElement.textContent);
+        let index = this.currentFocusItemIndex;
+        let foundIndex = -1;
+        do {
+            index = (index + itemContents.length + 1) % itemContents.length;
+            if (itemContents[index] && itemContents[index].trim().substr(0, 1).toLowerCase() === char.toLowerCase()
+                && this.isItemFocusable(index)) {
+                foundIndex = index;
+            }
+        } while (foundIndex === -1 && index !== this.currentFocusItemIndex);
+        if (foundIndex >= 0) {
+            this.focusItem(foundIndex);
+        }
+    }
+    focusSubItem(itemIndex, subItemIndex, subSubItemIndex) {
+        if (this.menuData[itemIndex].menuItem.popupMenuItems.length > 0) {
+            const menuDataIndex = subItemIndex;
+            this.menuData[itemIndex].currentFocusSubItemIndex = subItemIndex;
+            this.menuData[itemIndex].currentFocusSubSubItemIndex = subSubItemIndex;
+            const elem = this.menuData[itemIndex].menuItem.popupMenuItems.toArray()[menuDataIndex].nativeElement;
+            if (elem) {
+                elem.focus();
+            }
+            else {
+                console.error('No subitem to focus');
+            }
+        }
+        else {
+            console.error('No subitems');
+        }
+    }
+    focusNextAvailableSubItem(itemIndex, fromItemSubIndex, fromItemSubSubIndex, step) {
+        let nextSubIndex = fromItemSubIndex;
+        let nextSubSubIndex = fromItemSubSubIndex;
+        let allSubItemsChecked;
+        const items = this.getItems();
+        do {
+            const nextIndexes = this.getNextSubItemIndexes(items, itemIndex, nextSubIndex, nextSubSubIndex, step);
+            nextSubIndex = nextIndexes.subIndex;
+            nextSubSubIndex = nextIndexes.subSubIndex;
+            allSubItemsChecked = (fromItemSubIndex === nextSubIndex && fromItemSubSubIndex === nextSubSubIndex);
+        } while (!this.isSubItemFocusable(itemIndex, nextSubIndex, nextSubSubIndex) && !allSubItemsChecked);
+        if (!allSubItemsChecked) {
+            this.focusSubItem(itemIndex, nextSubIndex, nextSubSubIndex);
+        }
+    }
+    focusFirstSubItem(itemIndex) {
+        let firstSubSubItem = null;
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        if (subItems && subItems.length > 0) {
+            firstSubSubItem = 0;
+        }
+        if (this.isSubItemFocusable(itemIndex, 0, firstSubSubItem)) {
+            this.focusSubItem(itemIndex, 0, firstSubSubItem);
+        }
+        else {
+            this.focusNextAvailableSubItem(itemIndex, 0, firstSubSubItem, +1);
+        }
+    }
+    focusLastSubItem(itemIndex) {
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        const lastItemIndex = subItems.length - 1;
+        const lastItem = subItems[lastItemIndex];
+        let lastSubSubItem = null;
+        if (this.isSubItemFocusable(itemIndex, lastItemIndex, lastSubSubItem)) {
+            this.focusSubItem(itemIndex, lastItemIndex, lastSubSubItem);
+        }
+        else {
+            this.focusNextAvailableSubItem(itemIndex, lastItemIndex, lastSubSubItem, -1);
+        }
+    }
+    isSubItemFocusable(itemIndex, subItemIndex, subSubItemIndex) {
+        const items = this.getItems();
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        let item = subItems[subItemIndex];
+        let isFocusable = false;
+        if (item.role !== 'separator' && item.role !== 'none') {
+            isFocusable = true;
+        }
+        return isFocusable;
+    }
+    focusSubItemByFirstChar(itemIndex, char) {
+        const itemContents = this.menuItems.toArray()[itemIndex].popupMenuItems.map(menuItem => menuItem.nativeElement.textContent);
+        let subItemIndex = this.menuData[itemIndex].currentFocusSubItemIndex;
+        let subSubItemIndex = this.menuData[itemIndex].currentFocusSubSubItemIndex;
+        let foundSubIndex = -1;
+        let foundSubSubIndex = null;
+        let allSubItemsChecked = false;
+        const items = this.getItems();
+        do {
+            const nextIndexes = this.getNextSubItemIndexes(items, itemIndex, subItemIndex, subSubItemIndex, +1);
+            subItemIndex = nextIndexes.subIndex;
+            subSubItemIndex = nextIndexes.subSubIndex;
+            const index = subItemIndex;
+            if (itemContents[index] && itemContents[index].trim().substr(0, 1).toLowerCase() === char.toLowerCase()
+                && this.isSubItemFocusable(itemIndex, subItemIndex, subSubItemIndex)) {
+                foundSubIndex = subItemIndex;
+                foundSubSubIndex = subSubItemIndex;
+            }
+            allSubItemsChecked = (this.menuData[itemIndex].currentFocusSubItemIndex === subItemIndex
+                && this.menuData[itemIndex].currentFocusSubSubItemIndex === subSubItemIndex);
+        } while (foundSubIndex === -1 && !allSubItemsChecked);
+        if (foundSubIndex >= 0) {
+            this.focusSubItem(itemIndex, foundSubIndex, foundSubSubIndex);
+        }
+    }
+    /*
+     * Metodos para facilitar contenido
+     */
+    getItems() {
+        let items;
+        if (this.itemComponentList && this.itemComponentList.length > 0) {
+            items = this.itemComponentList.toArray();
+        }
+        else {
+            items = this.items;
+        }
+        return items;
+    }
+    getItemSubitems(item) {
+        let subItems = [];
+        if (item instanceof MenuNavigationItemComponent) {
+            subItems = item.getSubItems();
+        }
+        if (!subItems || subItems.length === 0) {
+            subItems = item.sub ? item.sub.items : [];
+        }
+        return subItems;
+    }
+    getNextSubItemIndexes(items, itemIndex, nextSubIndex, nextSubSubIndex, step) {
+        const subItems = this.getItemSubitems(items[itemIndex]);
+        let checkNextSubItem = true;
+        if (checkNextSubItem) {
+            nextSubIndex = (nextSubIndex + step + subItems.length) % subItems.length;
+        }
+        return { subIndex: nextSubIndex, subSubIndex: nextSubSubIndex };
+    }
+    getIdPrefix() {
+        return this.idPrefix ? this.idPrefix : this.id + 'menunavigation-item';
+    }
+    getItemId(item, index) {
+        let id;
+        if (item) {
+            if (item.id) {
+                id = item.id;
+            }
+            else {
+                id = index === 0 ? this.getIdPrefix() : `${this.getIdPrefix()}-${index}`;
+            }
+        }
+        return id;
+    }
+    getPopupStyle(itemIndex) {
+        let style = {};
+        if (this.menuData && itemIndex < this.menuData.length) {
+            const menuItem = this.menuData[itemIndex].menuItem;
+            const rect = menuItem.link.nativeElement.getBoundingClientRect();
+            if (this.menuData[itemIndex].open) {
+                style = {
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    zIndex: 100,
+                    display: 'block'
+                };
+            }
+            else {
+                style = {
+                    zIndex: 0,
+                    display: 'none'
+                };
+            }
+        }
+        return style;
+    }
+    getSubItemId(item, index, parentId) {
+        let id;
+        if (item) {
+            if (item.id) {
+                id = item.id;
+            }
+            else {
+                id = index === 0 ? `sub-${parentId}` : `sub-${parentId}-${index}`;
+            }
+        }
+        return id;
+    }
+}
+MenuNavigationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-menu-navigation',
+                template: "<ul #menunavigation [id]=\"id + '-menu-navigation'\" class=\"flex flex-wrap gap-base\"\r\n(focusin)=\"handleMenuFocusIn()\"\r\n(focusout)=\"handleMenuFocusOut($event)\"\r\n[ngClass]=\"{ 'focus': isFocused }\"\r\n[attr.aria-label]=\"ariaLabel ? ariaLabel : 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.href\" #link\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      role=\"item.disabled ? link : null\"\r\n      [id]=\"getItemId(item, itemIndex)\"\r\n      [target]=\"item.target\"\r\n      [href]=\"item.href\"\r\n      [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\r\n      [ngClass]=\"{'c-menu-navigation__button--disabled': item.disabled, 'c-menu-navigation__button--primary': item.active, 'c-menu-navigation__button--has-selection': 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.disabled ? 'page' : (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 pointer-events-none\" #itemContentWrapper>\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n      </span>          \r\n  </a>\r\n  <button *ngIf=\"!item.href\" #link #itemContentWrapper\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      aria-expanded=\"item.sub ? true : false\"\r\n      aria-controls=\"item.sub ? id + '-sub-list' : ''\"\r\n      [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\r\n      [ngClass]=\"{'c-menu-navigation__button--disabled': item.disabled, 'c-menu-navigation__button--primary': item.active, 'c-menu-navigation__button--has-selection': 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 *ngIf=\"item.active\" class=\"sr-only\">Item activo: </span>\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate pointer-events-none\" #itemContentWrapper>\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n            </span>\r\n          <svg *ngIf=\"item.sub\" class=\"inline-block -mr-2  align-middle -my-px pointer-events-none\" 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\r\n  <div *ngIf=\"item.sub && getItemSubitems(item)\" class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\r\n      <ul  [id]=\"id + '-sub-list'\" [ngStyle]=\"getPopupStyle(itemIndex)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n      class=\"item.sub.classes ? item.sub.classes : 'c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm'\"\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\">\t\t\t\t\r\n            <li #popupMenuItem *ngIf=\"subItem.href\" role=\"none\" tabindex=\"-1\"\r\n            class=\"focus:bg-primary-base focus:text-white focus:outline-none\"\r\n                [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n              <span *ngIf=\"subItem.active\" id=\"subItem.id\" #itemContentWrapper \r\n                  [class]=\"['flex items-center px-base py-sm text-sm font-semibold cursor-pointer hover:bg-primary-base hover:text-white', subItem.classes] | makeHtmlList\" \r\n                  aria-current=\"page\"\r\n                  \r\n                  [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (subItem.ariaLabel ? subItem.ariaLabel : null)\"\r\n                  [attr.aria-describedby]=\"subItem.ariaDescribedBy ? subItem.ariaDescribedBy : null\"\r\n                  [attr.aria-labelledby]=\"subItem.ariaLabelledBy ? subItem.ariaLabelledBy : null\"\r\n                  [attr.aria-hidden]=\"subItem.ariaHidden ? subItem.ariaHidden : null\"\r\n                  [attr.aria-disabled]=\"subItem.ariaDisabled ? subItem.ariaDisabled : null\"\r\n                  [attr.aria-controls]=\"subItem.ariaControls ? subItem.ariaControls : null\"\r\n                  [attr.aria-current]=\"subItem.ariaCurrent ? subItem.ariaCurrent : null\"\r\n                  [attr.aria-live]=\"subItem.ariaLive ? subItem.ariaLive : null\"\r\n                  [attr.aria-expanded]=\"!!(menuData && menuData[subItemIndex].open)\"\r\n                  [attr.aria-errormessage]=\"subItem.ariaErrorMessage ? subItem.ariaErrorMessage : null\"\r\n                  [attr.aria-haspopup]=\"subItem.ariaHasPopup ? subItem.ariaHasPopup : null\"\r\n                  [attr.aria-modal]=\"subItem.ariaModal ? subItem.ariaModal : null\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                      <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </span>\r\n              \r\n              <a *ngIf=\"!subItem.active\" #itemContentWrapper\r\n                  [href]=\"subItem.href\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  (desyAttributeChange)=\"checkChanges()\"\r\n                  [class]=\"['flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', subItem.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'pointer-events-none': subItem.disabled}\"\r\n                  tabindex=\"subItem.disabled ? -1 : null\"\r\n                  target = \"subItem.target\">\r\n                  <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper>\r\n                      <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n                  </span>\r\n                  <svg *ngIf=\"subItem.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 #popupMenuItem *ngIf=\"!subItem.href\" role=\"none\" tabindex=\"-1\"\r\n                [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                class=\"focus:bg-primary-base focus:text-white focus:outline-none\"\r\n                (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <span [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, subItemIndex))\"\r\n                  class=\"flex items-center px-base py-sm text-sm cursor-pointer hover:bg-primary-base hover:text-white\"\r\n                  [ngClass]=\"{'font-bold': subItem.active, 'pointer-events-none': subItem.disabled}\">\r\n                      <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n                  </span>\r\n                  <svg *ngIf=\"subItem.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            </li>\r\n            \r\n            <li *ngIf=\"subItem.divider\" class=\"my-sm border-b border-neutral-base\">\r\n              <div class=\"sr-only\">Separador</div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n  </div>\r\n</li>\r\n<li #popupMenuItem *ngIf=\"item.divider\" class=\"item.divider.classes\" role=\"presentation\" aria-hidden=\"true\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item.divider, html: item.divider.html, text: item.divider.text}\"></ng-container>\r\n</li>\r\n</ng-container>\r\n</ul>\r\n"
+            },] }
+];
+MenuNavigationComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+MenuNavigationComponent.propDecorators = {
+    idPrefix: [{ type: Input }],
+    items: [{ type: Input }],
+    itemsChange: [{ type: Output }],
+    activeItemChange: [{ type: Output }],
+    activeSubItemChange: [{ type: Output }],
+    menunavigation: [{ type: ViewChild, args: ['menunavigation', { read: ElementRef },] }],
+    menuItems: [{ type: ViewChildren, args: [MenubaritemDirective,] }],
+    itemComponentList: [{ type: ContentChildren, args: [MenuNavigationItemComponent,] }],
+    classes: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    cfg: [{ type: HostBinding, args: ['class.c-menu-navigation',] }],
+    id: [{ type: Input }, { type: HostBinding, args: ['attr.id',] }],
+    roleData: [{ type: HostBinding, args: ['attr.role',] }],
+    ariaLabelData: [{ type: HostBinding, args: ['attr.aria-label',] }],
+    ariaDescribedbyData: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
+    ariaLabelledbyData: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
+    ariaHiddenData: [{ type: HostBinding, args: ['attr.aria-hidden',] }],
+    ariaDisabledData: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    ariaControlsData: [{ type: HostBinding, args: ['attr.aria-controls',] }],
+    ariaCurrentData: [{ type: HostBinding, args: ['attr.aria-current',] }],
+    ariaLiveData: [{ type: HostBinding, args: ['attr.aria-live',] }],
+    ariaExpandedData: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    ariaErrormessageData: [{ type: HostBinding, args: ['attr.aria-errormessage',] }],
+    ariaHaspopupData: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    ariaModalData: [{ type: HostBinding, args: ['attr.aria-modal',] }]
+};
+class DesyNavModule {
+}
+DesyNavModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    BreadcrumbsComponent,
+                    BreadcrumbsItemComponent,
+                    ErrorSummaryComponent,
+                    ErrorSummaryItemComponent,
+                    FooterComponent,
+                    FooterMetaComponent,
+                    FooterMetaItemComponent,
+                    FooterNavigationComponent,
+                    FooterNavigationItemComponent,
+                    HeaderComponent,
+                    HeaderSubnavComponent,
+                    HeaderNavigationComponent,
+                    HeaderNavigationItemComponent,
+                    HeaderDropdownComponent,
+                    HeaderOffcanvasButtonComponent,
+                    HeaderOffcanvasComponent,
                     HeaderOffcanvasCloseButtonComponent,
                     MenuHorizontalComponent,
                     MenuHorizontalItemComponent,
@@ -8276,7 +9397,10 @@ DesyNavModule.decorators = [
                     NotificationItemComponent,
                     SkipLinkComponent,
                     NavItemComponent,
+                    MenuNavigationComponent,
                     MenubaritemDirective,
+                    MenuNavigationItemComponent,
+                    MenuNavigationSubitemComponent,
                 ],
                 imports: [
                     CommonModule,
@@ -8317,7 +9441,11 @@ DesyNavModule.decorators = [
                     NotificationComponent,
                     NotificationItemComponent,
                     NavItemComponent,
-                    SkipLinkComponent
+                    SkipLinkComponent,
+                    MenuNavigationComponent,
+                    MenuNavigationSubitemComponent,
+                    MenuNavigationItemComponent,
+                    MenuNavigationSubitemComponent,
                 ]
             },] }
 ];
@@ -8414,6 +9542,7 @@ DesyTablesModule.decorators = [
                     TableAdvancedHeaderCellComponent,
                     TableAdvancedRowComponent,
                     TableAdvancedRowCellComponent,
+                    TableAdvancedSelectComponent,
                     FocusClickedCellDirective,
                     CellDirective,
                     RowDirective,
@@ -8436,7 +9565,8 @@ DesyTablesModule.decorators = [
                     TableAdvancedHeaderComponent,
                     TableAdvancedHeaderCellComponent,
                     TableAdvancedRowComponent,
-                    TableAdvancedRowCellComponent
+                    TableAdvancedRowCellComponent,
+                    TableAdvancedSelectComponent
                 ]
             },] }
 ];
@@ -8446,7 +9576,9 @@ class DesyPaginationModule {
 DesyPaginationModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    PaginationComponent
+                    PaginationComponent,
+                    PaginationListboxLabelComponent,
+                    PaginationItemPerPageComponent
                 ],
                 imports: [
                     CommonModule,
@@ -8455,7 +9587,9 @@ DesyPaginationModule.decorators = [
                     DesyButtonsModule
                 ],
                 exports: [
-                    PaginationComponent
+                    PaginationComponent,
+                    PaginationListboxLabelComponent,
+                    PaginationItemPerPageComponent
                 ]
             },] }
 ];
@@ -8497,5 +9631,5 @@ DesyAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { AccordionComponent, AccordionHeaderComponent, AccordionHistoryComponent, AccordionHistoryItemComponent, AccordionHistoryItemHideButtonComponent, AccordionHistoryItemShowButtonComponent, 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, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, ExternalHrefPipe as ɵba, AttributeChangeDirective as ɵbb, InnerContentDirective as ɵbc, ClickOutsideDirective as ɵbd, ContentChangeDirective 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, MediaObjectFigureComponent as ɵq, TabItemComponent as ɵr, PanelComponent as ɵs, ToggleComponent as ɵt, ToggleOnStateComponent as ɵu, ToggleOffStateComponent as ɵv, SharedModule as ɵw, TextOrHtmlRequiredComponent as ɵx, InnerHtmlPipe as ɵy, MakeHtmlListPipe as ɵz };
+export { AccordionComponent, AccordionHeaderComponent, AccordionHistoryComponent, AccordionHistoryItemComponent, AccordionItemComponent, AccordionItemHideButtonComponent, AccordionItemShowButtonComponent, 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, ContentBaseComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, ToggleComponent as ɵba, ToggleOnStateComponent as ɵbb, ToggleOffStateComponent as ɵbc, SharedModule as ɵbd, TextOrHtmlRequiredComponent as ɵbe, InnerHtmlPipe as ɵbf, MakeHtmlListPipe as ɵbg, ExternalHrefPipe as ɵbh, AttributeChangeDirective as ɵbi, InnerContentDirective as ɵbj, ClickOutsideDirective as ɵbk, ContentChangeDirective as ɵbl, CustomInnerContentDirective as ɵbm, TooltipComponent as ɵbn, TemplateDrivenWrapperComponent as ɵbo, DateInputDividerComponent as ɵbp, DateInputDayComponent as ɵbq, DateInputMonthComponent as ɵbr, DateInputYearComponent as ɵbs, DividerComponent as ɵbt, MenuNavigationComponent as ɵbu, MenuNavigationItemComponent as ɵbv, MenuNavigationSubitemComponent as ɵbw, FocusClickedCellDirective as ɵbx, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, AccessibilityComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, ITreeItem as ɵk, TreeCheckboxComponent as ɵl, ModalButtonLoaderPrimaryComponent as ɵm, ModalButtonLoaderSecondaryComponent as ɵn, HeaderNavigationItemComponent as ɵo, MenubaritemDirective as ɵp, TableAdvancedSelectComponent as ɵq, RowDirective as ɵr, CellDirective as ɵs, MediaObjectFigureComponent as ɵt, TabItemComponent as ɵu, PanelComponent as ɵv, PaginationListboxLabelComponent as ɵw, ContentBaseComponent as ɵx, AccessibilityComponent as ɵy, PaginationItemPerPageComponent as ɵz };
 //# sourceMappingURL=desy-angular.js.map