desy-angular 3.0.0 → 5.0.2

package/bundles/desy-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/animations'), require('@angular/cdk/a11y'), require('@angular/common'), require('@angular/router'), require('@angular/platform-browser'), require('ngx-tippy-wrapper'), require('@angular/platform-browser/animations')) :
-    typeof define === 'function' && define.amd ? define('desy-angular', ['exports', '@angular/core', '@angular/forms', '@angular/animations', '@angular/cdk/a11y', '@angular/common', '@angular/router', '@angular/platform-browser', 'ngx-tippy-wrapper', '@angular/platform-browser/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['desy-angular'] = {}, global.ng.core, global.ng.forms, global.ng.animations, global.ng.cdk.a11y, global.ng.common, global.ng.router, global.ng.platformBrowser, global.ngxTippyWrapper, global.ng.platformBrowser.animations));
-}(this, (function (exports, i0, forms, animations, a11y, common, router, platformBrowser, ngxTippyWrapper, animations$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/animations'), require('@angular/cdk/a11y'), require('@angular/common'), require('@angular/router'), require('@angular/platform-browser'), require('ngx-tippy-wrapper')) :
+    typeof define === 'function' && define.amd ? define('desy-angular', ['exports', '@angular/core', '@angular/forms', '@angular/animations', '@angular/cdk/a11y', '@angular/common', '@angular/router', '@angular/platform-browser', 'ngx-tippy-wrapper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['desy-angular'] = {}, global.ng.core, global.ng.forms, global.ng.animations, global.ng.cdk.a11y, global.ng.common, global.ng.router, global.ng.platformBrowser, global.ngxTippyWrapper));
+}(this, (function (exports, i0, forms, animations, a11y, common, router, platformBrowser, ngxTippyWrapper) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -488,21 +488,11 @@
         __extends(ButtonComponent, _super);
         function ButtonComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
             _this.clickEvent = new i0.EventEmitter();
             _this.avoidingDoubleClick = false;
             return _this;
         }
-        ButtonComponent.prototype.ngOnInit = function () {
-            //this.required();
-        };
-        ButtonComponent.prototype.ngOnChanges = function (changes) {
-            //this.required();
-        };
-        ButtonComponent.prototype.required = function () {
-            if (this.getElement() !== this.staticElementTypeInput) {
-                //textOrHtmlRequiredFunction(this.text, this.html);
-            }
-        };
         ButtonComponent.prototype.onClick = function (event) {
             var _this = this;
             if (this.preventDoubleClick) {
@@ -571,19 +561,22 @@
             configurable: true
         });
         return ButtonComponent;
-    }(AccessibilityAndContentRequiredComponent));
+    }(AccessibilityComponent));
     ButtonComponent.ELEMENT_A = 'a';
     ButtonComponent.ELEMENT_BUTTON = 'button';
     ButtonComponent.ELEMENT_INPUT = 'input';
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-button',
-                    template: "<ng-template #contentTemplate>\r\n   <ng-content></ng-content>\r\n</ng-template>\r\n<!-- button -->\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\r\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n        [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></a>\r\n\r\n     <a *ngIf=\"!routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [href]=\"href | externalHref\"\r\n        [attr.target]=\"target ? target : null\"\r\n        [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></a>\r\n\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n          [class]=\"getClassNames()\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></button>\r\n\r\n  <input *ngSwitchCase=\"staticElementTypeInput\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [value]=\"text ? text : null\"\r\n         [attr.disabled]=\"isDisabled()\"\r\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n         [attr.type]=\"type ? type : 'submit'\"\r\n         [class]=\"getClassNames()\"\r\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n</ng-container>\r\n\r\n<!-- /button -->\r\n"
+                    template: "<ng-template #contentTemplate>\r\n   <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\r\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\r\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n     </a>\r\n\r\n     <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n        [href]=\"href | externalHref\"\r\n        [attr.target]=\"target ? target : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n        [attr.role]=\"role ? role : 'button'\"\r\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n        [class]=\"getClassNames()\"\r\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\r\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n     </a>\r\n\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n          [class]=\"getClassNames()\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n  </button>\r\n\r\n  <input *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\r\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [value]=\"text ? text : null\"\r\n         [attr.disabled]=\"isDisabled()\"\r\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n         [attr.type]=\"type ? type : 'submit'\"\r\n         [class]=\"getClassNames()\"\r\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n</ng-container>\r\n"
                 },] }
     ];
     ButtonComponent.propDecorators = {
+        hostTabIndex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
         id: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
+        html: [{ type: i0.Input }],
+        text: [{ type: i0.Input }],
         element: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
@@ -600,7 +593,9 @@
     var ButtonLoaderComponent = /** @class */ (function (_super) {
         __extends(ButtonLoaderComponent, _super);
         function ButtonLoaderComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
+            return _this;
         }
         ButtonLoaderComponent.prototype.getClassNames = function () {
             var classNames = 'c-button-loader relative';
@@ -635,10 +630,11 @@
     ButtonLoaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-button-loader',
-                    template: "<ng-template #spinnerTemplate>\r\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\r\n    <desy-spinner [text]=\"getSpinnerText()\" [classes]=\"loaderClasses\" ></desy-spinner>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #successTemplate>\r\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\r\n    <p class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</p>\r\n    <span aria-hidden=\"true\">\u2713</span>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n<!-- button-loader -->\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n    <a *ngIf=\"routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n      [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n\r\n    <a *ngIf=\"!routerLink\" data-module=\"c-button\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\r\n      [attr.tabindex]=\"isDisabled() ? -1 : null\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"(role ? role : null)\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [class]=\"getClassNames()\">\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n  </button>\r\n\r\n  <div *ngSwitchCase=\"staticElementTypeInput\" data-module=\"c-button\" (click)=\"onClick($event)\"\r\n       [attr.name]=\"name ? name : null\"\r\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n       [attr.disabled]=\"isDisabled()\"\r\n       [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n       [attr.role]=\"(role ? role : null)\"\r\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n       [class]=\"getClassNames()\"\r\n       [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\">\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\r\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" class=\"bg-transparent font-semibold\">\r\n    </span>\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n  </div>\r\n</ng-container>\r\n<!-- /button-loader -->\r\n"
+                    template: "<ng-template #spinnerTemplate>\r\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\r\n    <desy-spinner [text]=\"getSpinnerText()\" [classes]=\"loaderClasses\" ></desy-spinner>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #successTemplate>\r\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\r\n    <p class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</p>\r\n    <span aria-hidden=\"true\">\u2713</span>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"getElement()\">\r\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\r\n    <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n\r\n    <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\r\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\r\n      role=\"button\"\r\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [class]=\"getClassNames()\">\r\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n    </a>\r\n  </ng-container>\r\n\r\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\r\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n          [attr.name]=\"name ? name : null\"\r\n          [attr.value]=\"value ? value : null\"\r\n          [attr.disabled]=\"isDisabled()\"\r\n          [attr.role]=\"(role ? role : null)\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\r\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n          [attr.type]=\"type ? type : null\"\r\n          [class]=\"getClassNames()\">\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\r\n  </button>\r\n\r\n  <div *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\r\n       [attr.name]=\"name ? name : null\"\r\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\r\n       [attr.disabled]=\"isDisabled()\"\r\n       [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n       [attr.role]=\"(role ? role : null)\"\r\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n       [class]=\"getClassNames()\"\r\n       [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\">\r\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\r\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" class=\"bg-transparent font-semibold\">\r\n    </span>\r\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\r\n  </div>\r\n</ng-container>\r\n"
                 },] }
     ];
     ButtonLoaderComponent.propDecorators = {
+        hostTabIndex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
         loaderText: [{ type: i0.Input }],
         loaderClasses: [{ type: i0.Input }],
         state: [{ type: i0.Input }],
@@ -704,101 +700,100 @@
         function DropdownComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.clickEvent = new i0.EventEmitter();
-            _this.show = false;
+            _this.isOpen = false;
             _this.clickOutsideEnabled = false;
             return _this;
         }
         DropdownComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                var contentTooltip;
-                if (_this.dropdownContent && _this.dropdownContent.nativeElement) {
-                    contentTooltip = _this.dropdownContent.nativeElement;
-                    contentTooltip.style.display = 'block';
-                    _this.tippyProperties = {
-                        placement: 'bottom-start',
-                        inlinePositioning: true,
-                        content: contentTooltip,
-                        allowHTML: true,
-                        trigger: 'click',
-                        hideOnClick: true,
-                        interactive: true,
-                        arrow: false,
-                        offset: [0, -10],
-                        theme: '',
-                        plugins: [{
-                                name: 'hideOnEsc',
-                                defaultValue: true,
-                                fn: function (_a) {
-                                    var hide = _a.hide;
-                                    function onKeyDown(event) {
-                                        if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                                            hide();
-                                        }
-                                    }
-                                    return {
-                                        onShow: function () {
-                                            document.addEventListener('keydown', onKeyDown);
-                                        },
-                                        onHide: function () {
-                                            document.removeEventListener('keydown', onKeyDown);
-                                        },
-                                    };
-                                },
-                            }],
-                        role: false,
-                        aria: {
-                            content: 'auto',
-                        },
-                        onShown: function (instance) {
-                            var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
-                            if (firstFocusable) {
-                                setTimeout(function () { return firstFocusable.focus(); });
+            var contentTooltip;
+            if (this.dropdownContent && this.dropdownContent.nativeElement) {
+                contentTooltip = this.dropdownContent.nativeElement;
+                contentTooltip.style.display = 'block';
+                this.tippyProperties = {
+                    placement: 'bottom-start',
+                    inlinePositioning: true,
+                    content: contentTooltip,
+                    allowHTML: true,
+                    trigger: 'click',
+                    hideOnClick: true,
+                    interactive: true,
+                    arrow: false,
+                    offset: [0, -10],
+                    theme: '',
+                    plugins: [
+                        {
+                            name: 'hideOnPopperBlur',
+                            defaultValue: true,
+                            fn: function (instance) {
+                                return {
+                                    onCreate: function () {
+                                        instance.popper.addEventListener('focusout', function (event) {
+                                            if (instance.props.hideOnPopperBlur &&
+                                                event.relatedTarget &&
+                                                !instance.popper.contains(event.relatedTarget)) {
+                                                instance.hide();
+                                            }
+                                        });
+                                    },
+                                };
                             }
+                        },
+                        {
+                            name: 'hideOnEsc',
+                            defaultValue: true,
+                            fn: function (_a) {
+                                var hide = _a.hide;
+                                function onKeyDown(event) {
+                                    if (event.key === DropdownComponent.KEY_CODE_ESC) {
+                                        hide();
+                                    }
+                                }
+                                return {
+                                    onShow: function () {
+                                        document.addEventListener('keydown', onKeyDown);
+                                    },
+                                    onHide: function () {
+                                        document.removeEventListener('keydown', onKeyDown);
+                                    },
+                                };
+                            },
                         }
-                    };
-                }
-            });
-        };
-        DropdownComponent.prototype.ngOnChanges = function (changes) {
-            if (this.isDisabled()) { // se pone disable se cierra el dropdown
-                this.closeDropdown();
+                    ],
+                    role: false,
+                    aria: {
+                        content: 'auto',
+                    },
+                    onShown: function (instance) {
+                        var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
+                        if (firstFocusable) {
+                            firstFocusable.focus();
+                        }
+                    }
+                };
             }
         };
         DropdownComponent.prototype.onClick = function (event) {
             if (!this.isDisabled()) {
-                this.toggleDropdown();
                 this.clickEvent.emit(event);
             }
         };
-        DropdownComponent.prototype.toggleDropdown = function () {
-            var _this = this;
-            this.show = !this.show;
-            setTimeout(function () { return _this.clickOutsideEnabled = _this.show; });
-        };
-        DropdownComponent.prototype.closeDropdown = function () {
-            this.show = false;
-            this.clickOutsideEnabled = false;
+        DropdownComponent.prototype.setOpen = function (isOpen) {
+            this.isOpen = isOpen;
         };
         DropdownComponent.prototype.isDisabled = function () {
             return this.disabled ? true : null;
         };
-        DropdownComponent.prototype.onKeyDown = function (event) {
-            if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                this.closeDropdown();
-            }
-        };
         return DropdownComponent;
     }(AccessibilityAndContentRequiredComponent));
     DropdownComponent.KEY_CODE_ESC = 'Escape';
     DropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-dropdown',
-                    template: "<!-- dropdown -->\r\n<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button *ngIf=\"tippyProperties\" aria-haspopup=\"true\" (click)=\"onClick($event)\" ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"show\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>    \r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"closeDropdown()\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n<!-- /dropdown -->\r\n"
+                    template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\"\r\n     (desyContentEmpty)=\"setOpen(false)\" (desyContentNotEmpty)=\"setOpen(true)\">\r\n  <button #desyContentEmptyIgnore (click)=\"onClick($event)\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          aria-haspopup=\"true\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" #desyContentEmptyIgnore class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
                 },] }
     ];
     DropdownComponent.propDecorators = {
-        dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef },] }],
+        dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef, static: true },] }],
         id: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         hiddenText: [{ type: i0.Input }],
@@ -806,8 +801,7 @@
         classesTooltip: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         caller: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }],
-        onKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+        clickEvent: [{ type: i0.Output }]
     };
 
     /**
@@ -831,28 +825,21 @@
         return StringUtils;
     }());
 
-    var ListboxLabelComponent = /** @class */ (function () {
+    var ListboxLabelComponent = /** @class */ (function (_super) {
+        __extends(ListboxLabelComponent, _super);
         function ListboxLabelComponent() {
-            this.isInit = false;
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        ListboxLabelComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.isInit = !!_this.content; });
-        };
-        ListboxLabelComponent.prototype.getContent = function () {
-            return this.isInit ? this.content : null;
-        };
         return ListboxLabelComponent;
-    }());
+    }(ContentBaseComponent));
     ListboxLabelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-listbox-label',
-                    template: "<ng-template #childComponentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
                 },] }
     ];
     ListboxLabelComponent.propDecorators = {
-        classes: [{ type: i0.Input }],
-        content: [{ type: i0.ViewChild, args: ['childComponentTemplate',] }]
+        classes: [{ type: i0.Input }]
     };
 
     var ListboxItemComponent = /** @class */ (function (_super) {
@@ -929,54 +916,72 @@
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.itemsChange = new i0.EventEmitter();
             _this.activeItemChange = new i0.EventEmitter();
-            _this.isListVisible = false;
+            _this.isListVisible = false; // Indica si la lista se está mostrando
             return _this;
         }
         ListboxComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                if (_this.listboxContent && _this.listboxContent.nativeElement) {
-                    var contentTooltip = _this.listboxContent.nativeElement;
-                    _this.tippyProperties = {
-                        placement: 'bottom-start',
-                        inlinePositioning: true,
-                        content: contentTooltip,
-                        allowHTML: true,
-                        trigger: 'click',
-                        hideOnClick: true,
-                        interactive: true,
-                        arrow: false,
-                        offset: [0, -10],
-                        theme: '',
-                        plugins: [{
-                                name: 'hideOnEsc',
-                                defaultValue: true,
-                                fn: function (_a) {
-                                    var hide = _a.hide;
-                                    function onKeyDown(event) {
-                                        if (event.key === ListboxComponent.KEY_CODE_ESC) {
-                                            hide();
-                                        }
-                                    }
-                                    return {
-                                        onShow: function () {
-                                            document.addEventListener('keydown', onKeyDown);
-                                        },
-                                        onHide: function () {
-                                            document.removeEventListener('keydown', onKeyDown);
-                                        },
-                                    };
-                                },
-                            }],
-                        role: false,
-                        aria: {
-                            content: 'auto',
+            var listboxButtonElement = this.listboxButton.nativeElement;
+            if (this.listboxContent && this.listboxContent.nativeElement) {
+                var contentTooltip = this.listboxContent.nativeElement;
+                this.tippyProperties = {
+                    placement: 'bottom-start',
+                    inlinePositioning: true,
+                    content: contentTooltip,
+                    allowHTML: true,
+                    trigger: 'click',
+                    hideOnClick: true,
+                    interactive: true,
+                    arrow: false,
+                    offset: [0, -10],
+                    theme: '',
+                    plugins: [
+                        {
+                            name: 'hideOnPopperBlur',
+                            defaultValue: true,
+                            fn: function (instance) {
+                                return {
+                                    onCreate: function () {
+                                        instance.popper.addEventListener('focusout', function (event) {
+                                            if (instance.props.hideOnPopperBlur &&
+                                                event.relatedTarget &&
+                                                !instance.popper.contains(event.relatedTarget)) {
+                                                instance.hide();
+                                            }
+                                        });
+                                    },
+                                };
+                            }
                         },
-                        onShow: _this.onListShow.bind(_this),
-                        onHidden: _this.onListClose.bind(_this)
-                    };
-                }
-            });
+                        {
+                            name: 'hideOnEsc',
+                            defaultValue: true,
+                            fn: function (_a) {
+                                var hide = _a.hide;
+                                function onKeyDown(event) {
+                                    if (event.key === ListboxComponent.KEY_CODE_ESC) {
+                                        hide();
+                                        listboxButtonElement.focus();
+                                    }
+                                }
+                                return {
+                                    onShow: function () {
+                                        document.addEventListener('keydown', onKeyDown);
+                                    },
+                                    onHide: function () {
+                                        document.removeEventListener('keydown', onKeyDown);
+                                    },
+                                };
+                            },
+                        }
+                    ],
+                    role: false,
+                    aria: {
+                        content: 'auto',
+                    },
+                    onShow: this.onListShow.bind(this),
+                    onHidden: this.onListClose.bind(this)
+                };
+            }
         };
         ListboxComponent.prototype.ngOnChanges = function () {
             var _this = this;
@@ -1090,11 +1095,11 @@
             if (this.doesChangeButtonText && !this.isMultiselectable && activeItems.length > 0) {
                 var activeItemOption = this.listboxOptions.find(function (item, index) { return index === activeItems[0].index; });
                 if (activeItemOption) {
-                    this.buttonContent = activeItemOption.nativeElement.innerHTML;
+                    this.buttonContentHtml = activeItemOption.nativeElement.innerHTML;
                 }
             }
             else {
-                this.buttonContent = this.html ? this.html : this.text;
+                this.buttonContentHtml = this.html ? this.html : null;
             }
             // Si hay cambios, se emiten
             if (hasActiveItemChange) {
@@ -1111,9 +1116,6 @@
         };
         ListboxComponent.prototype.onListClose = function () {
             this.isListVisible = false;
-            if (this.listboxButton) {
-                this.listboxButton.nativeElement.focus();
-            }
         };
         ListboxComponent.prototype.onListFocus = function () {
             var activeItemsData = this.getActiveItemsData();
@@ -1187,23 +1189,19 @@
         ListboxComponent.prototype.getLabelContent = function (label) {
             return label.html ? label.html : "<p>" + StringUtils.escapeHtml(label.text) + "</p>";
         };
-        ListboxComponent.prototype.isButtonContentHtml = function () {
-            var activeItemsData = this.getActiveItemsData();
-            return !!(this.doesChangeButtonText && !this.isMultiselectable && activeItemsData.length > 0 ? true : this.html);
-        };
         return ListboxComponent;
     }(AccessibilityAndTextOrHtmlRequiredComponent));
     ListboxComponent.KEY_CODE_ESC = 'Escape';
     ListboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-listbox',
-                    template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div *ngIf=\"labelComponent\" [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent.classes] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"labelComponent.getContent()\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"!labelComponent && label\" [id]=\"id + '-label'\" [class]=\"['mb-sm', label.classes] | makeHtmlList\"\r\n    [desyInnerContent]=\"getLabelContent(label)\" [isHtml]=\"true\">\r\n  </div>\r\n  <button *ngIf=\"tippyProperties\"\r\n          #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\"\r\n              [desyInnerContent]=\"buttonContent\" [isHtml]=\"isButtonContentHtml()\">\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\"\r\n            [desyInnerContent]=\"!item['content'] ? (item.html ? item.html : item.text) : null\"\r\n            [isHtml]=\"!item['content'] ? item.html : undefined\" [deleteContentIfEmpty]=\"false\">\r\n          <ng-container *ngTemplateOutlet=\"item['content']\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
+                    template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\r\n  </div>\r\n  <button #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: text }\"></ng-container>\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
                 },] }
     ];
     ListboxComponent.propDecorators = {
-        listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef },] }],
+        listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef, static: true },] }],
         listboxList: [{ type: i0.ViewChild, args: ['list', { read: i0.ElementRef },] }],
-        listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef },] }],
+        listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef, static: true },] }],
         listboxOptions: [{ type: i0.ViewChildren, args: ['option', { read: i0.ElementRef },] }],
         labelComponent: [{ type: i0.ContentChildren, args: [ListboxLabelComponent,] }],
         itemComponentList: [{ type: i0.ContentChildren, args: [ListboxItemComponent,] }],
@@ -1229,6 +1227,7 @@
         function PillComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.clickEvent = new i0.EventEmitter();
+            _this.hostTabIndex = null; // Fix para evitar el tab-index agregado por routerLink en el host
             return _this;
         }
         PillComponent.prototype.onClick = function (event) {
@@ -1296,7 +1295,8 @@
         routerLinkActiveClasses: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }]
+        clickEvent: [{ type: i0.Output }],
+        hostTabIndex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }]
     };
 
     var ContentComponent = /** @class */ (function (_super) {
@@ -1783,7 +1783,7 @@
     CharacterCountComponent.decorators = [
         { type: i0.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=\"mb-0\"\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: "<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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1815,7 +1815,6 @@
         }
         InputComponent.prototype.ngOnChanges = function (changes) {
             this.checkRequired();
-            this.writeValue(this.value);
         };
         InputComponent.prototype.getErrorId = function () {
             return this.errorId ? this.errorId : _super.prototype.getErrorId.call(this);
@@ -1845,7 +1844,7 @@
     InputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-input',
-                    template: "\r\n<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  <!-- input -->\r\n  <input [class]=\"['c-input block mt-sm 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' : getErrorId()}\"\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         [type]=\"type ? type : 'text'\"\r\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"getErrorId() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"getErrorId() ? true : null\"\r\n         [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n         [attr.pattern]=\"pattern ? pattern : null\"\r\n         [attr.inputmode]=\"inputmode ? inputmode : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.maxlength]=\"maxlength ? maxlength : 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-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  <!-- input -->\r\n</div>\r\n",
+                    template: "\r\n<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  <input [class]=\"['c-input block mt-sm 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',\r\n                   classes,\r\n                   getErrorId() ? 'border-alert-base ring-2 ring-alert-base' : null] | makeHtmlList\"\r\n         [value]=\"value ? value : ''\" (input)=\"onInput($event.target.value)\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"name ? name : null\"\r\n         [type]=\"type ? type : 'text'\"\r\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"getErrorId() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"getErrorId() ? true : null\"\r\n         [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n         [attr.pattern]=\"pattern ? pattern : null\"\r\n         [attr.inputmode]=\"inputmode ? inputmode : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.maxlength]=\"maxlength ? maxlength : 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-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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1869,30 +1868,68 @@
         errorId: [{ type: i0.Input }]
     };
 
+    var SelectItemComponent = /** @class */ (function (_super) {
+        __extends(SelectItemComponent, _super);
+        function SelectItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return SelectItemComponent;
+    }(ContentBaseComponent));
+    SelectItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-select-item',
+                    template: "<p>select-item works!</p>\r\n"
+                },] }
+    ];
+    SelectItemComponent.propDecorators = {
+        disabled: [{ type: i0.Input }]
+    };
+
     var OptionComponent = /** @class */ (function (_super) {
         __extends(OptionComponent, _super);
         function OptionComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return OptionComponent;
-    }(ContentBaseComponent));
+    }(SelectItemComponent));
     OptionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-option',
-                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>',
+                    providers: [{ provide: SelectItemComponent, useExisting: i0.forwardRef(function () { return OptionComponent; }) }]
                 },] }
     ];
     OptionComponent.propDecorators = {
         value: [{ type: i0.Input }],
-        text: [{ type: i0.Input }],
         selected: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }]
+        hidden: [{ type: i0.Input }]
+    };
+
+    var OptionGroupComponent = /** @class */ (function (_super) {
+        __extends(OptionGroupComponent, _super);
+        function OptionGroupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return OptionGroupComponent;
+    }(SelectItemComponent));
+    OptionGroupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-option-group',
+                    template: "<p>option-group works!</p>\r\n",
+                    providers: [{ provide: SelectItemComponent, useExisting: i0.forwardRef(function () { return OptionGroupComponent; }) }]
+                },] }
+    ];
+    OptionGroupComponent.propDecorators = {
+        label: [{ type: i0.Input }],
+        items: [{ type: i0.ContentChildren, args: [OptionComponent,] }]
     };
 
     var SelectComponent = /** @class */ (function (_super) {
         __extends(SelectComponent, _super);
         function SelectComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.contentInit = false;
+            return _this;
         }
         SelectComponent.prototype.ngOnInit = function () {
             this.checkRequiredParams();
@@ -1902,6 +1939,7 @@
         };
         SelectComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
+            this.contentInit = true;
             if (!this.value) {
                 var items = this.getItems();
                 var itemSelected_1 = items === null || items === void 0 ? void 0 : items.find(function (item) { return item.selected; });
@@ -1910,9 +1948,13 @@
                 }
             }
         };
+        SelectComponent.prototype.writeValue = function (value) {
+            this.value = value;
+            this.onChange(value);
+        };
         SelectComponent.prototype.getItems = function () {
-            var items = (this.optionComponent.length > 0) ? this.optionComponent.toArray() : this.items;
-            if (!items || items.length === 0) {
+            var items = (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
+            if (this.contentInit && (!items || items.length === 0)) {
                 throw new Error("items are required");
             }
             return items;
@@ -1928,12 +1970,15 @@
         SelectComponent.prototype.isItemSelected = function (item) {
             return this.value ? this.value === item.value : item.selected;
         };
+        SelectComponent.prototype.isOptionGroup = function (item) {
+            return item instanceof OptionGroupComponent;
+        };
         return SelectComponent;
     }(FormFieldComponent));
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-select',
-                    template: "<!-- select -->\r\n<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\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', classes] | makeHtmlList\"\r\n    [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n    [ngClass]=\"{'c-select--error border-alert-base ring-2 ring-alert-base': hasErrorsMessage()}\"\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    <option *ngFor=\"let item of getItems()\" [value]=\"item.value\" [disabled]=\"item.disabled\" [selected]=\"isItemSelected(item)\"\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  </select>\r\n</div>\r\n<!-- /select -->\r\n",
+                    template: "<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\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</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1949,7 +1994,7 @@
         describedBy: [{ type: i0.Input }],
         formGroupClasses: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
-        optionComponent: [{ type: i0.ContentChildren, args: [OptionComponent,] }]
+        itemComponents: [{ type: i0.ContentChildren, args: [SelectItemComponent,] }]
     };
 
     var FileUploadComponent = /** @class */ (function (_super) {
@@ -2010,22 +2055,172 @@
         accept: [{ type: i0.Input }]
     };
 
+    var InputGroupItemComponent = /** @class */ (function () {
+        function InputGroupItemComponent() {
+        }
+        return InputGroupItemComponent;
+    }());
+    InputGroupItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-group-item',
+                    template: ''
+                },] }
+    ];
+    InputGroupItemComponent.propDecorators = {
+        classes: [{ type: i0.Input }]
+    };
+
+    /**
+     * Decorador para controlar los cambios de un input
+     * @param callbackName nombre de la función a la que se llamará tras aplicar el cambio
+     */
+    function DesyOnInputChange(callbackName) {
+        return function (target, propertyKey) {
+            var privateKeyName = "_" + propertyKey;
+            Object.defineProperty(target, propertyKey, {
+                set: function (value) {
+                    this[privateKeyName] = value;
+                    this[callbackName]();
+                },
+                get: function () {
+                    return this[privateKeyName];
+                }
+            });
+        };
+    }
+
+    var MakeHtmlListPipe = /** @class */ (function () {
+        function MakeHtmlListPipe() {
+        }
+        MakeHtmlListPipe.prototype.transform = function (classes, valueForEmpty) {
+            var filteredList = classes.filter(function (c) { return c; }).join(' ');
+            if (filteredList.length === 0 && valueForEmpty) {
+                filteredList = valueForEmpty;
+            }
+            return filteredList;
+        };
+        return MakeHtmlListPipe;
+    }());
+    MakeHtmlListPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'makeHtmlList'
+                },] }
+    ];
+
+    var InputGroupInputComponent = /** @class */ (function (_super) {
+        __extends(InputGroupInputComponent, _super);
+        function InputGroupInputComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.isSelect = false;
+            _this.valueChange = new i0.EventEmitter();
+            return _this;
+        }
+        InputGroupInputComponent.prototype.ngAfterContentInit = function () {
+            if (!this.name) {
+                throw Error('item name is required');
+            }
+            if (!this.labelComponent) {
+                throw Error('item label is required');
+            }
+        };
+        return InputGroupInputComponent;
+    }(InputGroupItemComponent));
+    InputGroupInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-group-input',
+                    template: "<ng-template #label>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: InputGroupItemComponent, useExisting: i0.forwardRef(function () { return InputGroupInputComponent; }) }]
+                },] }
+    ];
+    InputGroupInputComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        formGroupClasses: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        inputmode: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        pattern: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        labelRef: [{ type: i0.ViewChild, args: ['label', { static: true },] }],
+        labelComponent: [{ type: i0.ContentChildren, args: [LabelComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], InputGroupInputComponent.prototype, "labelComponent", void 0);
+
+    var InputGroupSelectComponent = /** @class */ (function (_super) {
+        __extends(InputGroupSelectComponent, _super);
+        function InputGroupSelectComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.isSelect = true;
+            _this.valueChange = new i0.EventEmitter();
+            return _this;
+        }
+        InputGroupSelectComponent.prototype.ngAfterContentInit = function () {
+            if (!this.name) {
+                throw Error('item name is required');
+            }
+            if (!this.labelComponent) {
+                throw Error('item label is required');
+            }
+        };
+        return InputGroupSelectComponent;
+    }(InputGroupItemComponent));
+    InputGroupSelectComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-group-select',
+                    template: "<ng-template #label>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: InputGroupItemComponent, useExisting: i0.forwardRef(function () { return InputGroupSelectComponent; }) }]
+                },] }
+    ];
+    InputGroupSelectComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        formGroupClasses: [{ type: i0.Input }],
+        labelRef: [{ type: i0.ViewChild, args: ['label', { static: true },] }],
+        selectItemComponentList: [{ type: i0.ContentChildren, args: [OptionComponent,] }],
+        labelComponent: [{ type: i0.ContentChildren, args: [LabelComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], InputGroupSelectComponent.prototype, "labelComponent", void 0);
+
+    var InputGroupDividerComponent = /** @class */ (function (_super) {
+        __extends(InputGroupDividerComponent, _super);
+        function InputGroupDividerComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.isSelect = false;
+            _this.divider = _this;
+            return _this;
+        }
+        return InputGroupDividerComponent;
+    }(InputGroupItemComponent));
+    InputGroupDividerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-group-divider',
+                    template: "<ng-template #dividerContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: InputGroupItemComponent, useExisting: i0.forwardRef(function () { return InputGroupDividerComponent; }) }]
+                },] }
+    ];
+    InputGroupDividerComponent.propDecorators = {
+        dividerContent: [{ type: i0.ViewChild, args: ['dividerContent', { static: true },] }]
+    };
+
     var InputGroupComponent = /** @class */ (function (_super) {
         __extends(InputGroupComponent, _super);
         function InputGroupComponent(controlContainer) {
             var _this = _super.call(this) || this;
             _this.controlContainer = controlContainer;
+            _this.itemsChange = new i0.EventEmitter();
+            _this.contentInit = false;
             return _this;
         }
-        InputGroupComponent.prototype.ngOnInit = function () {
-            this.checkRequired();
-            this.onExternalChange();
-        };
         InputGroupComponent.prototype.ngOnChanges = function () {
-            this.checkRequired();
-            this.onExternalChange();
-        };
-        InputGroupComponent.prototype.checkRequired = function () {
             var e_1, _a;
             if (!this.id) {
                 throw Error('id is required');
@@ -2050,40 +2245,112 @@
                     finally { if (e_1) throw e_1.error; }
                 }
             }
-            else {
+        };
+        InputGroupComponent.prototype.ngAfterContentInit = function () {
+            this.contentInit = true;
+        };
+        InputGroupComponent.prototype.ngAfterViewChecked = function () {
+            var items = this.getItems();
+            if (!items || items.length === 0) {
                 throw Error('items are required');
             }
         };
         InputGroupComponent.prototype.writeValue = function (value) {
             var _this = this;
-            this.value = value;
-            if (this.value) {
-                this.items.forEach(function (item) { return item.value = _this.value[_this.getItemName(item)]; });
+            if (value) {
+                this.value = value;
+                var items = this.getItems();
+                items.forEach(function (item) {
+                    var v = _this.value[_this.getItemName(item)];
+                    item.value = v ? v : null;
+                });
+                if (this.items) {
+                    this.itemsChange.emit(this.items);
+                }
             }
             this.onChange(value);
         };
         InputGroupComponent.prototype.onExternalChange = function () {
             var _this = this;
+            if (!this.contentInit) {
+                return;
+            }
             if (!this.value) {
                 this.value = {};
             }
-            this.items.forEach(function (item) { return _this.value[_this.getItemName(item)] = item.value; });
+            var items = this.getItems();
+            items.forEach(function (item) { return _this.value[_this.getItemName(item)] = item.value; });
             this.onChange(this.value);
         };
-        InputGroupComponent.prototype.onInternalChange = function (itemName, itemValue) {
+        InputGroupComponent.prototype.onInternalChange = function (item, itemValue) {
+            var itemName = this.getItemName(item);
             if (!this.value) {
                 this.value = {};
             }
-            this.value[itemName] = itemValue;
-            this.onChange(this.value);
+            if (this.value[itemName] !== itemValue) {
+                this.value[itemName] = itemValue;
+                this.onChange(this.value);
+                if (item instanceof InputGroupInputComponent || item instanceof InputGroupSelectComponent) {
+                    item.valueChange.emit(itemValue);
+                }
+                if (this.items) {
+                    item.value = itemValue;
+                    this.itemsChange.emit(this.items);
+                }
+            }
+        };
+        InputGroupComponent.prototype.overrideFieldsetParams = function (fieldset) {
+            fieldset.caller = this.innerHtml;
+            fieldset.errorId = this.getErrorId();
+            fieldset.describedBy = new MakeHtmlListPipe().transform([this.getHintId(), this.getErrorId()], null);
+            fieldset.role = 'group';
+            fieldset.detectChanges();
+        };
+        /*
+         * Métodos para proporcionar datos
+         */
+        InputGroupComponent.prototype.getItems = function () {
+            return this.itemsComponents && this.itemsComponents.length ? this.itemsComponents.toArray() : this.items;
+        };
+        InputGroupComponent.prototype.getItemLabelRef = function (item) {
+            return item instanceof InputGroupInputComponent || item instanceof InputGroupSelectComponent ? item.labelRef : null;
+        };
+        InputGroupComponent.prototype.getItemLabelData = function (item) {
+            return item.labelData ? item.labelData : { text: item.labelText };
         };
         InputGroupComponent.prototype.hasFieldset = function () {
-            return !!(this.legendRef || this.fieldsetData
+            return !!(this.hasFieldsetComponent() || this.hasLegendComponent() || this.legendRef || this.fieldsetData
                 || (this.legendData && (this.legendData.text || this.legendData.html)) || this.legendText);
         };
+        InputGroupComponent.prototype.hasFieldsetComponent = function () {
+            return !!this.fieldsetComponent;
+        };
+        InputGroupComponent.prototype.hasLegendComponent = function () {
+            return !!this.legendComponent;
+        };
         InputGroupComponent.prototype.getItemName = function (item) {
             return this.namePrefix ? this.namePrefix + '-' + item.name : item.name;
         };
+        InputGroupComponent.prototype.getItemSelectOptions = function (item) {
+            return item instanceof InputGroupSelectComponent ?
+                item.selectItemComponentList.toArray() : item.selectItems;
+        };
+        InputGroupComponent.prototype.getItemDividerTemplate = function (item) {
+            return item.divider instanceof InputGroupDividerComponent ? item.divider.dividerContent : null;
+        };
+        InputGroupComponent.prototype.getItemDividerHtml = function (item) {
+            return item.divider.html ? item.divider.html : "<p>" + StringUtils.escapeHtml(item.divider.text) + "</p>";
+        };
+        InputGroupComponent.prototype.isSelectItem = function (item) {
+            var hasSelectItems;
+            if (item instanceof InputGroupSelectComponent) {
+                hasSelectItems = item.selectItemComponentList && item.selectItemComponentList.length > 0;
+            }
+            else {
+                hasSelectItems = item.selectItems;
+            }
+            return item.isSelect && hasSelectItems;
+        };
         InputGroupComponent.prototype.hasItemLabel = function (item) {
             return !!((item.labelData && (item.labelData.text || item.labelData.html)) || item.labelText);
         };
@@ -2092,7 +2359,7 @@
     InputGroupComponent.decorators = [
         { type: i0.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\" let-mode=\"mode\">\r\n  <div *ngIf=\"item.divider.html; else notHtml\" [ngClass]=\"item.divider.classes\" role=\"separator\" [innerHTML]=\"item.divider.html\"></div>\r\n  <ng-template #notHtml>\r\n    <div [ngClass]=\"item.divider.classes\" role=\"separator\" >\r\n      <p>{{item.divider.text}}</p>\r\n    </div>\r\n  </ng-template>\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 items; index as i\">\r\n      <ng-container *ngTemplateOutlet=\"item.isSelect && item.selectItems ? 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                     [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\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]=\"item.selectItems\"\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                    [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [errorId]=\"item.hasErrors ? getErrorId() : null\"\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 items; index as i\">\r\n        <ng-container *ngTemplateOutlet=\"item.isSelect && item.selectItems ? 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                       [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\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.name, $event)\"\r\n                       [items]=\"item.selectItems\"\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                      [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [formGroupClasses]=\"item.formGroupClasses\"\r\n                      [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item.name, $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 items; index as i\">\r\n      <ng-container *ngTemplateOutlet=\"item.isSelect && item.selectItems ? 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                     [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [items]=\"item.selectItems\"\r\n                     [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item.name, $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                    [labelData]=\"item.labelData ? item.labelData : {text: item.labelText}\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item.name, $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<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error' : (hasErrorsMessage() || formGroupClasses == 'c-form-group--error')}\">\r\n\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 && 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 && !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 && !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</div>\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\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<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=\"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</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2108,6 +2375,7 @@
     InputGroupComponent.propDecorators = {
         ngModelGroup: [{ type: i0.Input }],
         items: [{ type: i0.Input }],
+        itemsChange: [{ type: i0.Output }],
         namePrefix: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         formGroupClasses: [{ type: i0.Input }],
@@ -2116,17 +2384,33 @@
         fieldsetData: [{ type: i0.Input }],
         legendRef: [{ type: i0.Input }],
         legendData: [{ type: i0.Input }],
-        legendText: [{ type: i0.Input }]
-    };
-
-    var RadioItemComponent = /** @class */ (function (_super) {
-        __extends(RadioItemComponent, _super);
-        function RadioItemComponent(radios, changeDetectorRef) {
-            var _this = _super.call(this) || this;
-            _this.radios = radios;
-            _this.changeDetectorRef = changeDetectorRef;
-            _this.checkedChange = new i0.EventEmitter();
-            _this.index = 0;
+        legendText: [{ type: i0.Input }],
+        itemsComponents: [{ type: i0.ContentChildren, args: [InputGroupItemComponent,] }],
+        fieldsetComponent: [{ type: i0.ContentChildren, args: [FieldsetComponent,] }],
+        legendComponent: [{ type: i0.ContentChildren, args: [LegendComponent,] }],
+        innerHtml: [{ type: i0.ViewChild, args: ['innerHtml', { static: true },] }]
+    };
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], InputGroupComponent.prototype, "items", void 0);
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], InputGroupComponent.prototype, "namePrefix", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
+    ], InputGroupComponent.prototype, "fieldsetComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], InputGroupComponent.prototype, "legendComponent", void 0);
+
+    var RadioItemComponent = /** @class */ (function (_super) {
+        __extends(RadioItemComponent, _super);
+        function RadioItemComponent(radios, changeDetectorRef) {
+            var _this = _super.call(this) || this;
+            _this.radios = radios;
+            _this.changeDetectorRef = changeDetectorRef;
+            _this.checkedChange = new i0.EventEmitter();
+            _this.index = 0;
             if (!_this.radios) {
                 throw Error('Radios items must be inside of RadiosComponent');
             }
@@ -2262,43 +2546,6 @@
         checkedChange: [{ type: i0.Output }]
     };
 
-    var MakeHtmlListPipe = /** @class */ (function () {
-        function MakeHtmlListPipe() {
-        }
-        MakeHtmlListPipe.prototype.transform = function (classes, valueForEmpty) {
-            var filteredList = classes.filter(function (c) { return c; }).join(' ');
-            if (filteredList.length === 0 && valueForEmpty) {
-                filteredList = valueForEmpty;
-            }
-            return filteredList;
-        };
-        return MakeHtmlListPipe;
-    }());
-    MakeHtmlListPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'makeHtmlList'
-                },] }
-    ];
-
-    /**
-     * Decorador para controlar los cambios de un input
-     * @param callbackName nombre de la función a la que se llamará tras aplicar el cambio
-     */
-    function DesyOnInputChange(callbackName) {
-        return function (target, propertyKey) {
-            var privateKeyName = "_" + propertyKey;
-            Object.defineProperty(target, propertyKey, {
-                set: function (value) {
-                    this[privateKeyName] = value;
-                    this[callbackName]();
-                },
-                get: function () {
-                    return this[privateKeyName];
-                }
-            });
-        };
-    }
-
     var RadiosComponent = /** @class */ (function (_super) {
         __extends(RadiosComponent, _super);
         function RadiosComponent() {
@@ -2494,7 +2741,7 @@
     RadiosComponent.decorators = [
         { type: i0.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                   [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\" [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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2544,6 +2791,7 @@
             _this.checkboxes = checkboxes;
             _this.changeDetectorRef = changeDetectorRef;
             _this.checkedChange = new i0.EventEmitter();
+            _this.indeterminateChange = new i0.EventEmitter();
             if (!_this.checkboxes) {
                 throw Error('Checkbox items must be inside of CheckboxesComponent');
             }
@@ -2566,6 +2814,10 @@
             else if (this.lastValue !== undefined && this.lastValue !== this.value) {
                 this.checkboxes.updateValueFromCheckboxItems();
             }
+            if (this.indeterminateChecked !== this.lastIndeterminate && this.isInit()) {
+                this.setIndeterminateChecked(this.indeterminateChecked);
+                this.checkboxes.updateValueFromCheckboxItems();
+            }
             this.lastValue = this.value;
             if (this.id !== this.checkboxId) {
                 this.checkboxes.markForUpdateCheckboxIds();
@@ -2573,6 +2825,7 @@
         };
         CheckboxItemComponent.prototype.ngAfterViewInit = function () {
             this.setChecked(this.checked);
+            this.setIndeterminateChecked(this.indeterminateChecked);
             this.checkboxes.updateValueFromCheckboxItems();
         };
         CheckboxItemComponent.prototype.getItemHintId = function () {
@@ -2592,6 +2845,7 @@
                 }
             }
             this.setChecked(input.checked);
+            this.setIndeterminateChecked(input.indeterminate);
             this.checkboxes.updateValueFromCheckboxItems();
         };
         CheckboxItemComponent.prototype.setChecked = function (checked) {
@@ -2600,6 +2854,26 @@
             this.checkedChange.emit(checked);
             this.changeDetectorRef.detectChanges(); // Avisa al elemento input para que actualice su estado
         };
+        CheckboxItemComponent.prototype.setIndeterminateChecked = function (indeterminateChecked) {
+            this.indeterminateChecked = indeterminateChecked;
+            this.lastIndeterminate = indeterminateChecked;
+            this.indeterminateChange.emit(indeterminateChecked);
+            this.changeDetectorRef.detectChanges(); // Avisa al elemento input para que actualice su estado
+        };
+        CheckboxItemComponent.prototype.setIndeterminateStatus = function () {
+            var _a;
+            var input = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (input) {
+                if (this.indeterminateChecked) {
+                    input.readOnly = true;
+                    input.indeterminate = true;
+                }
+                else if (input.readOnly) {
+                    input.readOnly = false;
+                    input.indeterminate = false;
+                }
+            }
+        };
         CheckboxItemComponent.prototype.isInit = function () {
             return !!this.inputElement;
         };
@@ -2681,13 +2955,18 @@
         conditional: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         isIndeterminate: [{ type: i0.Input }],
+        indeterminateChecked: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         labelComponentList: [{ type: i0.ContentChildren, args: [LabelComponent,] }],
         hintComponentList: [{ type: i0.ContentChildren, args: [HintComponent,] }],
         conditionalContentList: [{ type: i0.ContentChildren, args: [ContentComponent,] }],
         checked: [{ type: i0.Input }],
-        checkedChange: [{ type: i0.Output }]
-    };
+        checkedChange: [{ type: i0.Output }],
+        indeterminateChange: [{ type: i0.Output }]
+    };
+    __decorate([
+        DesyOnInputChange('setIndeterminateStatus')
+    ], CheckboxItemComponent.prototype, "indeterminateChecked", void 0);
 
     var CheckboxesComponent = /** @class */ (function (_super) {
         __extends(CheckboxesComponent, _super);
@@ -2877,7 +3156,7 @@
     CheckboxesComponent.decorators = [
         { type: i0.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                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   [role]=\"fieldsetData.role\"\r\n                   [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n                   [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n                   [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n                   [ariaControls]=\"fieldsetData.ariaControls\"\r\n                   [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n                   [ariaLive]=\"fieldsetData.ariaLive\"\r\n                   [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n                   [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n                   [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !!legendComponent\"\r\n                   [legendRef]=\"legendTemplate\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && legendData\"\r\n                   [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <div [class]=\"['c-checkboxes', classes] | makeHtmlList\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngIf=\"checkboxComponentItems && checkboxComponentItems.length > 0\">\r\n      <ng-content select=\"desy-checkbox-item\"></ng-content>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!(checkboxComponentItems && checkboxComponentItems.length > 0) && items\">\r\n      <desy-checkbox-item *ngFor=\"let item of items; index as i\"\r\n                          [id]=\"item.id\"\r\n                          [disabled]=\"item.disabled\"\r\n                          [name]=\"item.name\"\r\n                          [classes]=\"item.classes\"\r\n                          [value]=\"item.value\"\r\n                          [(checked)]=\"item.checked\"\r\n                          [conditional]=\"item.conditional\"\r\n                          [isIndeterminate]=\"item.isIndeterminate\"\r\n\r\n                          [role]=\"item.role\"\r\n                          [ariaLabel]=\"item.ariaLabel\"\r\n                          [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                          [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                          [ariaHidden]=\"item.ariaHidden\"\r\n                          [ariaDisabled]=\"item.ariaDisabled\"\r\n                          [ariaControls]=\"item.ariaControls\"\r\n                          [ariaCurrent]=\"item.ariaCurrent\"\r\n                          [ariaLive]=\"item.ariaLive\"\r\n                          [ariaExpanded]=\"item.ariaExpanded\"\r\n                          [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                          [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                          [tabindex]=\"item.tabindex\">\r\n        <desy-label [text]=\"item.text\" [html]=\"item.html\"\r\n                    [classes]=\"item.labelData ? item.labelData.classes : null\"\r\n                    [role]=\"item.labelData ? item.labelData.role : null\"\r\n                    [ariaLabel]=\"item.labelData ? item.labelData.ariaLabel : null\"\r\n                    [ariaDescribedBy]=\"item.labelData ? item.labelData.ariaDescribedBy: null\"\r\n                    [ariaLabelledBy]=\"item.labelData ? item.labelData.ariaLabelledBy : null\"\r\n                    [ariaHidden]=\"item.labelData ? item.labelData.ariaHidden : null\"\r\n                    [ariaDisabled]=\"item.labelData ? item.labelData.ariaDisabled : null\"\r\n                    [ariaControls]=\"item.labelData ? item.labelData.ariaControls : null\"\r\n                    [ariaCurrent]=\"item.labelData ? item.labelData.ariaCurrent : null\"\r\n                    [ariaLive]=\"item.labelData ? item.labelData.ariaLive : null\"\r\n                    [ariaExpanded]=\"item.labelData ? item.labelData.ariaExpanded : null\"\r\n                    [ariaErrorMessage]=\"item.labelData ? item.labelData.ariaErrorMessage : null\"\r\n                    [ariaHasPopup]=\"item.labelData ? item.labelData.ariaHasPopup : null\"\r\n                    [tabindex]=\"tabindex ? item.labelData.tabindex : null\"></desy-label>\r\n        <desy-hint *ngIf=\"item.hintData && (item.hintData.text || item.hintData.html)\"\r\n                   [text]=\"item.hintData.text\"\r\n                   [html]=\"item.hintData.html\"\r\n                   [classes]=\"item.hintData.classes\"\r\n                   [role]=\"item.hintData.role\"\r\n                   [ariaLabel]=\"item.hintData.ariaLabel\"\r\n                   [ariaDescribedBy]=\"item.hintData.ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"item.hintData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"item.hintData.ariaHidden\"\r\n                   [ariaDisabled]=\"item.hintData.ariaDisabled\"\r\n                   [ariaControls]=\"item.hintData.ariaControls\"\r\n                   [ariaCurrent]=\"item.hintData.ariaCurrent\"\r\n                   [ariaLive]=\"item.hintData.ariaLive\"\r\n                   [ariaExpanded]=\"item.hintData.ariaExpanded\"\r\n                   [ariaErrorMessage]=\"item.hintData.ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"item.hintData.ariaHasPopup\"\r\n                   [tabindex]=\"item.hintData.tabindex\"></desy-hint>\r\n        <desy-hint *ngIf=\"!item.hintData && item.hintText\" [text]=\"item.hintText\"></desy-hint>\r\n        <desy-content *ngIf=\"item.conditionalHtml\">\r\n          <ng-container *ngTemplateOutlet=\"item.conditionalHtml\"></ng-container>\r\n        </desy-content>\r\n      </desy-checkbox-item>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
+                    template: "<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses == 'c-form-group--error') }\">\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n                   [classes]=\"fieldsetData.classes\"\r\n                   [id]=\"fieldsetData.id\"\r\n                   [legendData]=\"fieldsetData.legend\"\r\n                   [headingLevel]=\"fieldsetData.headingLevel\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   [role]=\"fieldsetData.role\"\r\n                   [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n                   [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n                   [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n                   [ariaControls]=\"fieldsetData.ariaControls\"\r\n                   [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n                   [ariaLive]=\"fieldsetData.ariaLive\"\r\n                   [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n                   [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n                   [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !!legendComponent\"\r\n                   [legendRef]=\"legendTemplate\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && legendData\"\r\n                   [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !legendComponent && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <div [class]=\"['c-checkboxes', classes] | makeHtmlList\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngIf=\"checkboxComponentItems && checkboxComponentItems.length > 0\">\r\n      <ng-content select=\"desy-checkbox-item\"></ng-content>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!(checkboxComponentItems && checkboxComponentItems.length > 0) && items\">\r\n      <desy-checkbox-item *ngFor=\"let item of items; index as i\"\r\n                          [id]=\"item.id\"\r\n                          [disabled]=\"item.disabled\"\r\n                          [name]=\"item.name\"\r\n                          [classes]=\"item.classes\"\r\n                          [value]=\"item.value\"\r\n                          [(checked)]=\"item.checked\"\r\n                          [conditional]=\"item.conditional\"\r\n                          [isIndeterminate]=\"item.isIndeterminate\"\r\n                          [indeterminateChecked]=\"item.indeterminateChecked\"\r\n\r\n                          [role]=\"item.role\"\r\n                          [ariaLabel]=\"item.ariaLabel\"\r\n                          [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                          [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                          [ariaHidden]=\"item.ariaHidden\"\r\n                          [ariaDisabled]=\"item.ariaDisabled\"\r\n                          [ariaControls]=\"item.ariaControls\"\r\n                          [ariaCurrent]=\"item.ariaCurrent\"\r\n                          [ariaLive]=\"item.ariaLive\"\r\n                          [ariaExpanded]=\"item.ariaExpanded\"\r\n                          [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                          [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                          [tabindex]=\"item.tabindex\">\r\n        <desy-label [text]=\"item.text\" [html]=\"item.html\"\r\n                    [classes]=\"item.labelData ? item.labelData.classes : null\"\r\n                    [role]=\"item.labelData ? item.labelData.role : null\"\r\n                    [ariaLabel]=\"item.labelData ? item.labelData.ariaLabel : null\"\r\n                    [ariaDescribedBy]=\"item.labelData ? item.labelData.ariaDescribedBy: null\"\r\n                    [ariaLabelledBy]=\"item.labelData ? item.labelData.ariaLabelledBy : null\"\r\n                    [ariaHidden]=\"item.labelData ? item.labelData.ariaHidden : null\"\r\n                    [ariaDisabled]=\"item.labelData ? item.labelData.ariaDisabled : null\"\r\n                    [ariaControls]=\"item.labelData ? item.labelData.ariaControls : null\"\r\n                    [ariaCurrent]=\"item.labelData ? item.labelData.ariaCurrent : null\"\r\n                    [ariaLive]=\"item.labelData ? item.labelData.ariaLive : null\"\r\n                    [ariaExpanded]=\"item.labelData ? item.labelData.ariaExpanded : null\"\r\n                    [ariaErrorMessage]=\"item.labelData ? item.labelData.ariaErrorMessage : null\"\r\n                    [ariaHasPopup]=\"item.labelData ? item.labelData.ariaHasPopup : null\"\r\n                    [tabindex]=\"tabindex ? item.labelData.tabindex : null\"></desy-label>\r\n        <desy-hint *ngIf=\"item.hintData && (item.hintData.text || item.hintData.html)\"\r\n                   [text]=\"item.hintData.text\"\r\n                   [html]=\"item.hintData.html\"\r\n                   [classes]=\"item.hintData.classes\"\r\n                   [role]=\"item.hintData.role\"\r\n                   [ariaLabel]=\"item.hintData.ariaLabel\"\r\n                   [ariaDescribedBy]=\"item.hintData.ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"item.hintData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"item.hintData.ariaHidden\"\r\n                   [ariaDisabled]=\"item.hintData.ariaDisabled\"\r\n                   [ariaControls]=\"item.hintData.ariaControls\"\r\n                   [ariaCurrent]=\"item.hintData.ariaCurrent\"\r\n                   [ariaLive]=\"item.hintData.ariaLive\"\r\n                   [ariaExpanded]=\"item.hintData.ariaExpanded\"\r\n                   [ariaErrorMessage]=\"item.hintData.ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"item.hintData.ariaHasPopup\"\r\n                   [tabindex]=\"item.hintData.tabindex\"></desy-hint>\r\n        <desy-hint *ngIf=\"!item.hintData && item.hintText\" [text]=\"item.hintText\"></desy-hint>\r\n        <desy-content *ngIf=\"item.conditionalHtml\">\r\n          <ng-container *ngTemplateOutlet=\"item.conditionalHtml\"></ng-container>\r\n        </desy-content>\r\n      </desy-checkbox-item>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2920,22 +3199,185 @@
         DesyContentChild()
     ], CheckboxesComponent.prototype, "legendComponent", void 0);
 
+    var DateInputItemComponent = /** @class */ (function () {
+        function DateInputItemComponent() {
+        }
+        return DateInputItemComponent;
+    }());
+    DateInputItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-date-input-item',
+                    template: ''
+                },] }
+    ];
+    DateInputItemComponent.propDecorators = {
+        classes: [{ type: i0.Input }]
+    };
+
+    var DateInputDayComponent = /** @class */ (function (_super) {
+        __extends(DateInputDayComponent, _super);
+        function DateInputDayComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.valueChange = new i0.EventEmitter();
+            return _this;
+        }
+        DateInputDayComponent.prototype.ngAfterContentInit = function () {
+            if (!this.name) {
+                throw Error('day name is required');
+            }
+            if (!this.labelComponent) {
+                throw Error('day label is required');
+            }
+        };
+        return DateInputDayComponent;
+    }(DateInputItemComponent));
+    DateInputDayComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-day',
+                    template: "<ng-template #label>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: DateInputItemComponent, useExisting: i0.forwardRef(function () { return DateInputDayComponent; }) }]
+                },] }
+    ];
+    DateInputDayComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        labelText: [{ type: i0.Input }],
+        labelData: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        hasErrors: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        pattern: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        labelComponent: [{ type: i0.ContentChildren, args: [LabelComponent,] }],
+        labelRef: [{ type: i0.ViewChild, args: ['label', { static: true },] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], DateInputDayComponent.prototype, "labelComponent", void 0);
+
+    var DateInputMonthComponent = /** @class */ (function (_super) {
+        __extends(DateInputMonthComponent, _super);
+        function DateInputMonthComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.valueChange = new i0.EventEmitter();
+            return _this;
+        }
+        DateInputMonthComponent.prototype.ngAfterContentInit = function () {
+            if (!this.name) {
+                throw Error('month name is required');
+            }
+            if (!this.labelComponent) {
+                throw Error('month label is required');
+            }
+        };
+        return DateInputMonthComponent;
+    }(DateInputItemComponent));
+    DateInputMonthComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-month',
+                    template: "<ng-template #label>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: DateInputItemComponent, useExisting: i0.forwardRef(function () { return DateInputMonthComponent; }) }]
+                },] }
+    ];
+    DateInputMonthComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        labelText: [{ type: i0.Input }],
+        labelData: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        hasErrors: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        pattern: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        labelComponent: [{ type: i0.ContentChildren, args: [LabelComponent,] }],
+        labelRef: [{ type: i0.ViewChild, args: ['label', { static: true },] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], DateInputMonthComponent.prototype, "labelComponent", void 0);
+
+    var DateInputYearComponent = /** @class */ (function (_super) {
+        __extends(DateInputYearComponent, _super);
+        function DateInputYearComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.valueChange = new i0.EventEmitter();
+            return _this;
+        }
+        DateInputYearComponent.prototype.ngAfterContentInit = function () {
+            if (!this.name) {
+                throw Error('year name is required');
+            }
+            if (!this.labelComponent) {
+                throw Error('year label is required');
+            }
+        };
+        return DateInputYearComponent;
+    }(DateInputItemComponent));
+    DateInputYearComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-input-year',
+                    template: "<ng-template #label>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [{ provide: DateInputItemComponent, useExisting: i0.forwardRef(function () { return DateInputYearComponent; }) }]
+                },] }
+    ];
+    DateInputYearComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        hasErrors: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        pattern: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        labelComponent: [{ type: i0.ContentChildren, args: [LabelComponent,] }],
+        labelRef: [{ type: i0.ViewChild, args: ['label', { static: true },] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], DateInputYearComponent.prototype, "labelComponent", void 0);
+
+    var DateInputDividerComponent = /** @class */ (function (_super) {
+        __extends(DateInputDividerComponent, _super);
+        function DateInputDividerComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.divider = _this;
+            return _this;
+        }
+        return DateInputDividerComponent;
+    }(DateInputItemComponent));
+    DateInputDividerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-date-input-divider',
+                    template: "<ng-template #dividerContent>\r\n    <ng-content></ng-content>\r\n</ng-template>",
+                    providers: [{ provide: DateInputItemComponent, useExisting: i0.forwardRef(function () { return DateInputDividerComponent; }) }]
+                },] }
+    ];
+    DateInputDividerComponent.propDecorators = {
+        dividerContent: [{ type: i0.ViewChild, args: ['dividerContent', { static: true },] }]
+    };
+
     var DateInputComponent = /** @class */ (function (_super) {
         __extends(DateInputComponent, _super);
         function DateInputComponent(controlContainer) {
             var _this = _super.call(this) || this;
             _this.controlContainer = controlContainer;
+            _this.itemsChange = new i0.EventEmitter();
+            _this.contentInit = false;
             return _this;
         }
-        DateInputComponent.prototype.ngOnInit = function () {
-            this.initDefaultItems();
-            this.checkRequired();
-            this.onExternalChange();
-        };
         DateInputComponent.prototype.ngOnChanges = function () {
-            this.initDefaultItems();
             this.checkRequired();
-            this.onExternalChange();
+        };
+        DateInputComponent.prototype.ngAfterContentInit = function () {
+            this.contentInit = true;
         };
         DateInputComponent.prototype.initDefaultItems = function () {
             if (!this.items) {
@@ -2959,55 +3401,75 @@
             }
         };
         DateInputComponent.prototype.checkRequired = function () {
-            var e_1, _a;
             if (!this.id) {
                 throw Error('id is required');
             }
-            if (this.items) {
-                try {
-                    for (var _b = __values(this.items), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var item = _c.value;
-                        if (!item.name) {
-                            throw Error('item name is required');
-                        }
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
         };
         DateInputComponent.prototype.writeValue = function (value) {
             var _this = this;
             this.value = value;
             if (this.value) {
-                this.items.forEach(function (item) { return item.value = _this.value[_this.getItemName(item)]; });
+                var items = this.getItems();
+                items.forEach(function (item) { return item.value = _this.value[_this.getItemName(item)]; });
+                if (this.items) {
+                    this.itemsChange.emit(this.items);
+                }
             }
             this.onChange(value);
         };
+        DateInputComponent.prototype.overrideFieldsetParams = function (fieldset) {
+            fieldset.caller = this.innerHtml;
+            fieldset.errorId = this.getErrorId();
+            fieldset.describedBy = new MakeHtmlListPipe().transform([this.getHintId(), this.getErrorId()], null);
+            fieldset.role = 'group';
+            fieldset.detectChanges();
+        };
         DateInputComponent.prototype.onExternalChange = function () {
             var _this = this;
+            if (!this.contentInit) {
+                return;
+            }
             if (!this.value) {
                 this.value = {};
             }
-            this.items.forEach(function (item) { return _this.value[_this.getItemName(item)] = item.value; });
-            this.onChange(this.value);
+            var items = this.getItems();
+            items.forEach(function (item) { return _this.value[_this.getItemName(item)] = item.value; });
+            var newVal = {};
+            Object.assign(newVal, this.value);
+            this.onChange(newVal);
         };
-        DateInputComponent.prototype.onInternalChange = function (itemName, itemValue) {
+        DateInputComponent.prototype.onInternalChange = function (item, itemValue) {
+            var itemName = this.getItemName(item);
             if (!this.value) {
                 this.value = {};
             }
-            this.value[itemName] = itemValue ? +itemValue : undefined;
-            this.onChange(this.value);
+            if (this.value[itemName] !== itemValue) {
+                this.value[itemName] = itemValue ? +itemValue : undefined;
+                var newVal = {};
+                Object.assign(newVal, this.value);
+                this.onChange(newVal);
+                if (item instanceof DateInputDayComponent || item instanceof DateInputMonthComponent || item instanceof DateInputYearComponent) {
+                    item.valueChange.emit(itemValue);
+                }
+                if (this.items) {
+                    item.value = itemValue;
+                    this.itemsChange.emit(this.items);
+                }
+            }
         };
         DateInputComponent.prototype.hasFieldset = function () {
-            return !!(this.legendRef || this.fieldsetData
+            return !!(this.hasFieldsetComponent() || this.hasLegendComponent() || this.legendRef || this.fieldsetData
                 || (this.legendData && (this.legendData.text || this.legendData.html)) || this.legendText);
         };
+        DateInputComponent.prototype.hasFieldsetComponent = function () {
+            return !!this.fieldsetComponent;
+        };
+        DateInputComponent.prototype.hasLegendComponent = function () {
+            return !!this.legendComponent;
+        };
+        DateInputComponent.prototype.hasErrorMessageComponent = function () {
+            return !!this.errorMessageComponent;
+        };
         DateInputComponent.prototype.getItemName = function (item) {
             return this.namePrefix ? this.namePrefix + '-' + item.name : item.name;
         };
@@ -3023,12 +3485,60 @@
             }
             return labelData;
         };
+        DateInputComponent.prototype.getItemLabelRef = function (item) {
+            return item instanceof DateInputDayComponent || item instanceof DateInputMonthComponent || item instanceof DateInputYearComponent ?
+                item.labelRef : null;
+        };
+        DateInputComponent.prototype.getItems = function () {
+            var items;
+            if (this.dateInputItemComponents && this.dateInputItemComponents.length > 0) {
+                items = this.dateInputItemComponents.toArray();
+            }
+            else if (this.items) {
+                items = this.items;
+            }
+            else if (this.contentInit) {
+                items = DateInputComponent.defaultItems;
+            }
+            else {
+                items = [];
+            }
+            items.forEach(function (item) {
+                if (!item.name && !(item instanceof DateInputDividerComponent)) {
+                    throw new Error('Item name is required');
+                }
+            });
+            return items;
+        };
+        DateInputComponent.prototype.getItemDividerTemplate = function (item) {
+            return item.divider instanceof DateInputDividerComponent ? item.divider.dividerContent : null;
+        };
+        DateInputComponent.prototype.getItemDividerHtml = function (item) {
+            return item.divider.html ? item.divider.html : "<p>" + StringUtils.escapeHtml(item.divider.text) + "</p>";
+        };
         return DateInputComponent;
     }(FormFieldComponent));
+    DateInputComponent.defaultItems = [
+        {
+            name: 'day',
+            classes: 'w-14',
+            maxlength: 2
+        },
+        {
+            name: 'month',
+            classes: 'w-14',
+            maxlength: 2
+        },
+        {
+            name: 'year',
+            classes: 'w-20',
+            maxlength: 4
+        }
+    ];
     DateInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-date-input',
-                    template: "<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  <!-- date-input -->\r\n  <!-- 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 items; index as i\">\r\n      <div class=\"mr-base\">\r\n        <desy-input [labelData]=\"{text: item.label ? item.label : (item.name | titlecase)}\"\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                    [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  </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 items; index as i\">\r\n        <div class=\"mr-base\">\r\n          <desy-input [labelData]=\"getItemLabel(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.name, $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    </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 items; index as i\">\r\n      <div class=\"mr-base\">\r\n        <desy-input [labelData]=\"getItemLabel(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.name, $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  </div>\r\n</ng-template>\r\n<!-- /date-input -->\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  <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 && 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 && !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 && !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</div>\r\n",
+                    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",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -3044,16 +3554,33 @@
     DateInputComponent.propDecorators = {
         ngModelGroup: [{ type: i0.Input }],
         items: [{ type: i0.Input }],
+        itemsChange: [{ type: i0.Output }],
         namePrefix: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         formGroupClasses: [{ type: i0.Input }],
         errorMessage: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
+        fieldsetComponent: [{ type: i0.ContentChildren, args: [FieldsetComponent,] }],
+        legendComponent: [{ type: i0.ContentChildren, args: [LegendComponent,] }],
+        dateInputItemComponents: [{ type: i0.ContentChildren, args: [DateInputItemComponent,] }],
         fieldsetData: [{ type: i0.Input }],
         legendRef: [{ type: i0.Input }],
         legendData: [{ type: i0.Input }],
-        legendText: [{ type: i0.Input }]
-    };
+        legendText: [{ type: i0.Input }],
+        innerHtml: [{ type: i0.ViewChild, args: ['innerHtml', { static: true },] }]
+    };
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], DateInputComponent.prototype, "items", void 0);
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], DateInputComponent.prototype, "namePrefix", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
+    ], DateInputComponent.prototype, "fieldsetComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], DateInputComponent.prototype, "legendComponent", void 0);
 
     var SearchBarComponent = /** @class */ (function (_super) {
         __extends(SearchBarComponent, _super);
@@ -3273,7 +3800,7 @@
             return classes;
         };
         ModalComponent.prototype.getDescriptionClasses = function () {
-            var classes = 'c-p my-base text-center';
+            var classes = 'c-paragraph-base my-base text-center';
             if (this.descriptionComponent && this.descriptionComponent.classes) {
                 classes = this.descriptionComponent.classes;
             }
@@ -3295,7 +3822,7 @@
     ModalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-modal',
-                    template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-frontend.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-frontend que lo contemple -->\r\n        <ul *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li class=\"lg:inline-block mt-sm\">\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
+                    template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap gap-sm w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-html.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-html que lo contemple -->\r\n        <ul class=\"flex flex-wrap gap-sm\" *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li>\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
                 },] }
     ];
     ModalComponent.ctorParameters = function () { return [
@@ -3643,43 +4170,588 @@
         itemComponentList: [{ type: i0.ContentChildren, args: [BreadcrumbsItemComponent,] }]
     };
 
-    var HeaderComponent = /** @class */ (function (_super) {
-        __extends(HeaderComponent, _super);
-        function HeaderComponent() {
+    var HeaderOffcanvasCloseButtonComponent = /** @class */ (function (_super) {
+        __extends(HeaderOffcanvasCloseButtonComponent, _super);
+        function HeaderOffcanvasCloseButtonComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return HeaderOffcanvasCloseButtonComponent;
+    }(ContentBaseComponent));
+    HeaderOffcanvasCloseButtonComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-header-offcanvas-close-button',
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+                },] }
+    ];
+
+    var HeaderOffcanvasButtonComponent = /** @class */ (function (_super) {
+        __extends(HeaderOffcanvasButtonComponent, _super);
+        function HeaderOffcanvasButtonComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.openOffcanvas = function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/];
+            }); }); };
+            return _this;
+        }
+        HeaderOffcanvasButtonComponent.prototype.handleClick = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            event.stopPropagation();
+                            return [4 /*yield*/, this.openOffcanvas()];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        HeaderOffcanvasButtonComponent.prototype.handleEmptyContent = function (element) {
+            throw new Error(element + " content is required");
+        };
+        return HeaderOffcanvasButtonComponent;
+    }(ContentBaseComponent));
+    HeaderOffcanvasButtonComponent.decorators = [
+        { type: i0.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          (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas button')\">\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"
+                },] }
+    ];
+
+    var HeaderOffcanvasComponent = /** @class */ (function () {
+        function HeaderOffcanvasComponent(dialogService) {
+            this.dialogService = dialogService;
+            this.hostClass = '-mr-2 flex lg:hidden';
+        }
+        HeaderOffcanvasComponent.prototype.ngOnDestroy = function () {
+            if (this.isOpen()) {
+                this.close();
+            }
+        };
+        HeaderOffcanvasComponent.prototype.open = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!!this.isOpen()) return [3 /*break*/, 2];
+                            _a = this;
+                            return [4 /*yield*/, this.dialogService.openDialog(this.offcanvasContent, HeaderOffcanvasComponent.dialogOptions)];
+                        case 1:
+                            _a.dialog = (_b.sent()).dialog;
+                            this.dialogService.onCloseDialog(this.dialog).then(function () { return _this.dialog = null; });
+                            _b.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        HeaderOffcanvasComponent.prototype.close = function () {
+            if (this.isOpen()) {
+                this.dialogService.closeDialog(this.dialog);
+                this.dialog = null;
+            }
+        };
+        HeaderOffcanvasComponent.prototype.isOpen = function () {
+            return !!this.dialog;
+        };
+        /**
+         * Estable las clases del elemento html del componente
+         */
+        HeaderOffcanvasComponent.prototype.setHostClass = function () {
+            this.hostClass = this.classes ? this.classes : '-mr-2 flex lg:hidden';
+        };
+        /**
+         * Enlaza el botón del componente hijo con la acción de abrir de este componente
+         * @param button componente botón pasado como contenido
+         */
+        HeaderOffcanvasComponent.prototype.bindButton = function (button) {
+            button.openOffcanvas = this.open.bind(this);
+        };
+        HeaderOffcanvasComponent.prototype.handleEmptyContent = function (element) {
+            throw new Error(element + " content is required");
+        };
+        return HeaderOffcanvasComponent;
+    }());
+    HeaderOffcanvasComponent.dialogOptions = {
+        id: 'header-offcanvas-dialog',
+        focusOnClose: 'header-offcanvas',
+        ariaModal: 'true',
+        ariaLabelledBy: 'header-offcanvas-button-text'
+    };
+    HeaderOffcanvasComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-header-offcanvas',
+                    template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
+                },] }
+    ];
+    HeaderOffcanvasComponent.ctorParameters = function () { return [
+        { type: DialogService }
+    ]; };
+    HeaderOffcanvasComponent.propDecorators = {
+        classes: [{ type: i0.Input }],
+        hostClass: [{ type: i0.HostBinding, args: ['class',] }],
+        offcanvasContent: [{ type: i0.ViewChild, args: ['offcanvasContent',] }],
+        button: [{ type: i0.ContentChildren, args: [HeaderOffcanvasButtonComponent,] }],
+        content: [{ type: i0.ContentChildren, args: [ContentComponent,] }],
+        closeButton: [{ type: i0.ContentChildren, args: [HeaderOffcanvasCloseButtonComponent,] }]
+    };
+    __decorate([
+        DesyOnInputChange('setHostClass')
+    ], HeaderOffcanvasComponent.prototype, "classes", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'bindButton' })
+    ], HeaderOffcanvasComponent.prototype, "button", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderOffcanvasComponent.prototype, "content", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderOffcanvasComponent.prototype, "closeButton", void 0);
+
+    var HeaderNavigationItemComponent = /** @class */ (function (_super) {
+        __extends(HeaderNavigationItemComponent, _super);
+        function HeaderNavigationItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return HeaderNavigationItemComponent;
+    }(ContentBaseComponent));
+    HeaderNavigationItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-header-navigation-item',
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+                },] }
+    ];
+    HeaderNavigationItemComponent.propDecorators = {
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }]
+    };
+
+    var HeaderNavigationComponent = /** @class */ (function (_super) {
+        __extends(HeaderNavigationComponent, _super);
+        function HeaderNavigationComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        HeaderNavigationComponent.prototype.ngAfterContentInit = function () {
+            var items = this.getItems();
+            if (!items || items.length === 0) {
+                throw new Error('Header-navigation items are required');
+            }
+        };
+        HeaderNavigationComponent.prototype.getItemId = function (item, index) {
+            var prefix = this.idPrefix ? this.idPrefix : 'header-nav-item';
+            var suffix = index > 0 ? '-' + index : '';
+            return item.id ? item.id : prefix + suffix;
+        };
+        HeaderNavigationComponent.prototype.getItems = function () {
+            return this.itemComponents && this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
+        };
+        return HeaderNavigationComponent;
+    }(AccessibilityComponent));
+    HeaderNavigationComponent.decorators = [
+        { type: i0.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"
+                },] }
+    ];
+    HeaderNavigationComponent.propDecorators = {
+        idPrefix: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        items: [{ type: i0.Input }],
+        itemComponents: [{ type: i0.ContentChildren, args: [HeaderNavigationItemComponent,] }]
+    };
+
+    var NavItemComponent = /** @class */ (function (_super) {
+        __extends(NavItemComponent, _super);
+        function NavItemComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.clickEvent = new i0.EventEmitter();
+            _this.activeChange = new i0.EventEmitter();
+            return _this;
+        }
+        return NavItemComponent;
+    }(ContentBaseComponent));
+    NavItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-nav-item',
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    NavItemComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }],
+        target: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        divider: [{ type: i0.Input }],
+        clickEvent: [{ type: i0.Output }],
+        activeChange: [{ type: i0.Output }]
+    };
+
+    var NavComponent = /** @class */ (function (_super) {
+        __extends(NavComponent, _super);
+        function NavComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.hasNav = true;
+            _this.clickEvent = new i0.EventEmitter();
+            return _this;
+        }
+        NavComponent.prototype.onClick = function (event, item) {
+            var itemsActiveChange = [];
+            if (!item.active) {
+                itemsActiveChange.push(item);
+            }
+            var itemList = this.getItemList();
+            itemList.forEach(function (i) {
+                if (i.active && i !== item) {
+                    itemsActiveChange.push(i);
+                }
+                i.active = false;
+            });
+            item.active = true;
+            // Se emite el evento sólo para los items cuyo valor de active ha sido modificado
+            itemsActiveChange.forEach(function (i) {
+                if (i instanceof NavItemComponent) {
+                    i.activeChange.emit(i.active);
+                }
+            });
+            this.clickEvent.emit({ item: item, event: event });
+            if (item instanceof NavItemComponent) {
+                item.clickEvent.emit({ item: item, event: event });
+            }
+        };
+        NavComponent.prototype.ngOnChanges = function (changes) {
+            if (!this.idPrefix) {
+                throw new Error("idPrefix is required");
+            }
+        };
+        NavComponent.prototype.getItemList = function () {
+            var itemList = this.itemComponentList && this.itemComponentList.length > 0 ? this.itemComponentList.toArray() : this.items;
+            if (!itemList || itemList.length === 0) {
+                throw new Error("items are required");
+            }
+            itemList.forEach(function (element) {
+                if (!element.href && !element.routerLink) {
+                    throw new Error("href or routerLink are required");
+                }
+            });
+            return itemList;
+        };
+        NavComponent.prototype.handleContentEmpty = function (position) {
+            throw new Error("item content, html or text are required at position " + position);
+        };
+        NavComponent.prototype.getItemId = function (item, index) {
+            var id;
+            if (item.id) {
+                id = item.id;
+            }
+            else if (index === 0) {
+                id = this.getIdPrefix();
+            }
+            else {
+                id = this.getIdPrefix() + '-' + index;
+            }
+            return id;
+        };
+        NavComponent.prototype.getIdPrefix = function () {
+            return this.idPrefix ? this.idPrefix : 'nav-item';
+        };
+        return NavComponent;
+    }(AccessibilityComponent));
+    NavComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-nav',
+                    template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    NavComponent.propDecorators = {
+        hasNav: [{ type: i0.Input }],
+        idPrefix: [{ type: i0.Input }],
+        items: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        clickEvent: [{ type: i0.Output }],
+        itemComponentList: [{ type: i0.ContentChildren, args: [NavItemComponent,] }]
+    };
+
+    var HeaderSubnavComponent = /** @class */ (function (_super) {
+        __extends(HeaderSubnavComponent, _super);
+        function HeaderSubnavComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        HeaderSubnavComponent.prototype.hasSubnavItems = function () {
+            return this.nav && this.nav.getItemList().length > 0;
+        };
+        HeaderSubnavComponent.prototype.overrideNavParams = function (nav) {
+            nav.hasNav = true;
+            nav.idPrefix = 'header-subnav-nav-item';
+            nav.ariaLabel = 'Aplicaciones';
+            nav.classes = 'w-max max-w-64';
+            // nav.id = 'id-subnav-nav'; // No existe como param de navComponent
+        };
+        HeaderSubnavComponent.prototype.handleEmptyContent = function (element) {
+            throw new Error(element + " content is required");
+        };
+        return HeaderSubnavComponent;
+    }(AccessibilityComponent));
+    HeaderSubnavComponent.decorators = [
+        { type: i0.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    <h2 id=\"subnav-title\" class=\"\">\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      </desy-dropdown>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </h2>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n    <span #desyContentEmptyIgnore class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n"
+                },] }
+    ];
+    HeaderSubnavComponent.propDecorators = {
+        hiddenText: [{ type: i0.Input }],
+        classesContainer: [{ type: i0.Input }],
+        classesTooltip: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        nav: [{ type: i0.ContentChildren, args: [NavComponent,] }]
+    };
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
+    ], HeaderSubnavComponent.prototype, "nav", void 0);
+
+    var HeaderDropdownComponent = /** @class */ (function (_super) {
+        __extends(HeaderDropdownComponent, _super);
+        function HeaderDropdownComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        HeaderDropdownComponent.prototype.overrideNavParams = function (nav) {
+            nav.hasNav = true;
+            nav.idPrefix = 'header-dropdown-nav-item';
+            nav.ariaLabel = 'Menú de usuario';
+            nav.classes = 'w-max max-w-64';
+            // nav.id = 'id-dropdown-nav'; // No existe como param de navComponent
+        };
+        HeaderDropdownComponent.prototype.handleEmptyContent = function (element) {
+            throw new Error(element + " content is required");
+        };
+        return HeaderDropdownComponent;
+    }(AccessibilityComponent));
+    HeaderDropdownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-header-dropdown',
+                    template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer ? classesContainer : 'hidden lg:block'\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-content></ng-content>\r\n    </desy-dropdown>\r\n    <ng-template #caller>\r\n      <ng-content select=\"desy-nav\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n"
+                },] }
+    ];
+    HeaderDropdownComponent.propDecorators = {
+        hiddenText: [{ type: i0.Input }],
+        classesContainer: [{ type: i0.Input }],
+        classesTooltip: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        nav: [{ type: i0.ContentChildren, args: [NavComponent,] }]
+    };
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
+    ], HeaderDropdownComponent.prototype, "nav", void 0);
+
+    var SkipLinkComponent = /** @class */ (function (_super) {
+        __extends(SkipLinkComponent, _super);
+        function SkipLinkComponent(changeDetectorRef) {
+            var _this = _super.call(this) || this;
+            _this.changeDetectorRef = changeDetectorRef;
+            _this.hasContent = true;
+            return _this;
+        }
+        SkipLinkComponent.prototype.getClassNames = function () {
+            var classNames = 'c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline';
+            if (this.classes) {
+                classNames += ' ' + this.classes;
+            }
+            return classNames;
+        };
+        SkipLinkComponent.prototype.handleNoContent = function () {
+            if (!this.html && !this.text) {
+                throw new Error('skip-link content, html or text are required');
+            }
+            else {
+                this.hasContent = false;
+                this.changeDetectorRef.detectChanges();
+            }
+        };
+        return SkipLinkComponent;
+    }(AccessibilityComponent));
+    SkipLinkComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-skip-link',
+                    template: "<a *ngIf=\"hasContent\"\r\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\r\n   [class]=\"getClassNames()\"\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   (desyContentEmpty)=\"handleNoContent()\">\r\n  <ng-content></ng-content>\r\n</a>\r\n\r\n<a *ngIf=\"!hasContent\"\r\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\r\n   [class]=\"getClassNames()\"\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 *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n</a>\r\n"
+                },] }
+    ];
+    SkipLinkComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    SkipLinkComponent.propDecorators = {
+        html: [{ type: i0.Input }],
+        text: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        id: [{ type: i0.Input }]
+    };
+
+    var HeaderComponent = /** @class */ (function (_super) {
+        __extends(HeaderComponent, _super);
+        function HeaderComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        HeaderComponent.prototype.overrideSkipLinkParams = function (skiplinkComponent) {
+            skiplinkComponent.id = skiplinkComponent.id || 'skip-link';
+            skiplinkComponent.text = 'Saltar al contenido principal';
+        };
+        HeaderComponent.prototype.overrideNavigationParams = function (navigationComponent) {
+            navigationComponent.idPrefix = 'header-nav-item';
+            navigationComponent.ariaLabel = 'Menú principal';
+        };
+        return HeaderComponent;
+    }(AccessibilityComponent));
+    HeaderComponent.decorators = [
+        { type: i0.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"
+                },] }
+    ];
+    HeaderComponent.propDecorators = {
+        classes: [{ type: i0.Input }],
+        containerClasses: [{ type: i0.Input }],
+        homepageUrl: [{ type: i0.Input }],
+        homepageRouterLink: [{ type: i0.Input }],
+        homepageFragment: [{ type: i0.Input }],
+        expandedLogo: [{ type: i0.Input }],
+        subnavData: [{ type: i0.Input }],
+        navigationData: [{ type: i0.Input }],
+        dropdownData: [{ type: i0.Input }],
+        offcanvasData: [{ type: i0.Input }],
+        skiplinkComponent: [{ type: i0.ContentChildren, args: [SkipLinkComponent,] }],
+        subnavComponent: [{ type: i0.ContentChildren, args: [HeaderSubnavComponent,] }],
+        navigationComponent: [{ type: i0.ContentChildren, args: [HeaderNavigationComponent,] }],
+        dropdownComponent: [{ type: i0.ContentChildren, args: [HeaderDropdownComponent,] }],
+        offcanvasComponent: [{ type: i0.ContentChildren, args: [HeaderOffcanvasComponent,] }]
+    };
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideSkipLinkParams' })
+    ], HeaderComponent.prototype, "skiplinkComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderComponent.prototype, "subnavComponent", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideNavigationParams' })
+    ], HeaderComponent.prototype, "navigationComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderComponent.prototype, "dropdownComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderComponent.prototype, "offcanvasComponent", void 0);
+
+    var FooterNavigationItemComponent = /** @class */ (function (_super) {
+        __extends(FooterNavigationItemComponent, _super);
+        function FooterNavigationItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return FooterNavigationItemComponent;
+    }(ContentBaseComponent));
+    FooterNavigationItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-footer-navigation-item',
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+                },] }
+    ];
+    FooterNavigationItemComponent.propDecorators = {
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }]
+    };
+
+    var FooterNavigationComponent = /** @class */ (function () {
+        function FooterNavigationComponent() {
+        }
+        return FooterNavigationComponent;
+    }());
+    FooterNavigationComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-footer-navigation',
+                    template: ""
+                },] }
+    ];
+    FooterNavigationComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        columns: [{ type: i0.Input }],
+        itemComponents: [{ type: i0.ContentChildren, args: [FooterNavigationItemComponent,] }]
+    };
+
+    var FooterMetaItemComponent = /** @class */ (function (_super) {
+        __extends(FooterMetaItemComponent, _super);
+        function FooterMetaItemComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        return HeaderComponent;
-    }(AccessibilityComponent));
-    HeaderComponent.decorators = [
+        return FooterMetaItemComponent;
+    }(ContentBaseComponent));
+    FooterMetaItemComponent.decorators = [
         { type: i0.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 aria-labelledby=\"skip-link\">\r\n      <desy-skip-link 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              <div *ngIf=\"subnavData && (subnavData.text || subnavData.html)\" [ngClass]=\"subnavData\">\r\n                <desy-header-subnav [text]=\"subnavData.text\" [html]=\"subnavData.html\" [items]=\"subnavData.items\">\r\n                  <ng-container *ngIf=\"subnavData && subnavData.items && subnavData.items.length > 0\">\r\n                    <desy-nav [hasNav]=\"true\" idPrefix=\"header-subnav-nav-item\" [items]=\"subnavData.items\" [id]=\"'id-subnav-nav'\" [ariaLabel]=\"'Aplicaciones'\"></desy-nav>\r\n                  </ng-container>\r\n                </desy-header-subnav>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"navigationData && navigationData.items && navigationData.items.length > 0\">\r\n              <desy-header-navigation [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            </ng-container>\r\n          </div>\r\n          <div *ngIf=\"dropdownData && dropdownData.items && dropdownData.items.length > 0\">\r\n            <div [class]=\"dropdownData.classes ? dropdownData.classes : 'hidden lg:block'\">\r\n              <desy-header-dropdown [text]=\"dropdownData.text\" [html]=\"dropdownData.html\">\r\n                <desy-nav [hasNav]=\"true\" idPrefix=\"header-dropdown-nav-item\" [items]=\"dropdownData.items\" [id]=\"'id-dropdown-nav'\" [ariaLabel]=\"'Men\u00FA de usuario'\"></desy-nav>\r\n              </desy-header-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"offcanvasData\">\r\n            <desy-header-offcanvas-button [text]=\"offcanvasData.text\"\r\n                                          [html]=\"offcanvasData.html\"\r\n                                          [classes]=\"offcanvasData.classes\"\r\n                                          [offcanvasText]=\"offcanvasData.textClose\"\r\n                                          [offcanvasContentHtml]=\"offcanvasData.contentHtml\"></desy-header-offcanvas-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</header>\r\n"
+                    selector: 'desy-footer-meta-item',
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
                 },] }
     ];
-    HeaderComponent.propDecorators = {
-        classes: [{ type: i0.Input }],
-        containerClasses: [{ type: i0.Input }],
-        homepageUrl: [{ type: i0.Input }],
-        homepageRouterLink: [{ type: i0.Input }],
-        homepageFragment: [{ type: i0.Input }],
-        expandedLogo: [{ type: i0.Input }],
-        subnavData: [{ type: i0.Input }],
-        navigationData: [{ type: i0.Input }],
-        dropdownData: [{ type: i0.Input }],
-        offcanvasData: [{ type: i0.Input }]
+    FooterMetaItemComponent.propDecorators = {
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }]
     };
 
+    var FooterMetaComponent = /** @class */ (function (_super) {
+        __extends(FooterMetaComponent, _super);
+        function FooterMetaComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return FooterMetaComponent;
+    }(ContentBaseComponent));
+    FooterMetaComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-footer-meta',
+                    template: ''
+                },] }
+    ];
+    FooterMetaComponent.propDecorators = {
+        visuallyHiddenTitle: [{ type: i0.Input }],
+        contentComponent: [{ type: i0.ContentChildren, args: [ContentComponent,] }],
+        itemComponents: [{ type: i0.ContentChildren, args: [FooterMetaItemComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], FooterMetaComponent.prototype, "contentComponent", void 0);
+
     var FooterComponent = /** @class */ (function (_super) {
         __extends(FooterComponent, _super);
         function FooterComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        FooterComponent.prototype.getNavigationItems = function () {
+            var navItems = this.navigationComponent && this.navigationComponent.length > 0 ? this.navigationComponent.toArray() : this.navigation;
+            return navItems && navItems.length > 0 ? navItems : null;
+        };
+        FooterComponent.prototype.getNavigationItemItems = function (navigation) {
+            return navigation instanceof FooterNavigationComponent ? navigation.itemComponents.toArray() : navigation.items;
+        };
+        FooterComponent.prototype.getMetaItems = function (meta) {
+            return meta instanceof FooterMetaComponent ? meta.itemComponents.toArray() : meta.items;
+        };
+        FooterComponent.prototype.getMetaContent = function (meta) {
+            return meta instanceof FooterMetaComponent ? meta.contentComponent : null;
+        };
         return FooterComponent;
     }(AccessibilityComponent));
     FooterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-footer',
-                    template: "<!-- footer -->\r\n<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=\"navigation && navigation.length != 0\">\r\n      <div class=\"flex flex-wrap\">\r\n        <div class=\"flex-1 mr-base\" *ngFor=\"let nav of navigation\">\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 nav.items\">\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    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\r\n      <div class=\"mb-base\">\r\n        <ng-container *ngIf=\"meta\">\r\n          <h2 class=\"sr-only\">{{(meta.visuallyHiddenTitle ? meta.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\r\n          <ul class=\"flex flex-col lg:flex-row lg:flex-wrap\" *ngIf=\"meta\">\r\n            <li class=\"mb-sm mr-base\" *ngFor=\"let item of meta.items\">\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=\"meta.html || meta.text\">\r\n            <p [desyInnerContent]=\"meta.html ? meta.html : meta.text\" [isHtml]=\"meta.html\"></p>\r\n          </div>\r\n        </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\"\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\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=\"icon && icon.html\" [desyInnerContent]=\"icon.html\" [isHtml]=\"true\"></p>\r\n        <p>\r\n          <a href=\"http://www.aragon.es/Fondos_Europeos\" 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<!-- /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    {{item.text}}\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    {{item.text}}\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-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\"\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\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\" 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 = {
@@ -3687,8 +4759,17 @@
         navigation: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
         containerClasses: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }]
-    };
+        classes: [{ type: i0.Input }],
+        iconComponent: [{ type: i0.ContentChildren, args: [IconComponent,] }],
+        metaComponent: [{ type: i0.ContentChildren, args: [FooterMetaComponent,] }],
+        navigationComponent: [{ type: i0.ContentChildren, args: [FooterNavigationComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], FooterComponent.prototype, "iconComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], FooterComponent.prototype, "metaComponent", void 0);
 
     var ErrorSummaryItemComponent = /** @class */ (function (_super) {
         __extends(ErrorSummaryItemComponent, _super);
@@ -3736,7 +4817,7 @@
     ErrorSummaryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-error-summary',
-                    template: "<div [class]=\"['p-base border-2 border-alert-base', classes] | makeHtmlList\" tabindex=\"-1\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : 'alert'\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : 'error-summary-title'\"\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  <h2 class=\"mb-base font-bold\" [attr.id]=\"ariaLabelledBy ? ariaLabelledBy :'error-summary-title'\"\r\n      (desyContentEmpty)=\"handleContentRequired('title')\">\r\n    <ng-container *desyCustomInnerContent=\"{component: titleComponent, html: titleHtml, text: titleText}\"></ng-container>\r\n  </h2>\r\n    <div>\r\n        <p *ngIf=\"(descriptionComponent && descriptionComponent.getContent()) || descriptionHtml || descriptionText\" class=\"mb-base\">\r\n          <ng-container *desyCustomInnerContent=\"{component: descriptionComponent, html: descriptionHtml, text: descriptionText}\"></ng-container>\r\n        </p>\r\n        <ul class=\"font-semibold text-alert-base\">\r\n          <ng-container *ngFor=\"let item of getErrorItemList(); index as i\">\r\n            <li *ngIf=\"item.fragment\">\r\n              <a  routerLink=\"./\" [fragment]=\"item.fragment\" class=\"c-link c-link--alert\"\r\n                  (desyContentEmpty)=\"handleContentRequired('item at position ' + i)\"\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                  [attr.tabindex]=\"item.tabindex\">\r\n                <ng-container *desyCustomInnerContent=\"{component: item, html: item.html, text: item.text}\"></ng-container>\r\n              </a>\r\n            </li>\r\n            <li *ngIf=\"!item.fragment\" (desyContentEmpty)=\"handleContentRequired('item at position ' + i)\">\r\n              <ng-container *desyCustomInnerContent=\"{component: item, 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 [class]=\"['p-base bg-white border-2 border-alert-base', classes] | makeHtmlList\" tabindex=\"-1\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : 'alert'\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : 'error-summary-title'\"\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  <h2 class=\"mb-base font-bold\" [attr.id]=\"ariaLabelledBy ? ariaLabelledBy :'error-summary-title'\"\r\n      (desyContentEmpty)=\"handleContentRequired('title')\">\r\n    <ng-container *desyCustomInnerContent=\"{component: titleComponent, html: titleHtml, text: titleText}\"></ng-container>\r\n  </h2>\r\n    <div>\r\n        <p *ngIf=\"(descriptionComponent && descriptionComponent.getContent()) || descriptionHtml || descriptionText\" class=\"mb-base\">\r\n          <ng-container *desyCustomInnerContent=\"{component: descriptionComponent, html: descriptionHtml, text: descriptionText}\"></ng-container>\r\n        </p>\r\n        <ul class=\"font-semibold text-alert-base\">\r\n          <ng-container *ngFor=\"let item of getErrorItemList(); index as i\">\r\n            <li *ngIf=\"item.fragment\">\r\n              <a  routerLink=\"./\" [fragment]=\"item.fragment\" class=\"c-link c-link--alert\"\r\n                  (desyContentEmpty)=\"handleContentRequired('item at position ' + i)\"\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                  [attr.tabindex]=\"item.tabindex\">\r\n                <ng-container *desyCustomInnerContent=\"{component: item, html: item.html, text: item.text}\"></ng-container>\r\n              </a>\r\n            </li>\r\n            <li *ngIf=\"!item.fragment\" (desyContentEmpty)=\"handleContentRequired('item at position ' + i)\">\r\n              <ng-container *desyCustomInnerContent=\"{component: item, 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"
                 },] }
     ];
     ErrorSummaryComponent.propDecorators = {
@@ -3856,7 +4937,7 @@
     MenuHorizontalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-menu-horizontal',
-                    template: "<!-- menu-horizontal -->\r\n<nav [class]=\"['c-menu-horizontal', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ul class=\"c-menu-horizontal__list lg:flex lg:flex-wrap\">\r\n    <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n      <li *ngIf=\"item\">\r\n        <span *ngIf=\"item.active; else elseBlock\" [attr.id]=\"getItemId(item, i)\"\r\n              [class]=\"['c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold', item.classes] | makeHtmlList\"\r\n              [attr.title]=\"item.title ? item.title : null\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              aria-current=\"page\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n          <strong (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </span>\r\n        <ng-template #elseBlock>\r\n          <a *ngIf=\"item.routerLink && !item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [routerLink]=\"item.routerLink\"\r\n             [fragment]=\"item.fragment\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n          <a *ngIf=\"!item.routerLink && item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [href]=\"item.href | externalHref\"\r\n             [target]=\"item.target\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'opacity-50 pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n        </ng-template>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n<!-- /menu-horizontal -->\r\n"
+                    template: "<!-- menu-horizontal -->\r\n<nav [class]=\"['c-menu-horizontal', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ul class=\"c-menu-horizontal__list lg:flex lg:flex-wrap\">\r\n    <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n      <li *ngIf=\"item\">\r\n        <span *ngIf=\"item.active; else elseBlock\" [attr.id]=\"getItemId(item, i)\"\r\n              [class]=\"['c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold', item.classes] | makeHtmlList\"\r\n              [attr.title]=\"item.title ? item.title : null\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              aria-current=\"page\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n          <strong (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </span>\r\n        <ng-template #elseBlock>\r\n          <a *ngIf=\"item.routerLink && !item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [routerLink]=\"item.routerLink\"\r\n             [fragment]=\"item.fragment\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'no-underline pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n          <a *ngIf=\"!item.routerLink && item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [href]=\"item.href | externalHref\"\r\n             [target]=\"item.target\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'no-underline pointer-events-none': item.disabled}\"\r\n             [attr.disabled]=\"item.disabled ? 'disabled' : null\"\r\n             [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\">\r\n             <span class=\"flex items-center pointer-events-none\" (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n               <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n             </span>\r\n          </a>\r\n        </ng-template>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n<!-- /menu-horizontal -->\r\n"
                 },] }
     ];
     MenuHorizontalComponent.propDecorators = {
@@ -3868,65 +4949,151 @@
         clickEvent: [{ type: i0.Output }]
     };
 
+    var MenuVerticalItemSubItemComponent = /** @class */ (function (_super) {
+        __extends(MenuVerticalItemSubItemComponent, _super);
+        function MenuVerticalItemSubItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MenuVerticalItemSubItemComponent;
+    }(ContentBaseComponent));
+    MenuVerticalItemSubItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-menu-vertical-item-sub-item',
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    MenuVerticalItemSubItemComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        routerLinkActiveClasses: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }],
+        target: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        divider: [{ type: i0.Input }],
+        title: [{ type: i0.Input }]
+    };
+
+    var MenuVerticalItemSubComponent = /** @class */ (function (_super) {
+        __extends(MenuVerticalItemSubComponent, _super);
+        function MenuVerticalItemSubComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MenuVerticalItemSubComponent;
+    }(ContentBaseComponent));
+    MenuVerticalItemSubComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-menu-vertical-item-sub',
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    MenuVerticalItemSubComponent.propDecorators = {
+        classes: [{ type: i0.Input }],
+        itemComponents: [{ type: i0.ContentChildren, args: [MenuVerticalItemSubItemComponent,] }]
+    };
+
+    var MenuVerticalItemComponent = /** @class */ (function (_super) {
+        __extends(MenuVerticalItemComponent, _super);
+        function MenuVerticalItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MenuVerticalItemComponent;
+    }(ContentBaseComponent));
+    MenuVerticalItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-menu-vertical-item',
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    MenuVerticalItemComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        href: [{ type: i0.Input }],
+        routerLink: [{ type: i0.Input }],
+        routerLinkActiveClasses: [{ type: i0.Input }],
+        fragment: [{ type: i0.Input }],
+        target: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        divider: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        expanded: [{ type: i0.Input }],
+        subComponent: [{ type: i0.ContentChildren, args: [MenuVerticalItemSubComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], MenuVerticalItemComponent.prototype, "subComponent", void 0);
+
     var MenuVerticalComponent = /** @class */ (function (_super) {
         __extends(MenuVerticalComponent, _super);
         function MenuVerticalComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        MenuVerticalComponent.prototype.ngOnChanges = function (changes) {
-            if (!this.items) {
-                throw new Error("items are required");
-            }
-            else {
-                this.items.forEach(function (element) { return textOrHtmlRequiredFunction(element.text, element.html); });
-            }
+        MenuVerticalComponent.prototype.handleItemContentEmpty = function (index, isRoot) {
+            throw new Error((isRoot ? 'Item' : 'Subitem') + " content, html or text ar required at position " + index);
         };
-        MenuVerticalComponent.prototype.getItemContent = function (item) {
-            var itemContent;
+        MenuVerticalComponent.prototype.getItemHtml = function (item) {
+            var itemHtml;
             if (item.active) {
-                itemContent = item.html ? "<strong>" + item.html + "</strong>" : "<strong>" + StringUtils.escapeHtml(item.text) + "</strong>";
+                itemHtml = item.html ? "<strong>" + item.html + "</strong>" : "<strong>" + StringUtils.escapeHtml(item.text) + "</strong>";
             }
             else {
-                itemContent = item.html ? item.html : item.text;
+                itemHtml = item.html;
             }
-            return itemContent;
+            return itemHtml;
         };
         MenuVerticalComponent.prototype.getId = function (item, i) {
             if (item.id) {
                 return item.id;
             }
             else {
+                var idPrefix = this.idPrefix ? this.idPrefix : 'nav-item';
                 if (i === 0) {
-                    return this.getIdPrefix();
+                    return idPrefix;
                 }
                 else {
-                    return this.getIdPrefix() + '-' + i;
+                    return idPrefix + '-' + i;
                 }
             }
         };
         MenuVerticalComponent.prototype.getSubItemId = function (item, itemIndex, subItemIndex) {
-            var itemId = this.getId(item, itemIndex);
             var subItemId;
-            var subItem = item.sub.items[subItemIndex];
+            var sub = this.getItemSub(item);
+            var subItems = this.getSubItems(sub);
+            var subItem = subItems[subItemIndex];
             if (subItem) {
                 if (subItem.id) {
                     subItemId = subItem.id;
                 }
                 else {
+                    var itemId = this.getId(item, itemIndex);
                     subItemId = subItemIndex === 0 ? "sub-" + itemId : "sub-" + itemId + "-" + subItemIndex;
                 }
             }
             return subItemId;
         };
-        MenuVerticalComponent.prototype.getIdPrefix = function () {
-            return (this.idPrefix ? this.idPrefix : 'nav-item');
+        MenuVerticalComponent.prototype.getItems = function () {
+            var itemList = this.itemComponents && this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
+            if (!itemList || itemList.length === 0) {
+                throw new Error("items are required");
+            }
+            return itemList;
+        };
+        MenuVerticalComponent.prototype.getItemSub = function (item) {
+            return item instanceof MenuVerticalItemComponent ? item.subComponent : item.sub;
+        };
+        MenuVerticalComponent.prototype.getSubItems = function (sub) {
+            var subItems = sub instanceof MenuVerticalItemSubComponent ? sub.itemComponents.toArray() : sub.items;
+            return subItems && subItems.length > 0 ? subItems : null;
         };
         return MenuVerticalComponent;
     }(AccessibilityComponent));
     MenuVerticalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-menu-vertical',
-                    template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [desyInnerContent]=\"getItemContent(item)\" [isHtml]=\"item.html || item.active\"\r\n\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\"></a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- TODO Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\" [routerLinkActive]=\"item.routerLinkActiveClasses\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [desyInnerContent]=\"getItemContent(item)\" [isHtml]=\"item.html || item.active\"\r\n\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\"></a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n                  [desyInnerContent]=\"getItemContent(item)\" [isHtml]=\"item.html || item.active\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\"></span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && item.sub\">\r\n        <ul *ngIf=\"item.sub.items && item.sub.items.length > 0\" [ngClass]=\"item.sub.classes\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"item.sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent\"\r\n            [attr.aria-live]=\"item.sub.ariaLive\"\r\n            [attr.aria-expanded]=\"item.sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"item.sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of item.sub.items; index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"(!item.sub.items || item.sub.items.length === 0) && item.sub.html\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', item.sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\"\r\n             [desyInnerContent]=\"item.sub.html\" [isHtml]=\"true\">\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of items; index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
+                    template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
                     animations: [
                         animations.trigger('displayMenuVertical', [
                             animations.state('void', animations.style({
@@ -3949,7 +5116,8 @@
         idPrefix: [{ type: i0.Input }],
         items: [{ type: i0.Input }],
         hasUnderline: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }]
+        classes: [{ type: i0.Input }],
+        itemComponents: [{ type: i0.ContentChildren, args: [MenuVerticalItemComponent,] }]
     };
 
     var MenubaritemDirective = /** @class */ (function () {
@@ -4339,7 +5507,7 @@
             if (!items || items.length === 0) {
                 throw Error('Items are required');
             }
-            // No se ha puesto label required porque en algunos ejemplos de desy-frontend no aparece
+            // No se ha puesto label required porque en algunos ejemplos de desy-html no aparece
         };
         MenubarComponent.prototype.handleEmptyItem = function (text) {
             throw Error(text);
@@ -4721,7 +5889,7 @@
     MenubarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-menubar',
-                    template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white truncate\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white truncate focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white truncate\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
+                    template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
                 },] }
     ];
     MenubarComponent.ctorParameters = function () { return [
@@ -4747,122 +5915,6 @@
         DesyContentChild()
     ], MenubarComponent.prototype, "labelComponent", void 0);
 
-    var NavItemComponent = /** @class */ (function (_super) {
-        __extends(NavItemComponent, _super);
-        function NavItemComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.clickEvent = new i0.EventEmitter();
-            _this.activeChange = new i0.EventEmitter();
-            return _this;
-        }
-        return NavItemComponent;
-    }(ContentBaseComponent));
-    NavItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-nav-item',
-                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
-                },] }
-    ];
-    NavItemComponent.propDecorators = {
-        id: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        href: [{ type: i0.Input }],
-        routerLink: [{ type: i0.Input }],
-        fragment: [{ type: i0.Input }],
-        target: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        divider: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }],
-        activeChange: [{ type: i0.Output }]
-    };
-
-    var NavComponent = /** @class */ (function (_super) {
-        __extends(NavComponent, _super);
-        function NavComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.hasNav = true;
-            _this.clickEvent = new i0.EventEmitter();
-            return _this;
-        }
-        NavComponent.prototype.onClick = function (event, item) {
-            var itemsActiveChange = [];
-            if (!item.active) {
-                itemsActiveChange.push(item);
-            }
-            var itemList = this.getItemList();
-            itemList.forEach(function (i) {
-                if (i.active && i !== item) {
-                    itemsActiveChange.push(i);
-                }
-                i.active = false;
-            });
-            item.active = true;
-            // Se emite el evento sólo para los items cuyo valor de active ha sido modificado
-            itemsActiveChange.forEach(function (i) {
-                if (i instanceof NavItemComponent) {
-                    i.activeChange.emit(i.active);
-                }
-            });
-            this.clickEvent.emit({ item: item, event: event });
-            if (item instanceof NavItemComponent) {
-                item.clickEvent.emit({ item: item, event: event });
-            }
-        };
-        NavComponent.prototype.ngOnChanges = function (changes) {
-            if (!this.idPrefix) {
-                throw new Error("idPrefix is required");
-            }
-        };
-        NavComponent.prototype.getItemList = function () {
-            var itemList = this.itemComponentList && this.itemComponentList.length > 0 ? this.itemComponentList.toArray() : this.items;
-            if (!itemList || itemList.length === 0) {
-                throw new Error("items are required");
-            }
-            itemList.forEach(function (element) {
-                if (!element.href && !element.routerLink) {
-                    throw new Error("href or routerLink are required");
-                }
-            });
-            return itemList;
-        };
-        NavComponent.prototype.handleContentEmpty = function (position) {
-            throw new Error("item content, html or text are required at position " + position);
-        };
-        NavComponent.prototype.getItemId = function (item, index) {
-            var id;
-            if (item.id) {
-                id = item.id;
-            }
-            else if (index === 0) {
-                id = this.getIdPrefix();
-            }
-            else {
-                id = this.getIdPrefix() + '-' + index;
-            }
-            return id;
-        };
-        NavComponent.prototype.getIdPrefix = function () {
-            return this.idPrefix ? this.idPrefix : 'nav-item';
-        };
-        return NavComponent;
-    }(AccessibilityComponent));
-    NavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-nav',
-                    template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
-                },] }
-    ];
-    NavComponent.propDecorators = {
-        hasNav: [{ type: i0.Input }],
-        idPrefix: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }],
-        itemComponentList: [{ type: i0.ContentChildren, args: [NavItemComponent,] }]
-    };
-
     var NotificationItemComponent = /** @class */ (function (_super) {
         __extends(NotificationItemComponent, _super);
         function NotificationItemComponent() {
@@ -4988,32 +6040,6 @@
         DesyContentChild()
     ], NotificationComponent.prototype, "iconComponent", void 0);
 
-    var SkipLinkComponent = /** @class */ (function (_super) {
-        __extends(SkipLinkComponent, _super);
-        function SkipLinkComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        SkipLinkComponent.prototype.getClassNames = function () {
-            var classNames = 'c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline';
-            if (this.classes) {
-                classNames += ' ' + this.classes;
-            }
-            return classNames;
-        };
-        return SkipLinkComponent;
-    }(AccessibilityAndContentRequiredComponent));
-    SkipLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-skip-link',
-                    template: "<a [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\"\r\n    [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\r\n    [class]=\"getClassNames()\"\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\"><ng-content></ng-content></a>\r\n"
-                },] }
-    ];
-    SkipLinkComponent.propDecorators = {
-        fragment: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }],
-        id: [{ type: i0.Input }]
-    };
-
     var TableCellComponent = /** @class */ (function (_super) {
         __extends(TableCellComponent, _super);
         function TableCellComponent() {
@@ -5122,7 +6148,7 @@
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-table',
-                    template: "<table [class]=\"(classes ? 'c-table ' + classes : 'c-table')\"\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  <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=\"head || headerComponent\">\r\n    <tr class=\"border-t border-b border-neutral-base\">\r\n      <ng-container *ngFor=\"let headerCell of getHeaderCells()\">\r\n        <th scope=\"col\"\r\n            [class]=\"['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', headerCell.classes] | makeHtmlList\"\r\n            [attr.colspan]=\"(headerCell.colspan ?  headerCell.colspan : null)\"\r\n            [attr.rowspan]=\"(headerCell.rowspan ? headerCell.rowspan : null)\"\r\n            [attr.id]=\"headerCell.id ? headerCell.id : null\"\r\n            [attr.role]=\"headerCell.role\"\r\n            [attr.aria-describedby]=\"headerCell.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"headerCell.ariaErrorMessage\"\r\n            [attr.aria-label]=\"headerCell.ariaLabel\"\r\n            [attr.aria-labelledby]=\"headerCell.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"headerCell.ariaHidden\"\r\n            [attr.aria-disabled]=\"headerCell.ariaDisabled\"\r\n            [attr.aria-controls]=\"headerCell.ariaControls\"\r\n            [attr.aria-current]=\"headerCell.ariaCurrent\"\r\n            [attr.aria-live]=\"headerCell.ariaLive\"\r\n            [attr.aria-expanded]=\"headerCell.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"headerCell.ariaHasPopup\"\r\n            [attr.tabindex]=\"headerCell.tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: headerCell, html: headerCell.html, text: headerCell.text }\"></ng-container>\r\n        </th>\r\n      </ng-container>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of getRows(); index as rowIndex\" class=\"border-t border-b border-neutral-base\">\r\n        <ng-container *ngFor=\"let cell of getRowCells(row); first as isFirst; index as cellIndex\">\r\n            <th *ngIf=\"firstCellIsHeader && isFirst; else elseTd\" scope=\"row\"\r\n                (desyContentEmpty)=\"handleEmptyCell(cell, rowIndex, cellIndex)\"\r\n                [class]=\"['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\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 [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\r\n                    (desyContentEmpty)=\"handleEmptyCell(cell, rowIndex, cellIndex)\"\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                </td>\r\n            </ng-template>\r\n        </ng-container>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n"
+                    template: "<ng-template #tableContent>\r\n  <table [class]=\"['c-table', 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    <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=\"head || headerComponent\">\r\n      <tr class=\"border-t border-b border-neutral-base\">\r\n        <ng-container *ngFor=\"let headerCell of getHeaderCells()\">\r\n          <th scope=\"col\"\r\n              [class]=\"['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', headerCell.classes] | makeHtmlList\"\r\n              [attr.colspan]=\"(headerCell.colspan ?  headerCell.colspan : null)\"\r\n              [attr.rowspan]=\"(headerCell.rowspan ? headerCell.rowspan : null)\"\r\n              [attr.id]=\"headerCell.id ? headerCell.id : null\"\r\n              [attr.role]=\"headerCell.role\"\r\n              [attr.aria-describedby]=\"headerCell.ariaDescribedBy\"\r\n              [attr.aria-errormessage]=\"headerCell.ariaErrorMessage\"\r\n              [attr.aria-label]=\"headerCell.ariaLabel\"\r\n              [attr.aria-labelledby]=\"headerCell.ariaLabelledBy\"\r\n              [attr.aria-hidden]=\"headerCell.ariaHidden\"\r\n              [attr.aria-disabled]=\"headerCell.ariaDisabled\"\r\n              [attr.aria-controls]=\"headerCell.ariaControls\"\r\n              [attr.aria-current]=\"headerCell.ariaCurrent\"\r\n              [attr.aria-live]=\"headerCell.ariaLive\"\r\n              [attr.aria-expanded]=\"headerCell.ariaExpanded\"\r\n              [attr.aria-haspopup]=\"headerCell.ariaHasPopup\"\r\n              [attr.tabindex]=\"headerCell.tabindex\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: headerCell, html: headerCell.html, text: headerCell.text }\"></ng-container>\r\n          </th>\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let row of getRows(); index as rowIndex\" class=\"border-t border-b border-neutral-base\">\r\n          <ng-container *ngFor=\"let cell of getRowCells(row); first as isFirst; index as cellIndex\">\r\n              <th *ngIf=\"firstCellIsHeader && isFirst; else elseTd\" scope=\"row\"\r\n                  (desyContentEmpty)=\"handleEmptyCell(cell, rowIndex, cellIndex)\"\r\n                  [class]=\"['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\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 [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\r\n                      (desyContentEmpty)=\"handleEmptyCell(cell, rowIndex, cellIndex)\"\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                  </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"
                 },] }
     ];
     TableComponent.propDecorators = {
@@ -5133,6 +6159,7 @@
         firstCellIsHeader: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
+        wrapper: [{ type: i0.Input }],
         captionComponent: [{ type: i0.ContentChildren, args: [TableCaptionComponent,] }],
         headerComponent: [{ type: i0.ContentChildren, args: [TableHeaderComponent,] }],
         rowComponentList: [{ type: i0.ContentChildren, args: [TableRowComponent,] }]
@@ -5346,10 +6373,10 @@
             var _this = _super.call(this) || this;
             _this.el = el;
             _this.changeDetector = changeDetector;
-            _this.orderByType = exports.OrderBy;
             _this.rowsChange = new i0.EventEmitter();
             _this.rowsChecked = new i0.EventEmitter();
             _this.recalculateTable = new i0.EventEmitter();
+            _this.orderByType = exports.OrderBy;
             return _this;
         }
         TableAdvancedComponent.prototype.ngAfterViewInit = function () {
@@ -5589,7 +6616,7 @@
     TableAdvancedComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-table-advanced',
-                    template: "<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\">\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\"></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 class=\"px-base py-sm\" tabindex=\"-1\" *ngIf=\"hasCheckboxes\" desyFocusClickedCell>\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 esta fila</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                    (desyContentEmpty)=\"handleTableCellContentEmpty(iRow, 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                        (desyContentEmpty)=\"handleTableCellContentEmpty(iRow, 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"
+                    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                      (desyContentEmpty)=\"handleTableCellContentEmpty(iRow, 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                          (desyContentEmpty)=\"handleTableCellContentEmpty(iRow, 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 = function () { return [
@@ -5605,7 +6632,9 @@
         hasCheckboxes: [{ type: i0.Input }],
         idPrefix: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
+        checkboxClasses: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
+        wrapper: [{ type: i0.Input }],
         captionComponent: [{ type: i0.ContentChildren, args: [TableCaptionComponent,] }],
         headerComponent: [{ type: i0.ContentChildren, args: [TableAdvancedHeaderComponent,] }],
         rowComponentList: [{ type: i0.ContentChildren, args: [TableAdvancedRowComponent,] }],
@@ -5630,14 +6659,26 @@
             _this.activeChange = new i0.EventEmitter();
             _this.lastActiveState = undefined;
             _this.hasViewinit = false;
+            _this.createdCallerFromType = false;
             return _this;
-        }
-        AlertComponent.prototype.ngOnChanges = function () {
-            this.handleActiveState();
-        };
+        }
+        Object.defineProperty(AlertComponent.prototype, "active", {
+            get: function () {
+                return this._active;
+            },
+            set: function (value) {
+                var _this = this;
+                setTimeout(function () {
+                    _this._active = value;
+                    _this.cdRef.detectChanges();
+                    _this.handleActiveState();
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
         AlertComponent.prototype.ngOnDestroy = function () {
             this.active = false;
-            this.handleActiveState();
         };
         AlertComponent.prototype.ngAfterViewInit = function () {
             if (!this.id) {
@@ -5647,31 +6688,28 @@
                 throw Error('caller is required');
             }
             this.hasViewinit = true;
-            this.cdRef.detectChanges();
-            if (this.callerType) {
-                var factory = this.factoryResolver.resolveComponentFactory(this.callerType);
-                var component = this.container.createComponent(factory);
-                if (this.onCallerCreationCallback) {
-                    this.onCallerCreationCallback(this, component);
-                }
-            }
             this.handleActiveState();
-            this.cdRef.detectChanges();
         };
         AlertComponent.prototype.dismiss = function () {
             this.activeChange.emit(false);
         };
         AlertComponent.prototype.handleActiveState = function () {
-            var _this = this;
-            if (this.active !== this.lastActiveState && this.hasViewinit) {
-                this.lastActiveState = this.active;
-                if (this.active && this.focusFirst) {
-                    setTimeout(function () {
-                        var focusElem = FocusUtils.getFirstFocusableElement(_this.alertWrapper.nativeElement);
-                        if (focusElem) {
-                            setTimeout(function () { return focusElem.focus(); });
-                        }
-                    });
+            if (this._active && this.callerType && !this.createdCallerFromType) {
+                var factory = this.factoryResolver.resolveComponentFactory(this.callerType);
+                var component = this.container.createComponent(factory);
+                if (this.onCallerCreationCallback) {
+                    this.onCallerCreationCallback(this, component);
+                }
+                this.createdCallerFromType = true;
+            }
+            if (this._active !== this.lastActiveState && this.hasViewinit) {
+                this.lastActiveState = this._active;
+                if (this._active && this.focusFirst) {
+                    this.cdRef.detectChanges();
+                    var focusElem = FocusUtils.getFirstFocusableElement(this.alertWrapper.nativeElement);
+                    if (focusElem) {
+                        focusElem.focus();
+                    }
                 }
             }
         };
@@ -5680,7 +6718,7 @@
     AlertComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-alert',
-                    template: "<div #alertWrapper\r\n     [id]=\"id\" [class]=\"classes ? classes : null\" *ngIf=\"active\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\">\r\n  <ng-template #container></ng-template>\r\n  <ng-container *ngTemplateOutlet=\"caller; context:callerContext\"></ng-container>\r\n</div>\r\n\r\n"
+                    template: "<div #alertWrapper\r\n     [id]=\"id\" [class]=\"classes ? classes : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\">\r\n  <ng-container *ngIf=\"active\">\r\n    <ng-template #container></ng-template>\r\n    <ng-container *ngTemplateOutlet=\"caller; context:callerContext\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n"
                 },] }
     ];
     AlertComponent.ctorParameters = function () { return [
@@ -5859,7 +6897,7 @@
     AccordionComponent.decorators = [
         { type: i0.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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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\">Haz click en el bot\u00F3n anterior para mostrar u ocultar</p>\r\n      <div *ngIf=\"item.open\" class=\"Accordion-panel\"\r\n           (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + i)\"\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          (desyContentEmpty)=\"handleRequiredEmpty('item heading content, html or text are required at position ' + index)\"\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 #desyContentEmptyIgnore *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: "<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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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()\" (desyContentEmpty)=\"handleRequiredEmpty('heading content, html or text are required')\">\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           (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + i)\"\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          (desyContentEmpty)=\"handleRequiredEmpty('item heading content, html or text are required at position ' + index)\"\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 #desyContentEmptyIgnore *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"
                 },] }
     ];
     AccordionComponent.propDecorators = {
@@ -6139,6 +7177,11 @@
             _this.hasIconContent = true;
             return _this;
         }
+        ItemComponent.prototype.ngAfterViewInit = function () {
+            if (!this.titleComponent && !this.title) {
+                throw new Error('title is required');
+            }
+        };
         ItemComponent.prototype.getItems = function () {
             return this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
         };
@@ -6149,12 +7192,15 @@
         ItemComponent.prototype.handleRequiredEmpty = function (text) {
             throw new Error(text);
         };
+        ItemComponent.prototype.getTitle = function () {
+            return this.titleComponent ? this.titleComponent : this.title;
+        };
         return ItemComponent;
     }(AccessibilityComponent));
     ItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-item',
-                    template: "<div [class]=\"['flex flex-wrap p-base border border-neutral-base rounded', 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 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-lg\" *ngIf=\"iconComponent || icon\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n        <svg *ngSwitchCase=\"'clipboard'\" #desyContentEmptyIgnore 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'\" #desyContentEmptyIgnore 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'\" #desyContentEmptyIgnore 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    </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      <p [class]=\"titleComponent ? titleComponent.classes : title.classes\"\r\n         (desyContentEmpty)=\"handleRequiredEmpty('title ' + (titleComponent || title ? 'content, html or text are required' : 'is required'))\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: title ? title.html : null, text: title ? title.text : null }\"></ng-container>\r\n      </p>\r\n      <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\r\n         (desyContentEmpty)=\"handleRequiredEmpty('description content, html or text are required')\">\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            (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + 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         (desyContentEmpty)=\"handleRequiredEmpty(contentBottomComponent ? 'content for content at bottom is required' : 'html or text for content at bottom are required')\">\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]=\"['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-lg\" *ngIf=\"iconComponent || icon\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n        <svg *ngSwitchCase=\"'clipboard'\" #desyContentEmptyIgnore 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'\" #desyContentEmptyIgnore 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'\" #desyContentEmptyIgnore 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    </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            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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           (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\"\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         (desyContentEmpty)=\"handleRequiredEmpty('description content, html or text are required')\"\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            (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + 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         (desyContentEmpty)=\"handleRequiredEmpty(contentBottomComponent ? 'content for content at bottom is required' : 'html or text for content at bottom are required')\">\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"
                 },] }
     ];
     ItemComponent.ctorParameters = function () { return [
@@ -6163,6 +7209,7 @@
     ItemComponent.propDecorators = {
         title: [{ type: i0.Input }],
         description: [{ type: i0.Input }],
+        headingLevel: [{ type: i0.Input }],
         items: [{ type: i0.Input }],
         content: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
@@ -6285,7 +7332,7 @@
     StatusItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-status-item',
-                    template: "<ng-template #commonHtml>\r\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\"\r\n     (desyContentEmpty)=\"handleContentEmpty('title')\">\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      <dl class=\"lg:w-2/3\">\r\n        <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\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              (desyContentEmpty)=\"handleContentEmpty('term')\"\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              (desyContentEmpty)=\"handleContentEmpty('definition')\"\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    </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\">\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     (desyContentEmpty)=\"handleContentEmpty('title')\">\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                (desyContentEmpty)=\"handleContentEmpty('term')\"\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                (desyContentEmpty)=\"handleContentEmpty('definition')\"\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"
                 },] }
     ];
     StatusItemComponent.propDecorators = {
@@ -6322,10 +7369,56 @@
         DesyContentChild()
     ], StatusItemComponent.prototype, "statusComponent", void 0);
 
+    var PanelComponent = /** @class */ (function (_super) {
+        __extends(PanelComponent, _super);
+        function PanelComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return PanelComponent;
+    }(ContentBaseComponent));
+    PanelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-panel',
+                    template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>'
+                },] }
+    ];
+    PanelComponent.propDecorators = {
+        classes: [{ type: i0.Input }],
+        id: [{ type: i0.Input }]
+    };
+
+    var TabItemComponent = /** @class */ (function (_super) {
+        __extends(TabItemComponent, _super);
+        function TabItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TabItemComponent;
+    }(AccessibilityComponent));
+    TabItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-tab-item',
+                    template: ''
+                },] }
+    ];
+    TabItemComponent.propDecorators = {
+        contentComponent: [{ type: i0.ContentChildren, args: [ContentComponent,] }],
+        panelComponent: [{ type: i0.ContentChildren, args: [PanelComponent,] }],
+        classes: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        id: [{ type: i0.Input }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], TabItemComponent.prototype, "contentComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], TabItemComponent.prototype, "panelComponent", void 0);
+
     var TabsComponent = /** @class */ (function (_super) {
         __extends(TabsComponent, _super);
-        function TabsComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+        function TabsComponent(changeDetector) {
+            var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
             _this.currentTab = 0;
             return _this;
         }
@@ -6336,25 +7429,30 @@
             if (!this.tablistAriaLabel) {
                 throw new Error("tablistAriaLabel is required");
             }
-            if (!this.items) {
+        };
+        TabsComponent.prototype.ngAfterViewInit = function () {
+            var item = this.getItems();
+            this.selectTab(item.findIndex(function (value) { return !value.disabled; }));
+            this.changeDetector.detectChanges();
+        };
+        TabsComponent.prototype.getItems = function () {
+            var items = (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
+            if (!items || items.length === 0) {
                 throw new Error("items are required");
             }
-            else {
-                this.items.forEach(function (element) {
-                    if (!element.id) {
-                        throw new Error("id is required");
-                    }
-                    else {
-                        textOrHtmlRequiredFunction(element.text, element.html);
-                    }
-                    if (!element.panel) {
-                        throw new Error("panel is required");
-                    }
-                    else {
-                        textOrHtmlRequiredFunction(element.panel.text, element.panel.html);
-                    }
-                });
+            return items;
+        };
+        TabsComponent.prototype.getItemPanel = function (tab) {
+            var panel;
+            var items = this.getItems();
+            var item = items[tab];
+            if (item instanceof TabItemComponent) {
+                panel = item.panelComponent;
             }
+            return panel;
+        };
+        TabsComponent.prototype.handleContentEmpty = function (element) {
+            throw new Error(element + " content, html or text is required");
         };
         TabsComponent.prototype.getIdPrefix = function () {
             if (this.idPrefix) {
@@ -6363,8 +7461,9 @@
         };
         TabsComponent.prototype.getItemId = function (index) {
             var id;
-            if (this.items[index].id) {
-                id = this.items[index].id;
+            var item = this.getItems();
+            if (item[index].id) {
+                id = item[index].id;
             }
             else {
                 id = this.getIdPrefix() + '-' + index;
@@ -6376,57 +7475,66 @@
         };
         TabsComponent.prototype.selectTab = function (i) {
             this.currentTab = i;
+            var currentItem = this.getItems()[i];
+            this.currentPanel = currentItem instanceof TabItemComponent ? currentItem.panelComponent : currentItem.panel;
+            this.tabSrOnly.nativeElement.innerHTML = this.tabSelectorContentWrapper.toArray()[this.currentTab].nativeElement.innerHTML;
         };
         TabsComponent.prototype.focusFirstTab = function (event) {
-            var _this = this;
             if (event) {
                 event.preventDefault();
             }
-            var enabledTabs = this.tabSelectors.filter(function (item, index) { return !_this.items[index].disabled; });
+            var enabledTabs = this.tabSelectors.filter(function (item, index) { return !item[index].disabled; });
             enabledTabs[0].nativeElement.focus();
         };
         TabsComponent.prototype.focusLastTab = function (event) {
-            var _this = this;
             if (event) {
                 event.preventDefault();
             }
-            var enabledTabs = this.tabSelectors.filter(function (item, index) { return !_this.items[index].disabled; });
+            var enabledTabs = this.tabSelectors.filter(function (item, index) { return !item[index].disabled; });
             enabledTabs[enabledTabs.length - 1].nativeElement.focus();
         };
         TabsComponent.prototype.focusNextTab = function (focusedTab) {
-            var nextTab = (focusedTab + 1) % this.items.length;
+            var item = this.getItems();
+            var nextTab = (focusedTab + 1) % item.length;
             while (nextTab !== focusedTab) {
-                if (!this.items[nextTab].disabled) {
-                    this.tabSelectors.find(function (item, index) { return index === nextTab; }).nativeElement.focus();
+                if (!item[nextTab].disabled) {
+                    this.tabSelectors.find(function (i, index) { return index === nextTab; }).nativeElement.focus();
                     break;
                 }
-                nextTab = (nextTab + 1) % this.items.length;
+                nextTab = (nextTab + 1) % item.length;
             }
         };
         TabsComponent.prototype.focusPreviousTab = function (focusedTab) {
-            var previousTab = (focusedTab - 1 + this.items.length) % this.items.length;
+            var item = this.getItems();
+            var previousTab = (focusedTab - 1 + item.length) % item.length;
             while (previousTab !== focusedTab) {
-                if (!this.items[previousTab].disabled) {
-                    this.tabSelectors.find(function (item, index) { return index === previousTab; }).nativeElement.focus();
+                if (!item[previousTab].disabled) {
+                    this.tabSelectors.find(function (i, index) { return index === previousTab; }).nativeElement.focus();
                     break;
                 }
-                previousTab = (previousTab - 1 + this.items.length) % this.items.length;
+                previousTab = (previousTab - 1 + item.length) % item.length;
             }
         };
-        TabsComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.selectTab(_this.items.findIndex(function (value) { return !value.disabled; })); });
+        TabsComponent.prototype.getPanelContent = function (tab) {
+            var item = this.getItems();
+            return item[tab].panel && item[tab].panel.text ? "<p>" + StringUtils.escapeHtml(item[tab].panel.text) + "</p>" : null;
         };
         return TabsComponent;
     }(AccessibilityComponent));
     TabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-tabs',
-                    template: "<!-- tabs -->\r\n<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=\"items\">\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 items; 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 class=\"flex items-center pointer-events-none\" [desyInnerContent]=\"item.html ? item.html : item.text\" [isHtml]=\"item.html\"></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', items[currentTab].panel.classes] | makeHtmlList\"\r\n           [attr.id]=\"'tab-' + getItemId(currentTab)\"\r\n           [attr.role]=\"(items[currentTab].panel.role ? items[currentTab].panel.role : 'tabpanel')\"\r\n           [attr.aria-describedby]=\"items[currentTab].panel.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"items[currentTab].panel.ariaErrorMessage\"\r\n           [attr.aria-label]=\"items[currentTab].panel.ariaLabel\"\r\n           [attr.aria-labelledby]=\"getItemId(currentTab)\"\r\n           [attr.aria-hidden]=\"items[currentTab].panel.ariaHidden\"\r\n           [attr.aria-disabled]=\"items[currentTab].panel.ariaDisabled\"\r\n           [attr.aria-controls]=\"items[currentTab].panel.ariaControls\"\r\n           [attr.aria-current]=\"items[currentTab].panel.ariaCurrent\"\r\n           [attr.aria-live]=\"items[currentTab].panel.ariaLive\"\r\n           [attr.aria-expanded]=\"items[currentTab].panel.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"items[currentTab].panel.ariaHasPopup\"\r\n           [attr.tabindex]=\"(items[currentTab].panel.tabindex ? items[currentTab].panel.tabindex : '0')\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h1>\r\n          <h2 *ngSwitchCase=\"2\" class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h2>\r\n          <h3 *ngSwitchCase=\"3\" class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h3>\r\n          <h4 *ngSwitchCase=\"4\" class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h4>\r\n          <h5 *ngSwitchCase=\"5\" class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h5>\r\n          <h3 *ngSwitchDefault class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"\r\n              [desyInnerContent]=\"items[currentTab].html ? items[currentTab].html : items[currentTab].text\"\r\n              [isHtml]=\"items[currentTab].html\"></h3>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"items[currentTab].panel.html; else elseBlock\">\r\n          <ng-container *ngTemplateOutlet=\"items[currentTab].panel.html\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #elseBlock>\r\n          <p>{{items[currentTab].panel.text}}</p>\r\n        </ng-template>\r\n      </div>\r\n    </ng-container>    \r\n</div>\r\n<!-- /tabs -->\r\n"
+                    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\" (desyContentEmpty)=\"handleContentEmpty('contentComponent')\">\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"
                 },] }
     ];
+    TabsComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     TabsComponent.propDecorators = {
+        itemComponents: [{ type: i0.ContentChildren, args: [TabItemComponent,] }],
         tabSelectors: [{ type: i0.ViewChildren, args: ['tabSelector',] }],
+        tabSelectorContentWrapper: [{ type: i0.ViewChildren, args: ['tabSelectorContentWrapper',] }],
+        tabSrOnly: [{ type: i0.ViewChild, args: ['tabSrOnly',] }],
         id: [{ type: i0.Input }],
         idPrefix: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
@@ -6626,7 +7734,7 @@
     PaginationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-pagination',
-                    template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
+                    template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
                 },] }
     ];
     PaginationComponent.propDecorators = {
@@ -7112,6 +8220,12 @@
                         SelectComponent,
                         FileUploadComponent,
                         InputGroupComponent,
+                        InputGroupItemComponent,
+                        DateInputItemComponent,
+                        InputGroupDividerComponent,
+                        DateInputDividerComponent,
+                        InputGroupInputComponent,
+                        InputGroupSelectComponent,
                         RadiosComponent,
                         RadioItemComponent,
                         CheckboxesComponent,
@@ -7119,6 +8233,11 @@
                         DateInputComponent,
                         SearchBarComponent,
                         OptionComponent,
+                        OptionGroupComponent,
+                        SelectItemComponent,
+                        DateInputDayComponent,
+                        DateInputMonthComponent,
+                        DateInputYearComponent,
                         ConditionDirective,
                     ],
                     imports: [
@@ -7140,6 +8259,10 @@
                         SelectComponent,
                         FileUploadComponent,
                         InputGroupComponent,
+                        InputGroupDividerComponent,
+                        DateInputDividerComponent,
+                        InputGroupInputComponent,
+                        InputGroupSelectComponent,
                         RadiosComponent,
                         RadioItemComponent,
                         CheckboxesComponent,
@@ -7147,6 +8270,10 @@
                         DateInputComponent,
                         SearchBarComponent,
                         OptionComponent,
+                        OptionGroupComponent,
+                        DateInputDayComponent,
+                        DateInputMonthComponent,
+                        DateInputYearComponent,
                         ConditionDirective
                     ]
                 },] }
@@ -7310,6 +8437,8 @@
                         TabsComponent,
                         TooltipComponent,
                         TooltipContentComponent,
+                        PanelComponent,
+                        TabItemComponent,
                     ],
                     imports: [
                         common.CommonModule,
@@ -7340,6 +8469,8 @@
                         TabsComponent,
                         TooltipComponent,
                         TooltipContentComponent,
+                        PanelComponent,
+                        TabItemComponent,
                     ]
                 },] }
     ];
@@ -7406,217 +8537,6 @@
                 },] }
     ];
 
-    var HeaderSubnavComponent = /** @class */ (function (_super) {
-        __extends(HeaderSubnavComponent, _super);
-        function HeaderSubnavComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.isOpen = false;
-            _this.clickOutsideEnabled = false;
-            return _this;
-        }
-        HeaderSubnavComponent.prototype.toggleOpen = function () {
-            var _this = this;
-            this.isOpen = !this.isOpen;
-            setTimeout(function () { return _this.clickOutsideEnabled = _this.isOpen; });
-        };
-        HeaderSubnavComponent.prototype.onKeydownEscape = function () {
-            this.isOpen = false;
-            this.clickOutsideEnabled = false;
-            document.getElementById('header-subnav-button').focus();
-        };
-        return HeaderSubnavComponent;
-    }(TextOrHtmlRequiredComponent));
-    HeaderSubnavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-header-subnav',
-                    template: "<div class=\"hidden lg:flex items-center\" *ngIf=\"items; else noItems\">\r\n  <div class=\"ml-3 relative\">\r\n    <h2 id=\"subnav-title\">\r\n      <button id=\"header-subnav-button\" (click)=\"toggleOpen()\" class=\"pr-2 pl-3 py-4 border-r border-l border-neutral-base text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n              aria-haspopup=\"true\" [attr.aria-expanded]=\"isOpen\" (keydown.escape)=\"onKeydownEscape()\">\r\n        <span class=\"inline-block align-middle\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\"></span>\r\n        <svg class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\">\r\n          <g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g>\r\n        </svg>\r\n      </button>\r\n    </h2>\r\n    <div  *ngIf=\"isOpen\" @toggleDropdown\r\n          [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"toggleOpen()\"\r\n          (keydown.escape)=\"onKeydownEscape()\"\r\n          class=\"origin-top-left absolute left-0 w-64 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md\">\r\n      <div class=\"bg-white shadow-xs\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\">\r\n    <span class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    {{ text }}\r\n  </p>\r\n</ng-template>\r\n",
-                    animations: [
-                        animations.trigger('toggleDropdown', [
-                            animations.state('void', animations.style({
-                                opacity: '0.0',
-                                transform: 'scale(0.95)'
-                            })),
-                            animations.state('*', animations.style({
-                                opacity: '1.0',
-                                transform: 'scale(1.0)'
-                            })),
-                            animations.transition(':enter', [
-                                animations.animate('100ms ease-out')
-                            ]),
-                            animations.transition(':leave', [
-                                animations.animate('75ms ease-in')
-                            ])
-                        ])
-                    ]
-                },] }
-    ];
-    HeaderSubnavComponent.propDecorators = {
-        items: [{ type: i0.Input }]
-    };
-
-    var HeaderNavigationComponent = /** @class */ (function (_super) {
-        __extends(HeaderNavigationComponent, _super);
-        function HeaderNavigationComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        HeaderNavigationComponent.prototype.getItemId = function (item, index) {
-            var prefix = this.idPrefix ? this.idPrefix : 'header-nav-item';
-            var suffix = index > 0 ? '-' + index : '';
-            return item.id ? item.id : prefix + suffix;
-        };
-        return HeaderNavigationComponent;
-    }(AccessibilityComponent));
-    HeaderNavigationComponent.decorators = [
-        { type: i0.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 items; 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 [desyInnerContent]=\"item.html ? item.html : item.text\" [isHtml]=\"item.html\"></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 [desyInnerContent]=\"item.html ? item.html : item.text\" [isHtml]=\"item.html\"></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           [desyInnerContent]=\"item.html ? item.html : item.text\" [isHtml]=\"item.html\"></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           [desyInnerContent]=\"item.html ? item.html : item.text\" [isHtml]=\"item.html\"></a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n"
-                },] }
-    ];
-    HeaderNavigationComponent.propDecorators = {
-        idPrefix: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }],
-        items: [{ type: i0.Input }]
-    };
-
-    var HeaderDropdownComponent = /** @class */ (function (_super) {
-        __extends(HeaderDropdownComponent, _super);
-        function HeaderDropdownComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.isOpen = false;
-            _this.clickOutsideEnabled = false;
-            return _this;
-        }
-        HeaderDropdownComponent.prototype.toggleOpen = function () {
-            var _this = this;
-            this.isOpen = !this.isOpen;
-            setTimeout(function () { return _this.clickOutsideEnabled = _this.isOpen; });
-        };
-        HeaderDropdownComponent.prototype.onKeydownEscape = function () {
-            this.isOpen = false;
-            this.clickOutsideEnabled = false;
-            document.getElementById('header-dropdown-button').focus();
-        };
-        return HeaderDropdownComponent;
-    }(TextOrHtmlRequiredComponent));
-    HeaderDropdownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-header-dropdown',
-                    template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <div>\r\n      <button id=\"header-dropdown-button\" (click)=\"toggleOpen()\" class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base\"\r\n              aria-haspopup=\"true\" [attr.aria-expanded]=\"isOpen\" (keydown.escape)=\"onKeydownEscape()\">\r\n        <span class=\"inline-block align-middle text-right\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\"></span> <svg class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"isOpen\" @toggleDropdown (keydown.escape)=\"onKeydownEscape()\"\r\n         [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"toggleOpen()\"\r\n          class=\"origin-top-right absolute right-0 max-w-64 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md\">\r\n      <div class=\"bg-white shadow-xs\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    animations: [
-                        animations.trigger('toggleDropdown', [
-                            animations.state('void', animations.style({
-                                opacity: '0.0',
-                                transform: 'scale(0.95)'
-                            })),
-                            animations.state('*', animations.style({
-                                opacity: '1.0',
-                                transform: 'scale(1.0)'
-                            })),
-                            animations.transition(':enter', [
-                                animations.animate('100ms ease-out')
-                            ]),
-                            animations.transition(':leave', [
-                                animations.animate('75ms ease-in')
-                            ])
-                        ])
-                    ]
-                },] }
-    ];
-
-    var HeaderOffcanvasButtonComponent = /** @class */ (function (_super) {
-        __extends(HeaderOffcanvasButtonComponent, _super);
-        function HeaderOffcanvasButtonComponent(dialogService) {
-            var _this = _super.call(this) || this;
-            _this.dialogService = dialogService;
-            _this.dialogOptions = {
-                id: 'header-offcanvas-dialog',
-                focusOnClose: 'header-offcanvas',
-                ariaModal: 'true'
-            };
-            return _this;
-        }
-        HeaderOffcanvasButtonComponent.prototype.openDialog = function (offcanvas) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!!this.dialog) return [3 /*break*/, 2];
-                            this.dialogOptions.ariaLabelledBy = 'header-offcanvas-button';
-                            _a = this;
-                            return [4 /*yield*/, this.dialogService.openDialog(offcanvas, this.dialogOptions)];
-                        case 1:
-                            _a.dialog = (_b.sent()).dialog;
-                            this.dialogService.onCloseDialog(this.dialog).then(function () { return _this.dialog = null; });
-                            _b.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        HeaderOffcanvasButtonComponent.prototype.closeDialog = function () {
-            if (this.dialog) {
-                this.dialogService.closeDialog(this.dialog);
-                this.dialog = null;
-            }
-        };
-        HeaderOffcanvasButtonComponent.prototype.ngOnChanges = function (changes) {
-            this.checkRequiredParams();
-            this.class = this.classes ? this.classes : '-mr-2 flex lg:hidden';
-        };
-        HeaderOffcanvasButtonComponent.prototype.checkRequiredParams = function () {
-            if (!this.offcanvasText) {
-                throw new Error("offcanvasText is required");
-            }
-            if (!this.offcanvasContentHtml) {
-                throw new Error("offcanvasContentHtml is required");
-            }
-        };
-        return HeaderOffcanvasButtonComponent;
-    }(TextOrHtmlRequiredComponent));
-    HeaderOffcanvasButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-header-offcanvas-button',
-                    template: "<ng-template #offcanvas>\r\n   <desy-header-offcanvas [text]=\"offcanvasText\" [contentHtml]=\"offcanvasContentHtml\"\r\n                         (closeDialog)=\"closeDialog()\"></desy-header-offcanvas>\r\n</ng-template>\r\n\r\n<button id=\"header-offcanvas-button\"\r\n        (click)=\"openDialog(offcanvas)\"\r\n        tabindex=\"0\"\r\n        class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:shadow-outline-warning\" aria-haspopup=\"true\">\r\n  <span class=\"inline-block align-middle text-right\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\"></span> <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\r\n"
-                },] }
-    ];
-    HeaderOffcanvasButtonComponent.ctorParameters = function () { return [
-        { type: DialogService }
-    ]; };
-    HeaderOffcanvasButtonComponent.propDecorators = {
-        classes: [{ type: i0.Input }],
-        offcanvasText: [{ type: i0.Input }],
-        offcanvasContentHtml: [{ type: i0.Input }],
-        class: [{ type: i0.HostBinding, args: ['class',] }]
-    };
-
-    var HeaderOffcanvasComponent = /** @class */ (function () {
-        function HeaderOffcanvasComponent() {
-            this.closeDialog = new i0.EventEmitter();
-            this.clickOutsideEnabled = false;
-        }
-        HeaderOffcanvasComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.clickOutsideEnabled = true; });
-        };
-        HeaderOffcanvasComponent.prototype.onCloseDialog = function () {
-            this.closeDialog.emit();
-        };
-        return HeaderOffcanvasComponent;
-    }());
-    HeaderOffcanvasComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-header-offcanvas',
-                    template: "<div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n  <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"onCloseDialog()\">\r\n    <div class=\"text-right p-sm\">\r\n      <button (click)=\"onCloseDialog()\" id=\"header-offcanvas-button-close\"\r\n        class=\"c-button c-button--sm c-button--transparent m-sm\">{{ text }} <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg></button>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"contentHtml\"></ng-container>\r\n  </div>\r\n</div>\r\n"
-                },] }
-    ];
-    HeaderOffcanvasComponent.propDecorators = {
-        text: [{ type: i0.Input }],
-        contentHtml: [{ type: i0.Input }],
-        closeDialog: [{ type: i0.Output }]
-    };
-
     var DesyNavModule = /** @class */ (function () {
         function DesyNavModule() {
         }
@@ -7630,15 +8550,24 @@
                         ErrorSummaryComponent,
                         ErrorSummaryItemComponent,
                         FooterComponent,
+                        FooterMetaComponent,
+                        FooterMetaItemComponent,
+                        FooterNavigationComponent,
+                        FooterNavigationItemComponent,
                         HeaderComponent,
                         HeaderSubnavComponent,
                         HeaderNavigationComponent,
+                        HeaderNavigationItemComponent,
                         HeaderDropdownComponent,
                         HeaderOffcanvasButtonComponent,
                         HeaderOffcanvasComponent,
+                        HeaderOffcanvasCloseButtonComponent,
                         MenuHorizontalComponent,
                         MenuHorizontalItemComponent,
                         MenuVerticalComponent,
+                        MenuVerticalItemComponent,
+                        MenuVerticalItemSubComponent,
+                        MenuVerticalItemSubItemComponent,
                         MenubarComponent,
                         MenubarLabelComponent,
                         MenubarItemComponent,
@@ -7648,14 +8577,14 @@
                         NotificationComponent,
                         NotificationItemComponent,
                         SkipLinkComponent,
-                        NotificationComponent,
                         NavItemComponent,
                         MenubaritemDirective,
                     ],
                     imports: [
                         common.CommonModule,
                         SharedModule,
-                        DesyCommonsModule
+                        DesyCommonsModule,
+                        DesyButtonsModule
                     ],
                     exports: [
                         BreadcrumbsComponent,
@@ -7663,10 +8592,24 @@
                         ErrorSummaryComponent,
                         ErrorSummaryItemComponent,
                         FooterComponent,
+                        FooterMetaComponent,
+                        FooterMetaItemComponent,
+                        FooterNavigationComponent,
+                        FooterNavigationItemComponent,
                         HeaderComponent,
+                        HeaderSubnavComponent,
+                        HeaderNavigationComponent,
+                        HeaderNavigationItemComponent,
+                        HeaderDropdownComponent,
+                        HeaderOffcanvasComponent,
+                        HeaderOffcanvasButtonComponent,
+                        HeaderOffcanvasCloseButtonComponent,
                         MenuHorizontalComponent,
                         MenuHorizontalItemComponent,
                         MenuVerticalComponent,
+                        MenuVerticalItemComponent,
+                        MenuVerticalItemSubComponent,
+                        MenuVerticalItemSubItemComponent,
                         MenubarComponent,
                         MenubarLabelComponent,
                         MenubarItemComponent,
@@ -7845,7 +8788,6 @@
     DesyAngularModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        animations$1.BrowserAnimationsModule,
                         DesyButtonsModule,
                         DesyCommonsModule,
                         DesyFormsModule,
@@ -7917,11 +8859,24 @@
     exports.FieldsetComponent = FieldsetComponent;
     exports.FileUploadComponent = FileUploadComponent;
     exports.FooterComponent = FooterComponent;
+    exports.FooterMetaComponent = FooterMetaComponent;
+    exports.FooterMetaItemComponent = FooterMetaItemComponent;
+    exports.FooterNavigationComponent = FooterNavigationComponent;
+    exports.FooterNavigationItemComponent = FooterNavigationItemComponent;
     exports.HeaderComponent = HeaderComponent;
+    exports.HeaderDropdownComponent = HeaderDropdownComponent;
+    exports.HeaderNavigationComponent = HeaderNavigationComponent;
+    exports.HeaderOffcanvasButtonComponent = HeaderOffcanvasButtonComponent;
+    exports.HeaderOffcanvasCloseButtonComponent = HeaderOffcanvasCloseButtonComponent;
+    exports.HeaderOffcanvasComponent = HeaderOffcanvasComponent;
+    exports.HeaderSubnavComponent = HeaderSubnavComponent;
     exports.HintComponent = HintComponent;
     exports.IconComponent = IconComponent;
     exports.InputComponent = InputComponent;
     exports.InputGroupComponent = InputGroupComponent;
+    exports.InputGroupDividerComponent = InputGroupDividerComponent;
+    exports.InputGroupInputComponent = InputGroupInputComponent;
+    exports.InputGroupSelectComponent = InputGroupSelectComponent;
     exports.ItemComponent = ItemComponent;
     exports.ItemContentBottomComponent = ItemContentBottomComponent;
     exports.ItemContentRightComponent = ItemContentRightComponent;
@@ -7935,6 +8890,9 @@
     exports.MenuHorizontalComponent = MenuHorizontalComponent;
     exports.MenuHorizontalItemComponent = MenuHorizontalItemComponent;
     exports.MenuVerticalComponent = MenuVerticalComponent;
+    exports.MenuVerticalItemComponent = MenuVerticalItemComponent;
+    exports.MenuVerticalItemSubComponent = MenuVerticalItemSubComponent;
+    exports.MenuVerticalItemSubItemComponent = MenuVerticalItemSubItemComponent;
     exports.MenubarComponent = MenubarComponent;
     exports.MenubarItemComponent = MenubarItemComponent;
     exports.MenubarLabelComponent = MenubarLabelComponent;
@@ -7947,6 +8905,8 @@
     exports.NavItemComponent = NavItemComponent;
     exports.NotificationComponent = NotificationComponent;
     exports.NotificationItemComponent = NotificationItemComponent;
+    exports.OptionComponent = OptionComponent;
+    exports.OptionGroupComponent = OptionGroupComponent;
     exports.PaginationComponent = PaginationComponent;
     exports.PillComponent = PillComponent;
     exports.RadioItemComponent = RadioItemComponent;
@@ -7973,36 +8933,40 @@
     exports.TitleComponent = TitleComponent;
     exports.TooltipContentComponent = TooltipContentComponent;
     exports.summaryTextOrSummaryHtmlRequiredFunction = summaryTextOrSummaryHtmlRequiredFunction;
-    exports.ɵa = AccessibilityAndContentRequiredComponent;
-    exports.ɵb = AccessibilityAndTextOrHtmlRequiredComponent;
-    exports.ɵba = HeaderDropdownComponent;
-    exports.ɵbb = HeaderOffcanvasButtonComponent;
-    exports.ɵbc = HeaderOffcanvasComponent;
-    exports.ɵbd = FocusClickedCellDirective;
-    exports.ɵc = DesyContentChild;
-    exports.ɵd = AccessibilityComponent;
+    exports.ɵa = AccessibilityComponent;
+    exports.ɵb = AccessibilityAndContentRequiredComponent;
+    exports.ɵba = CustomInnerContentDirective;
+    exports.ɵbb = TooltipComponent;
+    exports.ɵbc = TemplateDrivenWrapperComponent;
+    exports.ɵbd = DateInputDividerComponent;
+    exports.ɵbe = DateInputDayComponent;
+    exports.ɵbf = DateInputMonthComponent;
+    exports.ɵbg = DateInputYearComponent;
+    exports.ɵbh = FocusClickedCellDirective;
+    exports.ɵc = AccessibilityAndTextOrHtmlRequiredComponent;
+    exports.ɵd = DesyContentChild;
     exports.ɵe = ContentBaseComponent;
     exports.ɵf = FormFieldComponent;
-    exports.ɵg = OptionComponent;
+    exports.ɵg = SelectItemComponent;
     exports.ɵh = DesyOnInputChange;
-    exports.ɵi = MenubaritemDirective;
-    exports.ɵj = RowDirective;
-    exports.ɵk = CellDirective;
-    exports.ɵl = SharedModule;
-    exports.ɵm = TextOrHtmlRequiredComponent;
-    exports.ɵn = InnerHtmlPipe;
-    exports.ɵo = MakeHtmlListPipe;
-    exports.ɵp = ExternalHrefPipe;
-    exports.ɵq = AttributeChangeDirective;
-    exports.ɵr = InnerContentDirective;
-    exports.ɵs = ClickOutsideDirective;
-    exports.ɵt = ContentChangeDirective;
-    exports.ɵu = ContentEmptyDirective;
-    exports.ɵv = CustomInnerContentDirective;
-    exports.ɵw = TooltipComponent;
-    exports.ɵx = TemplateDrivenWrapperComponent;
-    exports.ɵy = HeaderSubnavComponent;
-    exports.ɵz = HeaderNavigationComponent;
+    exports.ɵi = InputGroupItemComponent;
+    exports.ɵj = DateInputItemComponent;
+    exports.ɵk = HeaderNavigationItemComponent;
+    exports.ɵl = MenubaritemDirective;
+    exports.ɵm = RowDirective;
+    exports.ɵn = CellDirective;
+    exports.ɵo = TabItemComponent;
+    exports.ɵp = PanelComponent;
+    exports.ɵq = SharedModule;
+    exports.ɵr = TextOrHtmlRequiredComponent;
+    exports.ɵs = InnerHtmlPipe;
+    exports.ɵt = MakeHtmlListPipe;
+    exports.ɵu = ExternalHrefPipe;
+    exports.ɵv = AttributeChangeDirective;
+    exports.ɵw = InnerContentDirective;
+    exports.ɵx = ClickOutsideDirective;
+    exports.ɵy = ContentChangeDirective;
+    exports.ɵz = ContentEmptyDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });