desy-angular 5.1.1 → 5.2.0

package/fesm2015/desy-angular.js

@@ -56,9 +56,6 @@ ContentBaseComponent.propDecorators = {
 };
 
 class TextOrHtmlRequiredComponent {
-    ngOnChanges(changes) {
-        textOrHtmlRequiredFunction(this.text, this.html);
-    }
 }
 TextOrHtmlRequiredComponent.decorators = [
     { type: Component, args: [{
@@ -69,16 +66,7 @@ TextOrHtmlRequiredComponent.decorators = [
 TextOrHtmlRequiredComponent.propDecorators = {
     text: [{ type: Input }],
     html: [{ type: Input }]
-};
-/**
- * funcion que comprueba si existe text o html
- * salta error si no es así
- */
-function textOrHtmlRequiredFunction(text, html) {
-    if (!html && !text) {
-        throw new Error(`html or text are required`);
-    }
-}
+};
 
 class AccessibilityAndTextOrHtmlRequiredComponent extends TextOrHtmlRequiredComponent {
 }
@@ -409,7 +397,7 @@ DropdownComponent.KEY_CODE_ESC = 'Escape';
 DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-dropdown',
-                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"
+                template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button (click)=\"onClick($event)\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          aria-haspopup=\"true\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 DropdownComponent.propDecorators = {
@@ -590,18 +578,6 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
     }
     ngOnChanges() {
         setTimeout(() => {
-            /*
-             * Parámetros obligatorios
-             */
-            if (!this.id) {
-                throw Error('id is required');
-            }
-            if (!this.items && !this.itemComponentList) {
-                throw Error('items are required');
-            }
-            if (!this.label && !this.labelComponent) {
-                throw Error('label is required');
-            }
             if (this.itemComponentList && this.itemComponentList.length > 0) {
                 if (this.itemComponentSubscriptions) {
                     this.itemComponentSubscriptions.forEach(s => s.unsubscribe());
@@ -617,16 +593,6 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
             else {
                 this.itemList = this.items;
             }
-            if (this.items) {
-                for (const item of this.items) {
-                    if (item) {
-                        textOrHtmlRequiredFunction(item.text, item.html);
-                    }
-                    else {
-                        throw Error('item is ' + item);
-                    }
-                }
-            }
             this.checkActiveItems();
         });
     }
@@ -1140,21 +1106,9 @@ class TextareaComponent extends FormFieldComponent {
         super();
         this.inputTransform = (value) => value;
     }
-    ngOnChanges(changes) {
-        this.checkRequiredParams();
+    ngOnChanges() {
         this.writeValue(this.value);
     }
-    checkRequiredParams() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.name) {
-            throw Error('name is required');
-        }
-        if (!this.labelRef && !this.labelData && !this.labelText) {
-            throw Error('label is required');
-        }
-    }
     getRows() {
         return this.rows ? this.rows : TextareaComponent.DEFAULT_ROWS;
     }
@@ -1176,7 +1130,7 @@ TextareaComponent.DEFAULT_ROWS = 5;
 TextareaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-textarea',
-                template: "<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\" [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\r\n\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              [classes]=\"labelData.classes\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData\"\r\n              [id]=\"getHintId()\"\r\n              [text]=\"hintData.text\"\r\n              [html]=\"hintData.html\"\r\n              [classes]=\"hintData.classes\"\r\n              [role]=\"hintData.role\"\r\n              [ariaLabel]=\"hintData.ariaLabel\"\r\n              [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n              [ariaHidden]=\"hintData.ariaHidden\"\r\n              [ariaDisabled]=\"hintData.ariaDisabled\"\r\n              [ariaControls]=\"hintData.ariaControls\"\r\n              [ariaCurrent]=\"hintData.ariaCurrent\"\r\n              [ariaLive]=\"hintData.ariaLive\"\r\n              [ariaExpanded]=\"hintData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n              [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n              [id]=\"getErrorId()\"\r\n              [text]=\"errorMessageData.text\"\r\n              [html]=\"errorMessageData.html\"\r\n              [classes]=\"errorMessageData.classes\"\r\n              [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n              [role]=\"errorMessageData.role\"\r\n              [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n              [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n              [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n              [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n              [ariaControls]=\"errorMessageData.ariaControls\"\r\n              [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n              [ariaLive]=\"errorMessageData.ariaLive\"\r\n              [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n              [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n\r\n\r\n  <textarea #textarea\r\n            [class]=\"['block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n            [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n            [ngClass]=\"{'border-alert-base ring-2 ring-alert-base' : hasErrorsMessage()}\"\r\n            [rows]=\"getRows()\"\r\n            [attr.id]=\"id ? id : null\"\r\n            [attr.name]=\"name ? name : null\"\r\n            [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n            [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n            [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n            [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n            [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n            [attr.disabled]=\"disabled ? true : null\"\r\n            [attr.maxlength]=\"maxlength\"\r\n\r\n            [attr.role]=\"role ? role : null\"\r\n            [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n            [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n            [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n            [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n            [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n            [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n            [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n            [attr.tabindex]=\"tabindex ? tabindex : null\"></textarea>\r\n</div>\r\n",
+                template: "<div [class]=\"['c-form-group', this.formGroupClasses] | makeHtmlList\" [ngClass]=\"{'c-form-group--error': hasErrorsMessage()}\">\r\n\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              [classes]=\"labelData.classes\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData\"\r\n              [id]=\"getHintId()\"\r\n              [text]=\"hintData.text\"\r\n              [html]=\"hintData.html\"\r\n              [classes]=\"hintData.classes\"\r\n              [role]=\"hintData.role\"\r\n              [ariaLabel]=\"hintData.ariaLabel\"\r\n              [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n              [ariaHidden]=\"hintData.ariaHidden\"\r\n              [ariaDisabled]=\"hintData.ariaDisabled\"\r\n              [ariaControls]=\"hintData.ariaControls\"\r\n              [ariaCurrent]=\"hintData.ariaCurrent\"\r\n              [ariaLive]=\"hintData.ariaLive\"\r\n              [ariaExpanded]=\"hintData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n              [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n              [id]=\"getErrorId()\"\r\n              [text]=\"errorMessageData.text\"\r\n              [html]=\"errorMessageData.html\"\r\n              [classes]=\"errorMessageData.classes\"\r\n              [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n              [role]=\"errorMessageData.role\"\r\n              [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n              [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n              [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n              [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n              [ariaControls]=\"errorMessageData.ariaControls\"\r\n              [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n              [ariaLive]=\"errorMessageData.ariaLive\"\r\n              [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n              [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n\r\n\r\n  <textarea #textarea\r\n            [class]=\"['block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n            [value]=\"value ? value : ''\" (input)=\"onInput($event.target.value)\"\r\n            [ngClass]=\"{'border-alert-base ring-2 ring-alert-base' : hasErrorsMessage()}\"\r\n            [rows]=\"getRows()\"\r\n            [attr.id]=\"id ? id : null\"\r\n            [attr.name]=\"name ? name : null\"\r\n            [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n            [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n            [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n            [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n            [attr.autocomplete]=\"autocomplete ? autocomplete : null\"\r\n            [attr.disabled]=\"disabled ? true : null\"\r\n            [attr.maxlength]=\"maxlength\"\r\n\r\n            [attr.role]=\"role ? role : null\"\r\n            [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n            [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n            [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n            [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n            [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n            [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n            [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n            [attr.tabindex]=\"tabindex ? tabindex : null\"></textarea>\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1209,7 +1163,6 @@ class CharacterCountComponent extends FormFieldComponent {
         setTimeout(() => this.textarea.writeValue(this.value), 50);
     }
     ngOnChanges(changes) {
-        this.checkRequired();
         if (this.textarea) {
             setTimeout(() => this.textarea.ngOnChanges(changes), 50);
         }
@@ -1250,20 +1203,6 @@ class CharacterCountComponent extends FormFieldComponent {
         }
         return length;
     }
-    checkRequired() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.name) {
-            throw Error('name is required');
-        }
-        if (!this.maxlength && !this.maxwords) {
-            throw Error('maxlength or maxwords are required');
-        }
-        if (!this.hasLabel()) {
-            throw Error('label is required');
-        }
-    }
     registerOnChange(fn) {
         this.onChange = fn;
         if (this.textarea) {
@@ -1294,7 +1233,7 @@ class CharacterCountComponent extends FormFieldComponent {
 CharacterCountComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-character-count',
-                template: "<div>\r\n  <desy-textarea\r\n    [id]=\"id\"\r\n    [name]=\"name\"\r\n    [describedBy]=\"id + '-info'\"\r\n    [rows]=\"rows\"\r\n    [placeholder]=\"placeholder\"\r\n    formGroupClasses= \"['' + (formGroupClasses ? formGroupClasses : 'mb-0')] | makeHtmlList\"\r\n    [classes]=\"['js-character-count',  hasErrorsMessage() ? 'border-alert-base ring-2 ring-alert-base' : null, classes] | makeHtmlList\"\r\n    [labelRef]=\"labelRef\" [labelData]=\"labelData\" [labelText]=\"labelText\"\r\n    [hintRef]=\"hintRef\" [hintData]=\"hintData\" [hintText]=\"hintText\"\r\n    [errorMessageRef]=\"errorMessageRef\" [errorMessageData]=\"errorMessageData\" [errorMessageText]=\"errorMessageText\"\r\n    [role]=\"role\"\r\n    [ariaLabel]=\"ariaLabel\"\r\n    [ariaLabelledBy]=\"ariaLabelledBy\"\r\n    [ariaHidden]=\"ariaHidden\"\r\n    [ariaDisabled]=\"ariaDisabled\"\r\n    [ariaControls]=\"ariaControls\"\r\n    [ariaCurrent]=\"ariaCurrent\"\r\n    [ariaLive]=\"ariaLive\"\r\n    [ariaExpanded]=\"ariaExpanded\"\r\n    [ariaErrorMessage]=\"ariaErrorMessage\"\r\n    [ariaHasPopup]=\"ariaHasPopup\"\r\n    [tabindex]=\"tabindex\"></desy-textarea>\r\n\r\n  <desy-hint *ngIf=\"!!displayCountMessage\"\r\n    [id]=\"id + '-info'\" [classes]=\"['mt-xs text-sm', countMessageClasses] | makeHtmlList\" ariaLive=\"polite\"\r\n    [text]=\"'Puedes escribir hasta ' + remaining + (maxlength ? ' caracteres' : ' palabras')\"></desy-hint>\r\n</div>\r\n",
+                template: "<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: NG_VALUE_ACCESSOR,
@@ -1320,8 +1259,13 @@ CharacterCountComponent.propDecorators = {
 };
 
 class InputComponent extends FormFieldComponent {
+    constructor() {
+        super(...arguments);
+        //  form group class - asignar clases a la etiqueta desy-input
+        this.cfg = true;
+    }
     ngOnChanges(changes) {
-        this.checkRequired();
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
     }
     getErrorId() {
         return this.errorId ? this.errorId : super.getErrorId();
@@ -1335,22 +1279,11 @@ class InputComponent extends FormFieldComponent {
         }
         this.onChange(this.value);
     }
-    checkRequired() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.name) {
-            throw Error('name is required');
-        }
-        if (!this.hasLabel()) {
-            throw Error('label is required');
-        }
-    }
 }
 InputComponent.decorators = [
     { type: 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 [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",
+                template: "\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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1367,7 +1300,9 @@ InputComponent.propDecorators = {
     pattern: [{ type: Input }],
     inputmode: [{ type: Input }],
     placeholder: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     classes: [{ type: Input }],
     autocomplete: [{ type: Input }],
     maxlength: [{ type: Input }],
@@ -1418,13 +1353,12 @@ OptionGroupComponent.propDecorators = {
 class SelectComponent extends FormFieldComponent {
     constructor() {
         super(...arguments);
+        //  form group class - asignar clases a la etiqueta desy-select
+        this.cfg = true;
         this.contentInit = false;
     }
-    ngOnInit() {
-        this.checkRequiredParams();
-    }
     ngOnChanges(changes) {
-        this.checkRequiredParams();
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
     }
     ngAfterContentInit() {
         this.contentInit = true;
@@ -1442,19 +1376,8 @@ class SelectComponent extends FormFieldComponent {
     }
     getItems() {
         const 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;
     }
-    checkRequiredParams() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.name) {
-            throw Error('name is required');
-        }
-    }
     isItemSelected(item) {
         return this.value ? this.value === item.value : item.selected;
     }
@@ -1465,7 +1388,7 @@ class SelectComponent extends FormFieldComponent {
 SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-select',
-                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",
+                template: "\r\n     <ng-container *ngIf=\"labelComponent\">\r\n      <ng-content select=\"desy-label\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData && !labelComponent\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              [classes]=\"labelData.classes\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText && !labelComponent\" [text]=\"labelText\" [for]=\"id\"></desy-label>\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <ng-container *ngIf=\"hintComponent\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData && !hintComponent\"\r\n             [id]=\"getHintId()\"\r\n             [text]=\"hintData.text\"\r\n             [html]=\"hintData.html\"\r\n             [classes]=\"hintData.classes\"\r\n             [role]=\"hintData.role\"\r\n             [ariaLabel]=\"hintData.ariaLabel\"\r\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n             [ariaHidden]=\"hintData.ariaHidden\"\r\n             [ariaDisabled]=\"hintData.ariaDisabled\"\r\n             [ariaControls]=\"hintData.ariaControls\"\r\n             [ariaCurrent]=\"hintData.ariaCurrent\"\r\n             [ariaLive]=\"hintData.ariaLive\"\r\n             [ariaExpanded]=\"hintData.ariaExpanded\"\r\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText && !hintComponent\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData && !errorMessageComponent\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && !errorMessageComponent && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  <select\r\n    [class]=\"['c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\r\n              classes,\r\n              hasErrorsMessage() ? 'c-select--error border-alert-base ring-2 ring-alert-base' : null] | makeHtmlList\"\r\n    [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n    [attr.id]=\"id ? id : null\"\r\n    [attr.name]=\"name ? name : null\"\r\n    [attr.role]=\"role ? role : null\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n    [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n    [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n    [disabled]=disabled>\r\n\r\n    <ng-container *ngFor=\"let item of getItems()\">\r\n      <optgroup *ngIf=\"isOptionGroup(item)\" [label]=\"item.label\" [attr.disabled]=\"item.disabled ? true : null\"\r\n                [attr.role]=\"item?.role\"\r\n                [attr.aria-label]=\"item?.ariaLabel\"\r\n                [attr.aria-describedby]=\"item?.describedBy\"\r\n                [attr.aria-labelledby]=\"item?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item?.ariaHidden\"\r\n                [attr.aria-disabled]=\"item?.ariaDisabled\"\r\n                [attr.aria-controls]=\"item?.ariaControls\"\r\n                [attr.aria-current]=\"item?.ariaCurrent\"\r\n                [attr.aria-live]=\"item?.ariaLive\"\r\n                [attr.aria-expanded]=\"item?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"item?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"item?.ariaHasPopup\"\r\n                [attr.tabindex]=\"item?.tabindex\">>\r\n        <option *ngFor=\"let subItem of item.items\"\r\n                [value]=\"subItem.value\"\r\n                [disabled]=\"subItem.disabled\"\r\n                [selected]=\"isItemSelected(subItem)\"\r\n                [attr.hidden]=\"subItem.hidden\"\r\n                [attr.role]=\"subItem?.role\"\r\n                [attr.aria-label]=\"subItem?.ariaLabel\"\r\n                [attr.aria-describedby]=\"subItem?.describedBy\"\r\n                [attr.aria-labelledby]=\"subItem?.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"subItem?.ariaHidden\"\r\n                [attr.aria-disabled]=\"subItem?.ariaDisabled\"\r\n                [attr.aria-controls]=\"subItem?.ariaControls\"\r\n                [attr.aria-current]=\"subItem?.ariaCurrent\"\r\n                [attr.aria-live]=\"subItem?.ariaLive\"\r\n                [attr.aria-expanded]=\"subItem?.ariaExpanded\"\r\n                [attr.aria-errormessage]=\"subItem?.ariaErrorMessage\"\r\n                [attr.aria-haspopup]=\"subItem?.ariaHasPopup\"\r\n                [attr.tabindex]=\"subItem?.tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: subItem, text: subItem.text }\"></ng-container>\r\n        </option>\r\n      </optgroup>\r\n      <option *ngIf=\"!isOptionGroup(item)\"  [value]=\"item.value\" [disabled]=\"item.disabled ? true : null\" [selected]=\"isItemSelected(item)\"\r\n              [attr.hidden]=\"item.hidden\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.describedBy ? item.describedBy : ariaDescribedBy\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n      </option>\r\n    </ng-container>\r\n  </select>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1479,7 +1402,9 @@ SelectComponent.propDecorators = {
     name: [{ type: Input }],
     items: [{ type: Input }],
     describedBy: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     classes: [{ type: Input }],
     itemComponents: [{ type: ContentChildren, args: [SelectItemComponent,] }]
 };
@@ -1503,20 +1428,6 @@ class FileUploadComponent extends FormFieldComponent {
         this.onTouch();
         this.onChange(this.value);
     }
-    ngOnChanges(changes) {
-        this.checkRequiredParams();
-    }
-    checkRequiredParams() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.name) {
-            throw Error('name is required');
-        }
-        if (!this.labelRef && !this.labelData && !this.labelText) {
-            throw Error('label is required');
-        }
-    }
 }
 FileUploadComponent.decorators = [
     { type: Component, args: [{
@@ -1592,14 +1503,6 @@ class InputGroupInputComponent extends InputGroupItemComponent {
         this.isSelect = false;
         this.valueChange = new EventEmitter();
     }
-    ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('item name is required');
-        }
-        if (!this.labelComponent) {
-            throw Error('item label is required');
-        }
-    }
 }
 InputGroupInputComponent.decorators = [
     { type: Component, args: [{
@@ -1633,14 +1536,6 @@ class InputGroupSelectComponent extends InputGroupItemComponent {
         this.isSelect = true;
         this.valueChange = new EventEmitter();
     }
-    ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('item name is required');
-        }
-        if (!this.labelComponent) {
-            throw Error('item label is required');
-        }
-    }
 }
 InputGroupSelectComponent.decorators = [
     { type: Component, args: [{
@@ -1686,31 +1581,18 @@ class InputGroupComponent extends FormFieldComponent {
         super();
         this.controlContainer = controlContainer;
         this.itemsChange = new EventEmitter();
+        //  form group class - asignar clases a la etiqueta desy-input-group
+        this.cfg = true;
         this.contentInit = false;
     }
     ngOnChanges() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (this.items) {
-            for (const item of this.items) {
-                if (!item.divider && !item.name) {
-                    throw Error('item name is required');
-                }
-                if (!item.divider && !this.hasItemLabel(item)) {
-                    throw Error('item label is required');
-                }
-            }
-        }
+        this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
     }
     ngAfterContentInit() {
         this.contentInit = true;
     }
     ngAfterViewChecked() {
         const items = this.getItems();
-        if (!items || items.length === 0) {
-            throw Error('items are required');
-        }
     }
     writeValue(value) {
         if (value) {
@@ -1813,7 +1695,7 @@ class InputGroupComponent extends FormFieldComponent {
 InputGroupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-input-group',
-                template: "\r\n<!-- Divider no forma parte del formulario, por lo que es reutilizable en cualquier caso -->\r\n<ng-template #itemDivider let-item=\"item\">\r\n  <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n    <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData\"\r\n             [id]=\"getHintId()\"\r\n             [text]=\"hintData.text\"\r\n             [html]=\"hintData.html\"\r\n             [classes]=\"hintData.classes\"\r\n             [role]=\"hintData.role\"\r\n             [ariaLabel]=\"hintData.ariaLabel\"\r\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n             [ariaHidden]=\"hintData.ariaHidden\"\r\n             [ariaDisabled]=\"hintData.ariaDisabled\"\r\n             [ariaControls]=\"hintData.ariaControls\"\r\n             [ariaCurrent]=\"hintData.ariaCurrent\"\r\n             [ariaLive]=\"hintData.ariaLive\"\r\n             [ariaExpanded]=\"hintData.ariaExpanded\"\r\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n\r\n  <!-- Reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [formControlName]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n\r\n                     [role]=\"item.role\"\r\n                     [ariaLabel]=\"item.ariaLabel\"\r\n                     [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                     [ariaHidden]=\"item.ariaHidden\"\r\n                     [ariaDisabled]=\"item.ariaDisabled\"\r\n                     [ariaControls]=\"item.ariaControls\"\r\n                     [ariaCurrent]=\"item.ariaCurrent\"\r\n                     [ariaLive]=\"item.ariaLive\"\r\n                     [ariaExpanded]=\"item.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                     [tabindex]=\"item.tabindex\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [formControlName]=\"getItemName(item)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\r\n                    [role]=\"item.role\"\r\n                    [ariaLabel]=\"item.ariaLabel\"\r\n                    [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                    [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                    [ariaHidden]=\"item.ariaHidden\"\r\n                    [ariaDisabled]=\"item.ariaDisabled\"\r\n                    [ariaControls]=\"item.ariaControls\"\r\n                    [ariaCurrent]=\"item.ariaCurrent\"\r\n                    [ariaLive]=\"item.ariaLive\"\r\n                    [ariaExpanded]=\"item.ariaExpanded\"\r\n                    [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                    [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                    [tabindex]=\"item.tabindex\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [ngClass]=\"classes ? classes : 'flex'\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n        <ng-template #itemSelect>\r\n          <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                       [labelRef]=\"getItemLabelRef(item)\"\r\n                       [labelData]=\"getItemLabelData(item)\"\r\n                       [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                       [formGroupClasses]=\"item.formGroupClasses\"\r\n                       [name]=\"getItemName(item)\"\r\n                       [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                       [items]=\"getItemSelectOptions(item)\"\r\n\r\n                       [role]=\"item.role\"\r\n                       [ariaLabel]=\"item.ariaLabel\"\r\n                       [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                       [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                       [ariaHidden]=\"item.ariaHidden\"\r\n                       [ariaDisabled]=\"item.ariaDisabled\"\r\n                       [ariaControls]=\"item.ariaControls\"\r\n                       [ariaCurrent]=\"item.ariaCurrent\"\r\n                       [ariaLive]=\"item.ariaLive\"\r\n                       [ariaExpanded]=\"item.ariaExpanded\"\r\n                       [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                       [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                       [tabindex]=\"item.tabindex\"></desy-select>\r\n        </ng-template>\r\n        <ng-template #itemInput>\r\n          <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [labelData]=\"getItemLabelData(item)\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [formGroupClasses]=\"item.formGroupClasses\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                      [type]=\"item.type ? item.type : 'text'\"\r\n                      [inputmode]=\"item.inputmode\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern\"\r\n                      [placeholder]=\"item.placeholder\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\r\n                      [role]=\"item.role\"\r\n                      [ariaLabel]=\"item.ariaLabel\"\r\n                      [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                      [ariaHidden]=\"item.ariaHidden\"\r\n                      [ariaDisabled]=\"item.ariaDisabled\"\r\n                      [ariaControls]=\"item.ariaControls\"\r\n                      [ariaCurrent]=\"item.ariaCurrent\"\r\n                      [ariaLive]=\"item.ariaLive\"\r\n                      [ariaExpanded]=\"item.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                      [tabindex]=\"item.tabindex\"></desy-input>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n                     [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                     [role]=\"item.role\"\r\n                     [ariaLabel]=\"item.ariaLabel\"\r\n                     [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                     [ariaHidden]=\"item.ariaHidden\"\r\n                     [ariaDisabled]=\"item.ariaDisabled\"\r\n                     [ariaControls]=\"item.ariaControls\"\r\n                     [ariaCurrent]=\"item.ariaCurrent\"\r\n                     [ariaLive]=\"item.ariaLive\"\r\n                     [ariaExpanded]=\"item.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                     [tabindex]=\"item.tabindex\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\r\n                    [role]=\"item.role\"\r\n                    [ariaLabel]=\"item.ariaLabel\"\r\n                    [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                    [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                    [ariaHidden]=\"item.ariaHidden\"\r\n                    [ariaDisabled]=\"item.ariaDisabled\"\r\n                    [ariaControls]=\"item.ariaControls\"\r\n                    [ariaCurrent]=\"item.ariaCurrent\"\r\n                    [ariaLive]=\"item.ariaLive\"\r\n                    [ariaExpanded]=\"item.ariaExpanded\"\r\n                    [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                    [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                    [tabindex]=\"item.tabindex\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<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",
+                template: "\r\n<!-- Divider no forma parte del formulario, por lo que es reutilizable en cualquier caso -->\r\n<ng-template #itemDivider let-item=\"item\">\r\n  <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n    <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtml>\r\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n  <desy-hint *ngIf=\"!hintRef && hintData\"\r\n             [id]=\"getHintId()\"\r\n             [text]=\"hintData.text\"\r\n             [html]=\"hintData.html\"\r\n             [classes]=\"hintData.classes\"\r\n             [role]=\"hintData.role\"\r\n             [ariaLabel]=\"hintData.ariaLabel\"\r\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n             [ariaHidden]=\"hintData.ariaHidden\"\r\n             [ariaDisabled]=\"hintData.ariaDisabled\"\r\n             [ariaControls]=\"hintData.ariaControls\"\r\n             [ariaCurrent]=\"hintData.ariaCurrent\"\r\n             [ariaLive]=\"hintData.ariaLive\"\r\n             [ariaExpanded]=\"hintData.ariaExpanded\"\r\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n\r\n  <!-- Reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [formControlName]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n\r\n                     [role]=\"item.role\"\r\n                     [ariaLabel]=\"item.ariaLabel\"\r\n                     [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                     [ariaHidden]=\"item.ariaHidden\"\r\n                     [ariaDisabled]=\"item.ariaDisabled\"\r\n                     [ariaControls]=\"item.ariaControls\"\r\n                     [ariaCurrent]=\"item.ariaCurrent\"\r\n                     [ariaLive]=\"item.ariaLive\"\r\n                     [ariaExpanded]=\"item.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                     [tabindex]=\"item.tabindex\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [formControlName]=\"getItemName(item)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\r\n                    [role]=\"item.role\"\r\n                    [ariaLabel]=\"item.ariaLabel\"\r\n                    [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                    [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                    [ariaHidden]=\"item.ariaHidden\"\r\n                    [ariaDisabled]=\"item.ariaDisabled\"\r\n                    [ariaControls]=\"item.ariaControls\"\r\n                    [ariaCurrent]=\"item.ariaCurrent\"\r\n                    [ariaLive]=\"item.ariaLive\"\r\n                    [ariaExpanded]=\"item.ariaExpanded\"\r\n                    [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                    [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                    [tabindex]=\"item.tabindex\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [ngClass]=\"classes ? classes : 'flex'\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n        <ng-template #itemSelect>\r\n          <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                       [labelRef]=\"getItemLabelRef(item)\"\r\n                       [labelData]=\"getItemLabelData(item)\"\r\n                       [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                       [formGroupClasses]=\"item.formGroupClasses\"\r\n                       [name]=\"getItemName(item)\"\r\n                       [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                       [items]=\"getItemSelectOptions(item)\"\r\n\r\n                       [role]=\"item.role\"\r\n                       [ariaLabel]=\"item.ariaLabel\"\r\n                       [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                       [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                       [ariaHidden]=\"item.ariaHidden\"\r\n                       [ariaDisabled]=\"item.ariaDisabled\"\r\n                       [ariaControls]=\"item.ariaControls\"\r\n                       [ariaCurrent]=\"item.ariaCurrent\"\r\n                       [ariaLive]=\"item.ariaLive\"\r\n                       [ariaExpanded]=\"item.ariaExpanded\"\r\n                       [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                       [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                       [tabindex]=\"item.tabindex\"></desy-select>\r\n        </ng-template>\r\n        <ng-template #itemInput>\r\n          <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [labelData]=\"getItemLabelData(item)\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [formGroupClasses]=\"item.formGroupClasses\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                      [type]=\"item.type ? item.type : 'text'\"\r\n                      [inputmode]=\"item.inputmode\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern\"\r\n                      [placeholder]=\"item.placeholder\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\r\n                      [role]=\"item.role\"\r\n                      [ariaLabel]=\"item.ariaLabel\"\r\n                      [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                      [ariaHidden]=\"item.ariaHidden\"\r\n                      [ariaDisabled]=\"item.ariaDisabled\"\r\n                      [ariaControls]=\"item.ariaControls\"\r\n                      [ariaCurrent]=\"item.ariaCurrent\"\r\n                      [ariaLive]=\"item.ariaLive\"\r\n                      [ariaExpanded]=\"item.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                      [tabindex]=\"item.tabindex\"></desy-input>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [ngClass]=\"classes ? classes : 'flex'\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngTemplateOutlet=\"isSelectItem(item) ? itemSelect : (item.divider ? itemDivider : itemInput); context: {item: item}\"></ng-container>\r\n      <ng-template #itemSelect>\r\n        <desy-select [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                     [labelRef]=\"getItemLabelRef(item)\"\r\n                     [labelData]=\"getItemLabelData(item)\"\r\n                     [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                     [formGroupClasses]=\"item.formGroupClasses\"\r\n                     [name]=\"getItemName(item)\"\r\n                     [items]=\"getItemSelectOptions(item)\"\r\n                     [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                     [role]=\"item.role\"\r\n                     [ariaLabel]=\"item.ariaLabel\"\r\n                     [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                     [ariaHidden]=\"item.ariaHidden\"\r\n                     [ariaDisabled]=\"item.ariaDisabled\"\r\n                     [ariaControls]=\"item.ariaControls\"\r\n                     [ariaCurrent]=\"item.ariaCurrent\"\r\n                     [ariaLive]=\"item.ariaLive\"\r\n                     [ariaExpanded]=\"item.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                     [tabindex]=\"item.tabindex\"></desy-select>\r\n      </ng-template>\r\n      <ng-template #itemInput>\r\n        <desy-input [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                    [labelRef]=\"getItemLabelRef(item)\"\r\n                    [labelData]=\"getItemLabelData(item)\"\r\n                    [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                    [formGroupClasses]=\"item.formGroupClasses\"\r\n                    [name]=\"getItemName(item)\"\r\n                    [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, $event)\"\r\n                    [type]=\"item.type ? item.type : 'text'\"\r\n                    [inputmode]=\"item.inputmode\"\r\n                    [autocomplete]=\"item.autocomplete\"\r\n                    [pattern]=\"item.pattern\"\r\n                    [placeholder]=\"item.placeholder\"\r\n\r\n                    [maxlength]=\"item.maxlength\"\r\n                    [role]=\"item.role\"\r\n                    [ariaLabel]=\"item.ariaLabel\"\r\n                    [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                    [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                    [ariaHidden]=\"item.ariaHidden\"\r\n                    [ariaDisabled]=\"item.ariaDisabled\"\r\n                    [ariaControls]=\"item.ariaControls\"\r\n                    [ariaCurrent]=\"item.ariaCurrent\"\r\n                    [ariaLive]=\"item.ariaLive\"\r\n                    [ariaExpanded]=\"item.ariaExpanded\"\r\n                    [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                    [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                    [tabindex]=\"item.tabindex\"></desy-input>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n                   [classes]=\"fieldsetData.classes\"\r\n                   [id]=\"fieldsetData.id\"\r\n                   [legendData]=\"fieldsetData.legend\"\r\n                   [headingLevel]=\"fieldsetData.headingLevel\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"\r\n                   [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n                   [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n                   [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n                   [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n                   [ariaControls]=\"fieldsetData.ariaControls\"\r\n                   [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n                   [ariaLive]=\"fieldsetData.ariaLive\"\r\n                   [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n                   [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n                   [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && hasLegendComponent()\"\r\n                   [legendRef]=\"legendTemplate\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && legendRef\"\r\n                   [legendRef]=\"legendRef\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && legendData\"\r\n                   [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n                   [legendText]=\"legendText\"\r\n                   [caller]=\"innerHtml\"\r\n                   [errorId]=\"getErrorId()\"\r\n                   [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n                   role=\"group\"></desy-fieldset>\r\n\r\n    <ng-container *ngIf=\"!hasFieldset()\">\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1832,7 +1714,9 @@ InputGroupComponent.propDecorators = {
     itemsChange: [{ type: Output }],
     namePrefix: [{ type: Input }],
     classes: [{ type: Input }],
-    formGroupClasses: [{ type: Input }],
+    cfg: [{ type: HostBinding, args: ['class.c-form-group',] }],
+    cfgr: [{ type: HostBinding, args: ['class.c-form-group--error',] }],
+    formGroupClasses: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     errorMessage: [{ type: Input }],
     id: [{ type: Input }],
     fieldsetData: [{ type: Input }],
@@ -1875,9 +1759,6 @@ class RadioItemComponent extends ContentBaseComponent {
         this.radios.markForUpdateCheckboxIds();
     }
     ngOnChanges(changes) {
-        if (!this.value && !this.divider) {
-            throw Error('value or divider are required for checkbox item');
-        }
         if (this.checked !== this.lastChecked && this.isInit()) {
             this.setChecked(this.checked);
             this.radios.updateValueFromRadioItems();
@@ -2022,16 +1903,10 @@ class RadiosComponent extends FormFieldComponent {
             if (checkboxItems.length > 0) {
                 checkboxItems.forEach((item, index) => item.updateRadioId(index));
             }
-            else {
-                throw Error('items are required');
-            }
             this.updateChekboxIds = false;
         }
     }
     ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('name is required');
-        }
         this.contentInit = true;
     }
     /**
@@ -2050,9 +1925,6 @@ class RadiosComponent extends FormFieldComponent {
         this.propagateNewIdPrefixValue();
     }
     onNameChange() {
-        if (this.contentInit && !this.name) {
-            throw Error('name is required');
-        }
         if (this.contentInit) {
             this.markForUpdateCheckboxIds();
         }
@@ -2247,9 +2119,6 @@ class CheckboxItemComponent extends AccessibilityComponent {
         this.checkboxes.markForUpdateCheckboxIds();
     }
     ngOnChanges(changes) {
-        if (!this.value) {
-            throw Error('value is required for checkbox item');
-        }
         if (this.checked !== this.lastChecked && this.isInit()) {
             this.setChecked(this.checked);
             this.checkboxes.updateValueFromCheckboxItems();
@@ -2435,16 +2304,10 @@ class CheckboxesComponent extends FormFieldComponent {
             if (checkboxItems.length > 0) {
                 checkboxItems.forEach((item, index) => item.updateCheckboxId(index));
             }
-            else {
-                throw Error('items are required');
-            }
             this.updateChekboxIds = false;
         }
     }
     ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('name is required');
-        }
         this.contentInit = true;
     }
     /**
@@ -2463,9 +2326,6 @@ class CheckboxesComponent extends FormFieldComponent {
         this.propagateNewIdPrefixValue();
     }
     onNameChange() {
-        if (this.contentInit && !this.name) {
-            throw Error('name is required');
-        }
         if (this.contentInit) {
             this.markForUpdateCheckboxIds();
         }
@@ -2652,14 +2512,6 @@ class DateInputDayComponent extends DateInputItemComponent {
         super(...arguments);
         this.valueChange = new EventEmitter();
     }
-    ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('day name is required');
-        }
-        if (!this.labelComponent) {
-            throw Error('day label is required');
-        }
-    }
 }
 DateInputDayComponent.decorators = [
     { type: Component, args: [{
@@ -2693,14 +2545,6 @@ class DateInputMonthComponent extends DateInputItemComponent {
         super(...arguments);
         this.valueChange = new EventEmitter();
     }
-    ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('month name is required');
-        }
-        if (!this.labelComponent) {
-            throw Error('month label is required');
-        }
-    }
 }
 DateInputMonthComponent.decorators = [
     { type: Component, args: [{
@@ -2734,14 +2578,6 @@ class DateInputYearComponent extends DateInputItemComponent {
         super(...arguments);
         this.valueChange = new EventEmitter();
     }
-    ngAfterContentInit() {
-        if (!this.name) {
-            throw Error('year name is required');
-        }
-        if (!this.labelComponent) {
-            throw Error('year label is required');
-        }
-    }
 }
 DateInputYearComponent.decorators = [
     { type: Component, args: [{
@@ -2792,9 +2628,6 @@ class DateInputComponent extends FormFieldComponent {
         this.itemsChange = new EventEmitter();
         this.contentInit = false;
     }
-    ngOnChanges() {
-        this.checkRequired();
-    }
     ngAfterContentInit() {
         this.contentInit = true;
     }
@@ -2819,11 +2652,6 @@ class DateInputComponent extends FormFieldComponent {
             ];
         }
     }
-    checkRequired() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-    }
     writeValue(value) {
         this.value = value;
         if (this.value) {
@@ -2897,7 +2725,7 @@ class DateInputComponent extends FormFieldComponent {
         }
         else {
             labelData = {
-                text: item.labelText ? item.labelText : item.name.toUpperCase()
+                text: item.labelText ? item.labelText : (item.name ? item.name.toUpperCase() : null)
             };
         }
         return labelData;
@@ -2920,11 +2748,6 @@ class DateInputComponent extends FormFieldComponent {
         else {
             items = [];
         }
-        items.forEach(item => {
-            if (!item.name && !(item instanceof DateInputDividerComponent)) {
-                throw new Error('Item name is required');
-            }
-        });
         return items;
     }
     getItemDividerTemplate(item) {
@@ -3004,22 +2827,6 @@ class SearchBarComponent extends FormFieldComponent {
         this.clickEvent = new EventEmitter();
         this.value = '';
     }
-    ngOnChanges(changes) {
-        this.checkRequiredParams();
-    }
-    checkRequiredParams() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.hasLabel()) {
-            throw Error('label is required');
-        }
-    }
-    ngAfterViewInit() {
-        if (this.button && this.button.length > 1) {
-            throw Error('only 1 button in content is allowed');
-        }
-    }
     onClick(event) {
         if (!this.disabled) {
             this.clickEvent.emit(event);
@@ -3099,6 +2906,22 @@ class SearchUtils {
         let res = str;
         if (str) {
             res = str.toLocaleUpperCase().trim();
+            // acentos
+            res = res.replace(/Á/g, 'A');
+            res = res.replace(/É/g, 'E');
+            res = res.replace(/Í/g, 'I');
+            res = res.replace(/Ó/g, 'O');
+            res = res.replace(/Ú/g, 'U');
+            res = res.replace(/À/g, 'A');
+            res = res.replace(/È/g, 'E');
+            res = res.replace(/Ì/g, 'I');
+            res = res.replace(/Ò/g, 'O');
+            res = res.replace(/Ù/g, 'U');
+            res = res.replace(/Ä/g, 'A');
+            res = res.replace(/Ë/g, 'E');
+            res = res.replace(/Ï/g, 'I');
+            res = res.replace(/Ö/g, 'O');
+            res = res.replace(/Ü/g, 'U');
             res = res.replace('Á', 'A');
             res = res.replace('É', 'E');
             res = res.replace('Í', 'I');
@@ -3114,10 +2937,15 @@ class SearchUtils {
             res = res.replace('Ï', 'I');
             res = res.replace('Ö', 'O');
             res = res.replace('Ü', 'U');
+            // signos puntuacion
             res = res.replace(',', '');
             res = res.replace('.', '');
             res = res.replace('\'', '');
             res = res.replace('"', '');
+            res = res.replace(/\,/g, '');
+            res = res.replace(/\./g, '');
+            res = res.replace(/\'/g, '');
+            res = res.replace(/\"/g, '');
         }
         return res;
     }
@@ -3292,6 +3120,7 @@ class TreeItemComponent extends AccessibilityComponent {
         this.quitFocus = new EventEmitter();
         this.isFocus = false;
         this.isHover = false;
+        this._matchesValidText = false; // True si el contenido del item encaja con los criterios de búsqueda y se está filtrando
     }
     ngOnChanges(changes) {
         if (this.sub && this.sub.itemList) {
@@ -3535,6 +3364,7 @@ class TreeItemComponent extends AccessibilityComponent {
             const itemText = this.hiddenWrapper.nativeElement.textContent;
             matches = SearchUtils.containsAnyWordFrom(itemText, value);
         }
+        this._matchesValidText = value ? matches : false;
         return matches;
     }
     getKey() {
@@ -3557,6 +3387,9 @@ class TreeItemComponent extends AccessibilityComponent {
         }
         return parentKey;
     }
+    isActive() {
+        return this.active || this._matchesValidText;
+    }
     /*
      * Métodos privados
      */
@@ -3574,7 +3407,7 @@ TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siemp
 TreeItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-tree-item',
-                template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n    [id]=\"id\"\r\n    [class]=\"'c-tree__item focus:outline-none'\"\r\n    [ngClass]=\"{\r\n      'ml-4': subLevel === 0,\r\n      'ml-8': subLevel !== 0,\r\n      'c-tree__item--focus': isFocus && !sub,\r\n      'c-tree__item--hover': isHover && !sub,\r\n      'font-bold': active && subLevel === 0\r\n    }\"\r\n    (focusin)=\"handleItemFocus(true, !sub)\"\r\n    (focusout)=\"handleItemFocus(false, !sub)\"\r\n    (mouseover)=\"handleItemHover(true, !sub)\"\r\n    (mouseout)=\"handleItemHover(false, !sub)\"\r\n    (keydown.home)=\"handleHome($event, !sub)\"\r\n    (keydown.end)=\"handleEnd($event, !sub)\"\r\n    (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n    (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n    (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n    (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n    [attr.aria-current]=\"active && subLevel === 0 ? 'page' : null\"\r\n    [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n    [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n    [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\r\n       [ngClass]=\"{'font-bold': active}\"\r\n       [attr.title]=\"title ? title : null\"\r\n       [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n       [attr.role]=\"role ? role : 'tree'\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (active ? 'page' : null)\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n    <div class=\"font-bold\" *ngIf=\"active; else checkbox\">\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n  <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n       [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n       (focusin)=\"handleItemFocus(true)\"\r\n       (focusout)=\"handleItemFocus(false)\"\r\n       (mouseover)=\"handleItemHover(true)\"\r\n       (mouseout)=\"handleItemHover(false)\"\r\n       (keydown.home)=\"handleHome($event)\"\r\n       (keydown.end)=\"handleEnd($event)\"\r\n       (keydown.arrowup)=\"handleArrowUp($event)\"\r\n       (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n       (keydown.arrowright)=\"handleArrowRight($event)\"\r\n       (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n    <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n        <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n        <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n      </span>\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n  <li class=\"hidden\">\r\n    <div #hiddenWrapper>\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n  <desy-tree-checkbox [name]=\"name ? name : parentName\"\r\n                      [id]=\"getId()\"\r\n                      [value]=\"value\"\r\n                      [classes]=\"classes\"\r\n                      [type]=\"type\"\r\n                      [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n                      [hasError]=\"inheritedHasError\"\r\n                      [disabled]=\"disabled\"\r\n                      [hasDividers]=\"hasDividers\"\r\n                      [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n                      [isIndeterminate]=\"isIndeterminate\"\r\n                      [(indeterminateChecked)]=\"indeterminateChecked\"\r\n                      (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n                      [labelComponent]=\"label\"\r\n                      [hintComponent]=\"hint\"\r\n\r\n                      [role]=\"role\"\r\n                      [ariaLabel]=\"ariaLabel\"\r\n                      [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                      [ariaHidden]=\"ariaHidden\"\r\n                      [ariaDisabled]=\"ariaDisabled\"\r\n                      [ariaControls]=\"ariaControls\"\r\n                      [ariaCurrent]=\"ariaCurrent\"\r\n                      [ariaLive]=\"ariaLive\"\r\n                      [ariaExpanded]=\"ariaExpanded\"\r\n                      [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"ariaHasPopup\"\r\n                      [ariaModal]=\"ariaModal\"\r\n                      [tabindex]=\"tabindex\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n",
+                template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n    [id]=\"id\"\r\n    [class]=\"'c-tree__item focus:outline-none'\"\r\n    [ngClass]=\"{\r\n      'ml-4': subLevel === 0,\r\n      'ml-8': subLevel !== 0,\r\n      'c-tree__item--focus': isFocus && !sub,\r\n      'c-tree__item--hover': isHover && !sub\r\n    }\"\r\n    (focusin)=\"handleItemFocus(true, !sub)\"\r\n    (focusout)=\"handleItemFocus(false, !sub)\"\r\n    (mouseover)=\"handleItemHover(true, !sub)\"\r\n    (mouseout)=\"handleItemHover(false, !sub)\"\r\n    (keydown.home)=\"handleHome($event, !sub)\"\r\n    (keydown.end)=\"handleEnd($event, !sub)\"\r\n    (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n    (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n    (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n    (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n    [attr.aria-current]=\"isActive() && subLevel === 0 ? 'page' : null\"\r\n    [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n    [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n    [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\r\n       [attr.title]=\"title ? title : null\"\r\n       [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n       [attr.role]=\"role ? role : 'tree'\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (isActive() ? 'page' : null)\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n  </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n  <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n       [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n       (focusin)=\"handleItemFocus(true)\"\r\n       (focusout)=\"handleItemFocus(false)\"\r\n       (mouseover)=\"handleItemHover(true)\"\r\n       (mouseout)=\"handleItemHover(false)\"\r\n       (keydown.home)=\"handleHome($event)\"\r\n       (keydown.end)=\"handleEnd($event)\"\r\n       (keydown.arrowup)=\"handleArrowUp($event)\"\r\n       (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n       (keydown.arrowright)=\"handleArrowRight($event)\"\r\n       (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n    <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n        <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n        <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n      </span>\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n  <li class=\"hidden\">\r\n    <div #hiddenWrapper>\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n  <!--\r\n    El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\r\n    Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\r\n    Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\r\n    que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\r\n    ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\r\n  -->\r\n  <desy-tree-checkbox *ngIf=\"name || parentName\"\r\n                      [name]=\"name ? name : parentName\"\r\n                      [id]=\"getId()\"\r\n                      [value]=\"value\"\r\n                      [classes]=\"classes\"\r\n                      [type]=\"type\"\r\n                      [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n                      [hasError]=\"inheritedHasError\"\r\n                      [disabled]=\"disabled\"\r\n                      [hasDividers]=\"hasDividers\"\r\n                      [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n                      [isIndeterminate]=\"isIndeterminate\"\r\n                      [(indeterminateChecked)]=\"indeterminateChecked\"\r\n                      (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n                      [labelComponent]=\"label\"\r\n                      [hintComponent]=\"hint\"\r\n\r\n                      [role]=\"role\"\r\n                      [ariaLabel]=\"ariaLabel\"\r\n                      [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                      [ariaHidden]=\"ariaHidden\"\r\n                      [ariaDisabled]=\"ariaDisabled\"\r\n                      [ariaControls]=\"ariaControls\"\r\n                      [ariaCurrent]=\"ariaCurrent\"\r\n                      [ariaLive]=\"ariaLive\"\r\n                      [ariaExpanded]=\"ariaExpanded\"\r\n                      [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"ariaHasPopup\"\r\n                      [ariaModal]=\"ariaModal\"\r\n                      [tabindex]=\"tabindex\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n    <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n  </div>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
                 providers: [
                     {
                         provide: ITreeItem,
@@ -3646,6 +3479,15 @@ class TreeComponent extends FormFieldComponent {
     ngOnChanges(changes) {
         this.configureAllItems();
     }
+    /**
+     * Se sobrescribe el valor para actualizar los items
+     * @Override
+     */
+    writeValue(value) {
+        this.value = value;
+        this.configureAllItems(true);
+        this.onChange(this.value);
+    }
     /*
      * Eventos
      */
@@ -3666,17 +3508,14 @@ class TreeComponent extends FormFieldComponent {
         else if (!this.decoupleChildFromParent) {
             this.rootItems.forEach(item => item.setCheckedAutomaticallyDependingOnChildren());
         }
-        // Si es checkbox se modifica el valor y se emite
-        if (this.type === 'checkbox') {
-            this.value = [];
-            const items = this.getAllItemsInOrder();
-            items.forEach(item => {
-                if (item.checked) {
-                    this.value.push(item.value);
-                }
-            });
-            this.onChange(this.value);
-        }
+        this.value = [];
+        const items = this.getAllItemsInOrder();
+        items.forEach(item => {
+            if (item.checked) {
+                this.value.push(item.value);
+            }
+        });
+        this.onChange(this.value);
     }
     /**
      * Gestiona cuando el foco abandona un ítem desde un evento de teclado controlado
@@ -3744,7 +3583,7 @@ class TreeComponent extends FormFieldComponent {
     /**
      * Configura los items del árbol
      */
-    configureAllItems() {
+    configureAllItems(isValueChange = false) {
         if (!this._alreadyConfiguringItems) {
             this._alreadyConfiguringItems = true;
             // Lo realizamos desde un setTimeout para que todos los inputs, values y demás vivan en paz y armonía
@@ -3759,8 +3598,9 @@ class TreeComponent extends FormFieldComponent {
                         item.inheritedDescribedBy = this.getDescribedByForItems();
                         item.inheritedExpandedFirstLevel = this.expandedFirstLevel;
                         item.inheritedDecoupleChildFromParent = this.decoupleChildFromParent;
-                        if (this.value && this.value.length > 0) {
-                            item.setChecked(!!this.value.find(v => v === item.value), true);
+                        if ((this.value && this.value.length > 0) || isValueChange) {
+                            const valueList = this.value ? this.value : [];
+                            item.setChecked(!!valueList.find(v => v === item.value), true);
                         }
                         item.detectChanges();
                         const checkedSubscription = item.checkedChangeForTree.subscribe(() => this.updateValueFromItems(item));
@@ -3773,6 +3613,9 @@ class TreeComponent extends FormFieldComponent {
                     if (!this.value) {
                         this.updateValueFromItems();
                     }
+                    if (this.searchMatchValues) {
+                        this.onSearchMatchValuesChange();
+                    }
                 }
                 if (this.allItems && !this._allItemListSubscription) {
                     this._allItemListSubscription = this.allItems.changes.subscribe(() => this.configureAllItems());
@@ -3923,7 +3766,9 @@ class TreeComponent extends FormFieldComponent {
             item.setSubLevel(0);
             item.setDefaultId(`${this.idPrefix}-${index}`);
             item.refreshAllParentsExpandedRecursive(true);
-            item.setCheckedAutomaticallyDependingOnChildren();
+            if (!this.decoupleChildFromParent) {
+                item.setCheckedAutomaticallyDependingOnChildren();
+            }
             order = item.setOrderRecursively(order);
         });
     }
@@ -4014,7 +3859,7 @@ class ConditionDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         if (this.item) {
             this.item.conditionalHtml = this.templateRef;
         }
@@ -4025,9 +3870,6 @@ class ConditionDirective {
                 }
             }
         }
-        else {
-            throw Error('item or value + items are required');
-        }
     }
 }
 ConditionDirective.decorators = [
@@ -4125,14 +3967,6 @@ class ModalComponent extends AccessibilityComponent {
         }
         return type;
     }
-    ngOnChanges(changes) {
-        if (!this.id) {
-            throw new Error(`id are required`);
-        }
-    }
-    handleRequiredEmpty(element) {
-        throw new Error(`${element} is required`);
-    }
     checkDescriptionContent(element) {
         const childs = element.nativeElement.childNodes;
         let hasHtml = false;
@@ -4151,9 +3985,6 @@ class ModalComponent extends AccessibilityComponent {
         this.descriptionIsEmpty = !hasContent;
         this.descriptionIsHtml = hasHtml;
         this.changeDetectorRef.detectChanges();
-        if (!hasContent && !descriptionWasEmpty) {
-            this.handleRequiredEmpty('description');
-        }
     }
     clickButtonEmit(item, event) {
         this.clickButton.emit(event);
@@ -4197,7 +4028,7 @@ class ModalComponent extends AccessibilityComponent {
 ModalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-modal',
-                template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\"\r\n       (desyContentEmpty)=\"handleIconContentEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconContentEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\"\r\n        (desyContentEmpty)=\"handleRequiredEmpty('title')\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap gap-sm w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-html.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-html que lo contemple -->\r\n        <ul class=\"flex flex-wrap gap-sm\" *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li>\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
+                template: "<div [class]=\"[ 'relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div *ngIf=\"iconComponent || icon\" class=\"flex justify-center p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"!hasIconContent\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'discard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'delete'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-alert-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'edit'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z\" stroke-width=\"8.749995\"/><path d=\"M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'changes'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75\" stroke-width=\"8.749995\"/><path d=\"M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5\" stroke-width=\"8.749995\"/></g></svg>\r\n        <svg *ngSwitchCase=\"'publish'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" focusable=\"false\" aria-hidden=\"true\" role=\"presentation\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z\" stroke-width=\"8.749995\"/><path d=\"M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11\" stroke-width=\"8.749995\"/></g></svg>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n    <h1 *ngSwitchCase=\"1\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h1>\r\n    <h2 *ngSwitchCase=\"2\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h2>\r\n    <h3 *ngSwitchCase=\"3\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h3>\r\n    <h4 *ngSwitchCase=\"4\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h4>\r\n    <h5 *ngSwitchCase=\"5\" [attr.id]=\"'label-' + id\" [class]=\"getTitleClasses()\" tabindex=\"-1\">\r\n      <ng-container *desyCustomInnerContent=\"{\r\n        component: this.titleComponent,\r\n        html: this.title ? this.title.html : null,\r\n        text: this.title ? this.title.text : null\r\n      }\"></ng-container>\r\n    </h5>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n       (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </div>\r\n  <p *ngIf=\"!descriptionIsHtml\" [class]=\"getDescriptionClasses()\"\r\n     (desyContentChange)=\"checkDescriptionContent($event)\" [observeProperties]=\"{ attributes: false, childList: true, characterData: true, subtree: true }\">\r\n    <ng-container *desyCustomInnerContent=\"{\r\n      component: descriptionComponent,\r\n      html: description ? description.html : null,\r\n      text: description ? description.text : null\r\n    }\"></ng-container>\r\n  </p>\r\n\r\n  <div *ngIf=\"contentComponent || caller\" class=\"p-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"flex flex-wrap gap-sm w-full\" [ngClass]=\"(itemsPrimary || (primaryButtonComponents && primaryButtonComponents.length > 0)) && (itemsSecondary || (secondaryButtonComponents && secondaryButtonComponents.length > 0)) ? 'justify-between' : 'justify-center'\">\r\n    <ng-template #buttons let-items=\"items\">\r\n      <ng-container *ngIf=\"items\">\r\n        <div class=\"mt-sm\" *ngIf=\"items.length === 1\">\r\n          <desy-button (clickEvent)=\"clickButtonEmit(items[0], $event)\" [classes]=\"items[0].classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: items[0], text: items[0].text }\"></ng-container>\r\n          </desy-button>\r\n        </div>\r\n\r\n        <!-- FIXME De momento se mantiene el nbsp por no tener clases diferentes a desy-html.\r\n              Eliminar al adaptar a una versi\u00F3n de desy-html que lo contemple -->\r\n        <ul class=\"flex flex-wrap gap-sm\" *ngIf=\"items.length > 1\">\r\n          <ng-container *ngFor=\"let item of items\">\r\n            <li>\r\n              <desy-button (clickEvent)=\"clickButtonEmit(item, $event)\" [classes]=\"item.classes\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n              </desy-button>\r\n            </li>&nbsp;\r\n          </ng-container>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getPrimaryItems() }\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"buttons; context: { items: getSecondaryItems() }\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isDismissible\">\r\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\r\n      <button (click)=\"closeDialog()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar la ventana emergente\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n"
             },] }
 ];
 ModalComponent.ctorParameters = () => [
@@ -4253,12 +4084,6 @@ class DialogComponent extends AccessibilityComponent {
         }
     }
     ngAfterViewInit() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.caller && !this.callerType) {
-            throw Error('caller is required');
-        }
         if (this.callerType) {
             const factory = this.factoryResolver.resolveComponentFactory(this.callerType);
             const component = this.container.createComponent(factory);
@@ -4399,14 +4224,13 @@ class DialogService {
         });
     }
     closeDialog(dialog) {
-        if (!dialog) {
-            throw Error('dialog is required');
-        }
-        if (dialog instanceof ComponentRef) {
-            dialog.instance.dismiss();
-        }
-        else {
-            dialog.dismiss();
+        if (dialog) {
+            if (dialog instanceof ComponentRef) {
+                dialog.instance.dismiss();
+            }
+            else {
+                dialog.dismiss();
+            }
         }
     }
     onCloseDialog(dialog) {
@@ -4503,19 +4327,13 @@ class BreadcrumbsComponent extends AccessibilityComponent {
     }
     getItemList() {
         const itemList = this.itemComponentList && this.itemComponentList.length > 0 ? this.itemComponentList.toArray() : this.items;
-        if (!itemList || itemList.length === 0) {
-            throw new Error(`items are required`);
-        }
         return itemList;
     }
-    handleEmptyItem(position) {
-        throw new Error(`item content, html or text are required at position ${position}`);
-    }
 }
 BreadcrumbsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-breadcrumbs',
-                template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile==true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\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 ? ariaLabel : 'Est\u00E1s en: '\"\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    <ol [class]=\"'lg:grid lg:grid-cols-max-content-'+getLength()+' w-full items-baseline text-sm'\">\r\n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\r\n            <a (click)=\"goBack()\" class=\"px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black cursor-pointer\">\r\n                <span class=\"sr-only\">Volver a la p\u00E1gina anterior</span><span aria-hidden=\"true\" title=\"Volver a la p\u00E1gina anterior\">&larr;</span>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\r\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\r\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\r\n                   (desyContentEmpty)=\"handleEmptyItem(index)\"\r\n                    [routerLink]=\"item.routerLink\"\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                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\r\n                      (desyContentEmpty)=\"handleEmptyItem(index)\"\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                </span>\r\n            </li>\r\n            <li *ngIf=\"isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark flex-1 font-semibold\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\r\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate\"\r\n                   (desyContentEmpty)=\"handleEmptyItem(index)\"\r\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\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-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                  <strong (desyContentEmpty)=\"handleEmptyItem(index)\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </strong>\r\n                </a>\r\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\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-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                  <strong (desyContentEmpty)=\"handleEmptyItem(index)\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </strong>\r\n                </span>\r\n            </li>\r\n        </ng-container>\r\n    </ol>\r\n</nav>\r\n"
+                template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile==true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\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 ? ariaLabel : 'Est\u00E1s en: '\"\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    <ol [class]=\"'lg:grid lg:grid-cols-max-content-'+getLength()+' w-full items-baseline text-sm'\">\r\n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\r\n            <a (click)=\"goBack()\" class=\"px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black cursor-pointer\">\r\n                <span class=\"sr-only\">Volver a la p\u00E1gina anterior</span><span aria-hidden=\"true\" title=\"Volver a la p\u00E1gina anterior\">&larr;</span>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\r\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\r\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\r\n                    [routerLink]=\"item.routerLink\"\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                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\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                </span>\r\n            </li>\r\n            <li *ngIf=\"isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark flex-1 font-semibold\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\r\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate\"\r\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\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-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                  <strong>\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </strong>\r\n                </a>\r\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\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-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                  <strong>\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </strong>\r\n                </span>\r\n            </li>\r\n        </ng-container>\r\n    </ol>\r\n</nav>\r\n"
             },] }
 ];
 BreadcrumbsComponent.ctorParameters = () => [
@@ -4550,14 +4368,11 @@ class HeaderOffcanvasButtonComponent extends ContentBaseComponent {
             yield this.openOffcanvas();
         });
     }
-    handleEmptyContent(element) {
-        throw new Error(`${element} content is required`);
-    }
 }
 HeaderOffcanvasButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-offcanvas-button',
-                template: "<ng-template #contentTemplate>\r\n  <button id=\"header-offcanvas-button\" tabindex=\"0\" aria-haspopup=\"true\"\r\n          class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:shadow-outline-warning\"\r\n          (click)=\"handleClick($event)\">\r\n    <span id=\"header-offcanvas-button-text\" class=\"inline-block align-middle text-right\"\r\n          (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"
+                template: "<ng-template #contentTemplate>\r\n  <button id=\"header-offcanvas-button\" tabindex=\"0\" aria-haspopup=\"true\"\r\n          class=\"inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:shadow-outline-warning\"\r\n          (click)=\"handleClick($event)\">\r\n    <span id=\"header-offcanvas-button-text\" class=\"inline-block align-middle text-right\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg role=\"img\" aria-label=\"Cerrado\" class=\"inline-block align-middle\" viewBox=\"0 0 96 96\" fill=\"currentColor\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n</ng-template>\r\n\r\n"
             },] }
 ];
 
@@ -4603,9 +4418,6 @@ class HeaderOffcanvasComponent {
     bindButton(button) {
         button.openOffcanvas = this.open.bind(this);
     }
-    handleEmptyContent(element) {
-        throw new Error(`${element} content is required`);
-    }
 }
 HeaderOffcanvasComponent.dialogOptions = {
     id: 'header-offcanvas-dialog',
@@ -4617,7 +4429,7 @@ HeaderOffcanvasComponent.dialogOptions = {
 HeaderOffcanvasComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-offcanvas',
-                template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
+                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          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
             },] }
 ];
 HeaderOffcanvasComponent.ctorParameters = () => [
@@ -4664,9 +4476,6 @@ HeaderNavigationItemComponent.propDecorators = {
 class HeaderNavigationComponent extends AccessibilityComponent {
     ngAfterContentInit() {
         const items = this.getItems();
-        if (!items || items.length === 0) {
-            throw new Error('Header-navigation items are required');
-        }
     }
     getItemId(item, index) {
         const prefix = this.idPrefix ? this.idPrefix : 'header-nav-item';
@@ -4748,26 +4557,10 @@ class NavComponent extends AccessibilityComponent {
             item.clickEvent.emit({ item, event });
         }
     }
-    ngOnChanges(changes) {
-        if (!this.idPrefix) {
-            throw new Error(`idPrefix is required`);
-        }
-    }
     getItemList() {
         const 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(element => {
-            if (!element.href && !element.routerLink) {
-                throw new Error(`href or routerLink are required`);
-            }
-        });
         return itemList;
     }
-    handleContentEmpty(position) {
-        throw new Error(`item content, html or text are required at position ${position}`);
-    }
     getItemId(item, index) {
         let id;
         if (item.id) {
@@ -4812,6 +4605,11 @@ class NavComponent extends AccessibilityComponent {
             }
         }
     }
+    simulateClick(event, item, index) {
+        event.preventDefault();
+        const element = document.getElementById(this.getItemId(item, index));
+        element === null || element === void 0 ? void 0 : element.click();
+    }
     isFocusableItem(item) {
         return !item.active && !item.disabled;
     }
@@ -4819,7 +4617,7 @@ class NavComponent extends AccessibilityComponent {
 NavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-nav',
-                template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n             (keydown.arrowDown)=\"moveNext($event, i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n               (keydown.arrowDown)=\"moveNext($event, i)\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
+                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             (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n             (keydown.arrowDown)=\"moveNext($event, i)\"\r\n             (click)=\"onClick($event, item)\"\r\n             (keydown.space)=\"simulateClick($event, item, i)\"\r\n             (keydown.enter)=\"simulateClick($event, item, i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n               (keydown.arrowDown)=\"moveNext($event, i)\"\r\n               (click)=\"onClick($event, item)\"\r\n               (keydown.space)=\"simulateClick($event, item, i)\"\r\n               (keydown.enter)=\"simulateClick($event, item, i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg *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 = {
@@ -4842,14 +4640,11 @@ class HeaderSubnavComponent extends AccessibilityComponent {
         nav.classes = 'w-max max-w-64';
         // nav.id = 'id-subnav-nav'; // No existe como param de navComponent
     }
-    handleEmptyContent(element) {
-        throw new Error(`${element} content is required`);
-    }
 }
 HeaderSubnavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-subnav',
-                template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <p class=\"sr-only\">Aplicaci\u00F3n actual: </p>\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </desy-dropdown>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (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"
+                template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <p class=\"sr-only\">Aplicaci\u00F3n actual: </p>\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </desy-dropdown>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\">\r\n    <span class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n"
             },] }
 ];
 HeaderSubnavComponent.propDecorators = {
@@ -4871,9 +4666,6 @@ class HeaderDropdownComponent extends AccessibilityComponent {
         nav.classes = 'w-max max-w-64';
         // nav.id = 'id-dropdown-nav'; // No existe como param de navComponent
     }
-    handleEmptyContent(element) {
-        throw new Error(`${element} content is required`);
-    }
 }
 HeaderDropdownComponent.decorators = [
     { type: Component, args: [{
@@ -4909,20 +4701,11 @@ class SkipLinkComponent extends AccessibilityComponent {
         }
         return classNames;
     }
-    handleNoContent() {
-        if (!this.html && !this.text) {
-            throw new Error('skip-link content, html or text are required');
-        }
-        else {
-            this.hasContent = false;
-            this.changeDetectorRef.detectChanges();
-        }
-    }
 }
 SkipLinkComponent.decorators = [
     { type: 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"
+                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  <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 = () => [
@@ -5062,7 +4845,7 @@ class FooterComponent extends AccessibilityComponent {
 FooterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-footer',
-                template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', classes] | makeHtmlList\"\r\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\r\n    <ng-container *ngIf=\"getNavigationItems()\">\r\n      <div class=\"flex flex-wrap\">\r\n        <div class=\"flex-1 mr-base\" *ngFor=\"let nav of getNavigationItems()\">\r\n          <h3 class=\"mb-base font-bold text-xl\">{{nav.title}}</h3>\r\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\r\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\r\n              <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n      <hr class=\"my-base border-t border-neutral-base\">\r\n    </ng-container>\r\n\r\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\r\n      <div class=\"mb-base\">\r\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\r\n          <ng-container *ngIf=\"metaElement\">\r\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\r\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap\" *ngIf=\"getMetaItems(metaElement)\">\r\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\r\n                <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n              </li>\r\n            </ul>\r\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\r\n              <p>\r\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\r\n        <div class=\"leading-tight\">\r\n          <p>\r\n            Todo el contenido bajo\r\n            <a\r\n              class=\"c-link c-link--neutral\"\r\n              href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\"\r\n              rel=\"license\"\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"
+                template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', classes] | makeHtmlList\"\r\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\r\n    <ng-container *ngIf=\"getNavigationItems()\">\r\n      <div class=\"flex flex-wrap\">\r\n        <div class=\"flex-1 mr-base\" *ngFor=\"let nav of getNavigationItems()\">\r\n          <h3 class=\"mb-base font-bold text-xl\">{{nav.title}}</h3>\r\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\r\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\r\n              <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n      <hr class=\"my-base border-t border-neutral-base\">\r\n    </ng-container>\r\n\r\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\r\n      <div class=\"mb-base\">\r\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\r\n          <ng-container *ngIf=\"metaElement\">\r\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\r\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap\" *ngIf=\"getMetaItems(metaElement)\">\r\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\r\n                <ng-container *ngTemplateOutlet=\"item.href != null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\r\n              </li>\r\n            </ul>\r\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\r\n              <p>\r\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\r\n        <div class=\"leading-tight\">\r\n          <p>\r\n            Todo el contenido bajo\r\n            <a\r\n              class=\"c-link c-link--neutral\"\r\n              href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\"\r\n              rel=\"license\" target=\"_blank\"\r\n            >licencia CC BY 4.0</a>\r\n          </p>\r\n        </div>\r\n        <div class=\"leading-tight\">\r\n          <p>\r\n            <a target=\"_blank\"\r\n              class=\"c-link c-link--neutral\"\r\n              href=\"https://www.aragon.es/\"\r\n            >Gobierno de Arag\u00F3n</a>. Edificio Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\" class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\r\n        <p *ngIf=\"iconComponent || icon?.html\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\r\n        </p>\r\n        <p>\r\n          <a href=\"http://www.aragon.es/Fondos_Europeos\" target=\"_blank\" class=\"inline-block text-sm c-link no-underline\" title=\"M\u00E1s informaci\u00F3n sobre los Fondos Estructurales y de Inversi\u00F3n Europeos (Fondos EIE)\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 575 96\" width=\"288\" height=\"48\" class=\"w-auto h-12\" role=\"img\" aria-label=\"Logotipo Uni\u00F3n Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Arag\u00F3n.\"><text transform=\"translate(126 33)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\" font-weight=\"700\"><tspan x=\"0\" y=\"0\">UNI\u00D3N EUROPEA</tspan></text><text transform=\"translate(126 56)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform=\"translate(126 79)\" fill=\"#039\" font-size=\"20\" font-family=\"Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans\"><tspan x=\"0\" y=\"0\">\u201CConstruyendo Europa desde Arag\u00F3n\u201D</tspan></text><path fill=\"#039\" stroke=\"#fff\" stroke-width=\"1%\" d=\"M14.086 13.02h104.282v69.522H14.086z\"/><g fill=\"#fc0\"><path d=\"M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z\"/></g></svg>\r\n          </a>\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</footer>\r\n\r\n<ng-template #itemHref let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\r\n     [attr.role]=\"item.role ? item.role : null\"\r\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #itemRouterLink let-item=\"item\">\r\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n     [attr.role]=\"item.role ? item.role : null\"\r\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n"
             },] }
 ];
 FooterComponent.propDecorators = {
@@ -5096,29 +4879,23 @@ ErrorSummaryItemComponent.propDecorators = {
 };
 
 class ErrorSummaryComponent extends AccessibilityComponent {
-    handleContentRequired(element) {
-        throw new Error(element + ' content, html or text are required');
-    }
     getErrorItemList() {
         let errorItemList;
         if (this.errorComponentList && this.errorComponentList.length > 0) {
             errorItemList = this.errorComponentList.toArray();
         }
         else {
-            errorItemList = this.errorList;
+            errorItemList = this.errorList ? this.errorList : null;
         }
         const lastLength = this.lastErrorItemCount;
-        this.lastErrorItemCount = errorItemList.length;
-        if (errorItemList.length === 0 && lastLength !== 0) {
-            throw new Error(`errorList or inner error-summary-item are required`);
-        }
+        this.lastErrorItemCount = errorItemList ? errorItemList.length : null;
         return errorItemList;
     }
 }
 ErrorSummaryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-error-summary',
-                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"
+                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    <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                  [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\">\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 = {
@@ -5171,8 +4948,6 @@ class MenuHorizontalComponent extends AccessibilityComponent {
         super(...arguments);
         this.clickEvent = new EventEmitter();
     }
-    ngOnChanges(changes) {
-    }
     onClick(event, item) {
         const itemsActiveChange = [];
         if (!item.active) {
@@ -5202,19 +4977,8 @@ class MenuHorizontalComponent extends AccessibilityComponent {
     }
     getItemList() {
         const itemList = this.itemComponents && this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
-        if (!itemList || itemList.length === 0) {
-            throw new Error(`items are required`);
-        }
-        itemList.forEach(item => {
-            if (!item.routerLink && !item.href) {
-                throw Error('item routerLink or href are required');
-            }
-        });
         return itemList;
     }
-    handleEmptyItem(position) {
-        throw new Error(`item content, html or text are required at position ${position}`);
-    }
     getItemId(item, index) {
         let id;
         if (item.id) {
@@ -5232,7 +4996,7 @@ class MenuHorizontalComponent extends AccessibilityComponent {
 MenuHorizontalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menu-horizontal',
-                template: "<!-- menu-horizontal -->\r\n<nav [class]=\"['c-menu-horizontal', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ul class=\"c-menu-horizontal__list lg:flex lg:flex-wrap\">\r\n    <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n      <li *ngIf=\"item\">\r\n        <span *ngIf=\"item.active; else elseBlock\" [attr.id]=\"getItemId(item, i)\"\r\n              [class]=\"['c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold', item.classes] | makeHtmlList\"\r\n              [attr.title]=\"item.title ? item.title : null\"\r\n              [attr.role]=\"item.role ? item.role : null\"\r\n              aria-current=\"page\"\r\n              [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n              [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n              [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n              [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n              [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n          <strong (desyContentEmpty)=\"handleEmptyItem(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n          </strong>\r\n        </span>\r\n        <ng-template #elseBlock>\r\n          <a *ngIf=\"item.routerLink && !item.href\" (click)=\"onClick($event, item)\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [routerLink]=\"item.routerLink\"\r\n             [fragment]=\"item.fragment\"\r\n             [class]=\"['c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'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"
+                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>\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\">\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\">\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 = {
@@ -5307,9 +5071,6 @@ __decorate([
 ], MenuVerticalItemComponent.prototype, "subComponent", void 0);
 
 class MenuVerticalComponent extends AccessibilityComponent {
-    handleItemContentEmpty(index, isRoot) {
-        throw new Error(`${isRoot ? 'Item' : 'Subitem'} content, html or text ar required at position ${index}`);
-    }
     getItemHtml(item) {
         let itemHtml;
         if (item.active) {
@@ -5352,9 +5113,6 @@ class MenuVerticalComponent extends AccessibilityComponent {
     }
     getItems() {
         const 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;
     }
     getItemSub(item) {
@@ -5364,20 +5122,11 @@ class MenuVerticalComponent extends AccessibilityComponent {
         const subItems = sub instanceof MenuVerticalItemSubComponent ? sub.itemComponents.toArray() : sub.items;
         return subItems && subItems.length > 0 ? subItems : null;
     }
-    focus(id, idFocus) {
-        const elementToQuitFocus = document.getElementById(id);
-        elementToQuitFocus.blur();
-        if (idFocus) {
-            const elementToFocus = document.getElementById(idFocus);
-            elementToFocus.tabIndex = 0;
-            elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
-        }
-    }
 }
 MenuVerticalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menu-vertical',
-                template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\"\r\n             \r\n             (click)=\"focus(id, item.fragment ? item.fragment : null)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
+                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           [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             [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                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
                 animations: [
                     trigger('displayMenuVertical', [
                         state('void', style({
@@ -5761,21 +5510,9 @@ class MenubarComponent extends AccessibilityComponent {
      * Comunes
      */
     checkRequired() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.ariaLabel) {
-            throw Error('ariaLabel is required');
-        }
         const items = this.getItems();
-        if (!items || items.length === 0) {
-            throw Error('Items are required');
-        }
         // No se ha puesto label required porque en algunos ejemplos de desy-html no aparece
     }
-    handleEmptyItem(text) {
-        throw Error(text);
-    }
     activateMenuItem(itemIndex) {
         const items = this.getItems();
         this.activeItemChange.emit(items[itemIndex]);
@@ -6152,7 +5889,7 @@ class MenubarComponent extends AccessibilityComponent {
 MenubarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menubar',
-                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [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"
+                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper>\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
             },] }
 ];
 MenubarComponent.ctorParameters = () => [
@@ -6226,19 +5963,11 @@ class NotificationComponent extends AccessibilityComponent {
         // Como que el contenido vacío se comprueba a posteriori, es necesario forzar la detección de cambios para mostrar el icono por defecto
         this.changeDetectorRef.detectChanges();
     }
-    handleRequiredEmpty(text) {
-        throw new Error(text);
-    }
-    ngOnChanges(changes) {
-        if (!this.id) {
-            throw new Error(`id is required`);
-        }
-    }
 }
 NotificationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-notification',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type=='success' ? 'c-notification c-notification--' + type : type=='alert' ? 'c-notification c-notification--' + type : 'c-notification c-notification--primary') \"\r\n     *ngIf=\"isOpen && !isDismissing\"\r\n     @displayNotification\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 || type\" class=\"h-full mr-base\"\r\n       (desyContentEmpty)=\"handleIconEmpty(true)\"\r\n       (desyContentNotEmpty)=\"handleIconEmpty(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'success'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-success-dark\" aria-label=\"\u00C9xito\" focusable=\"false\" role=\"img\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchCase=\"'alert'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-alert-base\" aria-label=\"Error\" focusable=\"false\" role=\"img\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchCase=\"'info'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-primary-base\" aria-label=\"Informaci\u00F3n\" focusable=\"false\" role=\"img\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n      </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\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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        </h1>\r\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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        </h2>\r\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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        </h3>\r\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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        </h4>\r\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n            (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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        </h5>\r\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\"\r\n           (desyContentEmpty)=\"handleRequiredEmpty('title content, html or text are required')\">\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      </ng-container>\r\n      <ng-container *ngIf=\"descriptionComponent || description\">\r\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\r\n           (desyContentEmpty)=\"handleRequiredEmpty('description content, html or text are required')\">\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      </ng-container>\r\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\r\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n          <li *ngIf=\"item.routerLink || item.href\">\r\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\r\n               [routerLink]=\"item.routerLink\"\r\n               [fragment]=\"item.fragment\"\r\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\r\n               [attr.id]=\"item.id ? item.id : null\"\r\n               [attr.role]=\"item.role\"\r\n               [attr.ariaLabel]=\"item.ariaLabel\"\r\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n               [attr.ariaHidden]=\"item.ariaHidden\"\r\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\r\n               [attr.ariaControls]=\"item.ariaControls\"\r\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\r\n               [attr.ariaLive]=\"item.ariaLive\"\r\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\r\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + i)\">\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\" class=\"c-link\"\r\n               [href]=\"item.href | externalHref\"\r\n               [target]=\"item.target\"\r\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\r\n               [attr.id]=\"item.id ? item.id : null\"\r\n               [attr.role]=\"item.role\"\r\n               [attr.ariaLabel]=\"item.ariaLabel\"\r\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n               [attr.ariaHidden]=\"item.ariaHidden\"\r\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\r\n               [attr.ariaControls]=\"item.ariaControls\"\r\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\r\n               [attr.ariaLive]=\"item.ariaLive\"\r\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\r\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required at position ' + i)\">\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.routerLink && !item.href\"\r\n              (desyContentEmpty)=\"handleRequiredEmpty('item content, html or text are required 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      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\r\n        <ng-container *desyCustomInnerContent=\"{\r\n          component: contentComponent,\r\n          html: content ? content.html : null,\r\n          text: content ? content.text : null\r\n        }\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <ng-container *ngIf=\"isDismissible\">\r\n      <div class=\"absolute top-0 right-0 p-sm\">\r\n        <button (click)=\"dismiss()\" 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 notificaci\u00F3n\">\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</div>\r\n",
+                template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type=='success' ? 'c-notification c-notification--' + type : type=='alert' ? 'c-notification c-notification--' + type : 'c-notification c-notification--primary') \"\r\n     *ngIf=\"isOpen && !isDismissing\"\r\n     @displayNotification\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 || type\" class=\"h-full mr-base\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\r\n      <ng-container [ngSwitch]=\"getType()\">\r\n        <svg *ngSwitchCase=\"'success'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-success-dark\" aria-label=\"\u00C9xito\" focusable=\"false\" role=\"img\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-alert-base\" aria-label=\"Error\" focusable=\"false\" role=\"img\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-primary-base\" aria-label=\"Informaci\u00F3n\" focusable=\"false\" role=\"img\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n      </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 *ngIf=\"titleComponent || title\" [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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        </h1>\r\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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        </h2>\r\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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        </h3>\r\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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        </h4>\r\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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        </h5>\r\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\r\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\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      </ng-container>\r\n      <ng-container *ngIf=\"descriptionComponent || description\">\r\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\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      </ng-container>\r\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\r\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n          <li *ngIf=\"item.routerLink || item.href\">\r\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\r\n               [routerLink]=\"item.routerLink\"\r\n               [fragment]=\"item.fragment\"\r\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\r\n               [attr.id]=\"item.id ? item.id : null\"\r\n               [attr.role]=\"item.role\"\r\n               [attr.ariaLabel]=\"item.ariaLabel\"\r\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n               [attr.ariaHidden]=\"item.ariaHidden\"\r\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\r\n               [attr.ariaControls]=\"item.ariaControls\"\r\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\r\n               [attr.ariaLive]=\"item.ariaLive\"\r\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\r\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n               [attr.ariaHasPopup]=\"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            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\r\n               [href]=\"item.href | externalHref\"\r\n               [target]=\"item.target\"\r\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\r\n               [attr.id]=\"item.id ? item.id : null\"\r\n               [attr.role]=\"item.role\"\r\n               [attr.ariaLabel]=\"item.ariaLabel\"\r\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n               [attr.ariaHidden]=\"item.ariaHidden\"\r\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\r\n               [attr.ariaControls]=\"item.ariaControls\"\r\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\r\n               [attr.ariaLive]=\"item.ariaLive\"\r\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\r\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n               [attr.ariaHasPopup]=\"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.routerLink && !item.href\">\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      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\r\n        <ng-container *desyCustomInnerContent=\"{\r\n          component: contentComponent,\r\n          html: content ? content.html : null,\r\n          text: content ? content.text : null\r\n        }\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <ng-container *ngIf=\"isDismissible\">\r\n      <div class=\"absolute top-0 right-0 p-sm\">\r\n        <button (click)=\"dismiss()\" 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 notificaci\u00F3n\">\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</div>\r\n",
                 animations: [
                     trigger('displayNotification', [
                         state('void', style({
@@ -6361,27 +6090,16 @@ class TableComponent extends AccessibilityComponent {
     }
     getRows() {
         const rowList = this.rowComponentList && this.rowComponentList.length > 0 ? this.rowComponentList.toArray() : this.rows;
-        if (!rowList || rowList.length === 0) {
-            throw new Error(`rows are required`);
-        }
         return rowList;
     }
     getRowCells(row) {
         return row instanceof TableRowComponent ? row.cells.toArray() : row;
     }
-    handleEmptyCell(cell, row, cellIndex) {
-        if (cell instanceof TableCellComponent) {
-            throw new Error(`Content is required for cell at position ${cellIndex} of row ${row}`);
-        }
-        else {
-            throw new Error(`Text or Html are required for cell at position ${cellIndex} of row ${row}`);
-        }
-    }
 }
 TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-table',
-                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"
+                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                  [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                      [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 = {
@@ -6633,9 +6351,6 @@ class TableAdvancedComponent extends AccessibilityComponent {
             return 'none';
         }
     }
-    handleTableCellContentEmpty(row, column) {
-        throw new Error(`cell content, html or text are required at row ${row} and column ${column}`);
-    }
     /**
      * checks
      */
@@ -6765,7 +6480,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
 TableAdvancedComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-table-advanced',
-                template: "<ng-template #tableContent>\r\n  <table role=\"grid\"\r\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\r\n      </caption>\r\n      <thead *ngIf=\"getHeaderCells()\">\r\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\r\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\r\n                  <span class=\"sr-only\">Seleccionar fila</span>\r\n              </th>\r\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\r\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\r\n                      [class]=\"['align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\"\r\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\r\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\r\n                      [attr.role]=\"item.role ? item.role : null\"\r\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n\r\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\r\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\r\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\r\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\r\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy == orderByType.asc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy == orderByType.desc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy == orderByType.none\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"text-neutral-base\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                    </span>\r\n                  </span>\r\n\r\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </span>\r\n              </th>\r\n          </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\r\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\r\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\r\n                  [class]=\"['align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\">\r\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\r\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\r\n                                   (clickEvent)=\"handleInputSearch(item)\"\r\n                                   (ngModelChange)=\"handleInputSearch(item)\"\r\n                                   labelText=\"Buscar en esta columna\"\r\n                                   [id]=\"getIdHeaderFilter(iHead)\"\r\n                                   placeholder=\"Buscar\"\r\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\r\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\r\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\r\n              </td>\r\n          </tr>\r\n\r\n\r\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\r\n              [desyRow]=\"row\"\r\n              [ngClass]=\"{'bg-neutral-light': hasCheckboxes && row.checked }\">\r\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\r\n                  tabindex=\"-1\" >\r\n                <div class=\"c-checkboxes c-checkboxes--sm\">\r\n                  <div>\r\n                    <div class=\"relative flex items-start\">\r\n                      <div class=\"flex items-center mx-sm\">\r\n                        <input type=\"checkbox\" class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\r\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\r\n                               [id]=\"getIdRowCheckbox(iRow)\"\r\n                               [name]=\"getIdRowCheckbox(iRow)\"\r\n                               [attr.aria-label]=\"'Fila ' + iRow\">\r\n                      </div>\r\n                      <div class=\"pt-0.5 leading-5\">\r\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\r\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\r\n                      [class]=\"['px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\r\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                      (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"
+                template: "<ng-template #tableContent>\r\n  <table role=\"grid\"\r\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\r\n      </caption>\r\n      <thead *ngIf=\"getHeaderCells()\">\r\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\r\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\r\n                  <span class=\"sr-only\">Seleccionar fila</span>\r\n              </th>\r\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\r\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\r\n                      [class]=\"['align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\"\r\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\r\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\r\n                      [attr.role]=\"item.role ? item.role : null\"\r\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\r\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\r\n\r\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\r\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\r\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\r\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\r\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy == orderByType.asc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy == orderByType.desc\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy == orderByType.none\">\r\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"text-neutral-base\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\" fill=\"currentColor\"/></svg>\r\n                        </span>\r\n                    </span>\r\n                  </span>\r\n\r\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n                  </span>\r\n              </th>\r\n          </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\r\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\r\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\r\n                  [class]=\"['align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark', item.classes] | makeHtmlList\">\r\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\r\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\r\n                                   (clickEvent)=\"handleInputSearch(item)\"\r\n                                   (ngModelChange)=\"handleInputSearch(item)\"\r\n                                   labelText=\"Buscar en esta columna\"\r\n                                   [id]=\"getIdHeaderFilter(iHead)\"\r\n                                   placeholder=\"Buscar\"\r\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\r\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\r\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\r\n              </td>\r\n          </tr>\r\n\r\n\r\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\r\n              [desyRow]=\"row\"\r\n              [ngClass]=\"{'bg-neutral-light': hasCheckboxes && row.checked }\">\r\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\r\n                  tabindex=\"-1\" >\r\n                <div class=\"c-checkboxes c-checkboxes--sm\">\r\n                  <div>\r\n                    <div class=\"relative flex items-start\">\r\n                      <div class=\"flex items-center mx-sm\">\r\n                        <input type=\"checkbox\" class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\r\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\r\n                               [id]=\"getIdRowCheckbox(iRow)\"\r\n                               [name]=\"getIdRowCheckbox(iRow)\"\r\n                               [attr.aria-label]=\"'Fila ' + iRow\">\r\n                      </div>\r\n                      <div class=\"pt-0.5 leading-5\">\r\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\r\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\r\n                      [class]=\"['px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark', cell.classes] | makeHtmlList\"\r\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                      [attr.id]=\"cell.id ? cell.id : null\"\r\n                      [attr.role]=\"cell.role ? cell.role : null\"\r\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\r\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                  </th>\r\n                  <ng-template #elseTd>\r\n                      <td tabindex=\"-1\" desyFocusClickedCell\r\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\r\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\r\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\r\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\r\n                          [attr.id]=\"cell.id ? cell.id : null\"\r\n                          [attr.role]=\"cell.role ? cell.role : null\"\r\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\r\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\r\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\r\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\r\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\r\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\r\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\r\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\r\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\r\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\r\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\r\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\r\n                      </td>\r\n                  </ng-template>\r\n              </ng-container>\r\n          </tr>\r\n      </tbody>\r\n  </table>\r\n</ng-template>\r\n\r\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\r\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n</div>\r\n"
             },] }
 ];
 TableAdvancedComponent.ctorParameters = () => [
@@ -6823,12 +6538,6 @@ class AlertComponent extends AccessibilityComponent {
         this.active = false;
     }
     ngAfterViewInit() {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-        if (!this.caller && !this.callerType) {
-            throw Error('caller is required');
-        }
         this.hasViewinit = true;
         this.handleActiveState();
     }
@@ -6921,11 +6630,6 @@ class AccordionComponent extends AccessibilityComponent {
         super(...arguments);
         this.showAll = true;
     }
-    ngOnChanges(changes) {
-        if (!this.idPrefix) {
-            throw new Error(`idPrefix is required`);
-        }
-    }
     getItemId(item, index) {
         let id;
         if (item.id) {
@@ -7008,9 +6712,6 @@ class AccordionComponent extends AccessibilityComponent {
     }
     getItems() {
         const items = this.itemComponentList && this.itemComponentList.length > 0 ? this.itemComponentList.toArray() : this.items;
-        if (!items || items.length === 0) {
-            throw new Error(`items are required`);
-        }
         return items;
     }
     getItemHeader(item) {
@@ -7019,14 +6720,11 @@ class AccordionComponent extends AccessibilityComponent {
     getItemContent(item) {
         return item instanceof AccordionItemComponent ? item.contentComponent : null;
     }
-    handleRequiredEmpty(text) {
-        throw new Error(text);
-    }
 }
 AccordionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-accordion',
-                template: "<div [class]=\"classes\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div class=\"flex justify-between\">\r\n    <ng-container *ngIf=\"headingComponent || heading\">\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h1 *ngSwitchCase=\"1\" [class]=\"getTitleClasses()\" (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"
+                template: "<div [class]=\"classes\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <div class=\"flex justify-between\">\r\n    <ng-container *ngIf=\"headingComponent || heading\">\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h1 *ngSwitchCase=\"1\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h1>\r\n        <h2 *ngSwitchCase=\"2\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h2>\r\n        <h3 *ngSwitchCase=\"3\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h3>\r\n        <h4 *ngSwitchCase=\"4\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h4>\r\n        <h5 *ngSwitchCase=\"5\" [class]=\"getTitleClasses()\">\r\n          <ng-container *desyCustomInnerContent=\"{\r\n            component: headingComponent ? headingComponent : null,\r\n            html: heading ? heading.html : null,\r\n            text: heading ? heading.text : null\r\n          }\"></ng-container>\r\n        </h5>\r\n      </ng-container>\r\n      <button *ngIf=\"showControl\" (click)=\"changeAll()\"\r\n              class=\"ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus\">\r\n        {{showAll ? 'Mostrar' : 'Ocultar'}} todo\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"Accordion\">\r\n    <div *ngFor=\"let item of getItems(); index as i\" class=\"-my-px px-xs py-sm border-t border-b border-neutral-base\"\r\n         (keydown.home)=\"focusFirstItem($event)\"\r\n         (keydown.end)=\"focusLastItem($event)\"\r\n         (keydown.arrowup)=\"focusPreviousItem($event, i)\"\r\n         (keydown.arrowdown)=\"focusNextItem($event, i)\"\r\n         (click)=\"selectItem(i)\">\r\n\r\n      <ng-container [ngSwitch]=\"headingLevel > 0 && headingLevel < 6 ? headingLevel : 2\">\r\n        <h2 *ngSwitchCase=\"1\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h2>\r\n        <h3 *ngSwitchCase=\"2\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h3>\r\n        <h4 *ngSwitchCase=\"3\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h4>\r\n        <h5 *ngSwitchCase=\"4\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h5>\r\n        <h6 *ngSwitchCase=\"5\"><ng-container *ngTemplateOutlet=\"itemHeaderContent; context: {item: item, id: getItemId(item, i), index: i}\"></ng-container></h6>\r\n      </ng-container>\r\n      <p class=\"sr-only\" aria-hidden=\"true\">Haz click en el bot\u00F3n anterior para mostrar u ocultar</p>\r\n      <div *ngIf=\"item.open\" class=\"Accordion-panel\"\r\n           [attr.id]=\"getItemId(item, i)\"\r\n           [attr.role]=\"(item.role ? role : 'accordion')\"\r\n           [attr.aria-selected]=\"currentItem === i ? 'true' : 'false'\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"'accordion-' + getItemId(item, i)\"\r\n           [attr.aria-current]=\"item.ariaCurrent\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: getItemContent(item), html: item.html, text: item.text }\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemHeaderContent let-item=\"item\" let-id=\"id\" let-index=\"index\">\r\n  <button #itemSelector [id]=\"id + '-title'\" class=\"Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n          [attr.aria-controls]=\"id\" [attr.aria-expanded]=\"item.open\" (click)=\"toggleItem(item)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: getItemHeader(item), html: item.headerHtml, text: item.headerText }\"></ng-container>\r\n    <span *ngIf=\"allowToggle || !item.open\" class=\"absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none\" aria-hidden=\"true\">\r\n      {{ item.open ? 'Ocultar' : 'Mostrar' }}\r\n    </span>\r\n  </button>\r\n</ng-template>\r\n"
             },] }
 ];
 AccordionComponent.propDecorators = {
@@ -7061,12 +6759,6 @@ SpinnerComponent.propDecorators = {
 };
 
 class DetailsComponent extends AccessibilityComponent {
-    ngOnInit() {
-        summaryTextOrSummaryHtmlRequiredFunction(this.summaryText, this.summaryHtml);
-    }
-    ngOnChanges(changes) {
-        summaryTextOrSummaryHtmlRequiredFunction(this.summaryText, this.summaryHtml);
-    }
 }
 DetailsComponent.decorators = [
     { type: Component, args: [{
@@ -7082,12 +6774,7 @@ DetailsComponent.propDecorators = {
     id: [{ type: Input }],
     open: [{ type: Input }],
     classes: [{ type: Input }]
-};
-function summaryTextOrSummaryHtmlRequiredFunction(text, html) {
-    if (!html && !text) {
-        throw new Error(`summaryHtml or summaryText are required`);
-    }
-}
+};
 
 class TermComponent extends ContentBaseComponent {
 }
@@ -7137,21 +6824,15 @@ __decorate([
 ], DescriptionItemComponent.prototype, "definition", void 0);
 
 class DescriptionListComponent extends AccessibilityComponent {
-    handleContentEmpty(element) {
-        throw new Error(`${element} content, html or text is required`);
-    }
     getItems() {
         const items = (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
-        if (!items || items.length === 0) {
-            throw new Error(`items are required`);
-        }
         return items;
     }
 }
 DescriptionListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-description-list',
-                template: "<dl [class]=\"classes\"\r\n    [attr.id]=\"id ? id : null\"\r\n    [attr.role]=\"role\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n    [attr.aria-hidden]=\"ariaHidden\"\r\n    [attr.aria-disabled]=\"ariaDisabled\"\r\n    [attr.aria-controls]=\"ariaControls\"\r\n    [attr.aria-current]=\"ariaCurrent\"\r\n    [attr.aria-live]=\"ariaLive\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup\"\r\n    [attr.tabindex]=\"tabindex\">\r\n    <div *ngFor=\"let item of getItems()\"\r\n        [class]=\"item.classes\"\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        <dt [class]=\"(item.term.classes ?  item.term.classes : 'text-sm text-neutral-dark')\"\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            [attr.tabindex]=\"item.tabindex\">\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 : 'text-base text-black')\"\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            [attr.tabindex]=\"item.tabindex\">\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"
+                template: "<dl [class]=\"classes\"\r\n    [attr.id]=\"id ? id : null\"\r\n    [attr.role]=\"role\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n    [attr.aria-hidden]=\"ariaHidden\"\r\n    [attr.aria-disabled]=\"ariaDisabled\"\r\n    [attr.aria-controls]=\"ariaControls\"\r\n    [attr.aria-current]=\"ariaCurrent\"\r\n    [attr.aria-live]=\"ariaLive\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup\"\r\n    [attr.tabindex]=\"tabindex\">\r\n    <div *ngFor=\"let item of getItems()\"\r\n        [class]=\"item.classes\"\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        <dt [class]=\"(item.term.classes ?  item.term.classes : 'text-sm text-neutral-dark')\"\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            [attr.tabindex]=\"item.tabindex\">\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 : 'text-base text-black')\"\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            [attr.tabindex]=\"item.tabindex\">\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"
             },] }
 ];
 DescriptionListComponent.propDecorators = {
@@ -7175,18 +6856,11 @@ class CollapsibleComponent extends AccessibilityAndContentRequiredComponent {
         }
     }
     ngOnInit() {
-        textOrHtmlRequiredFunction(this.text, this.html);
         this.toggleOpen();
     }
-    ngOnChanges(changes) {
-        textOrHtmlRequiredFunction(this.text, this.html);
+    ngOnChanges() {
         this.toggleOpen();
     }
-    headerTextOrheaderHtmlRequiredFunction(text, html, content) {
-        if (!html && !text && !content) {
-            throw new Error(`headerHtml or headerText are required`);
-        }
-    }
 }
 CollapsibleComponent.decorators = [
     { type: Component, args: [{
@@ -7254,31 +6928,21 @@ class ItemComponent extends AccessibilityComponent {
     constructor(changeDetectorRef) {
         super();
         this.changeDetectorRef = changeDetectorRef;
-        this.hasIconContent = true;
-    }
-    ngAfterViewInit() {
-        if (!this.titleComponent && !this.title) {
-            throw new Error('title is required');
-        }
     }
     getItems() {
         return this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
     }
     handleIconContentEmpty(isEmpty) {
-        this.hasIconContent = !isEmpty;
         this.changeDetectorRef.detectChanges();
     }
-    handleRequiredEmpty(text) {
-        throw new Error(text);
-    }
     getTitle() {
-        return this.titleComponent ? this.titleComponent : this.title;
+        return this.titleComponent ? this.titleComponent : (this.title ? this.title : null);
     }
 }
 ItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-item',
-                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"
+                template: "<div *ngIf=\"getTitle()\" [class]=\"['flex flex-wrap p-base bg-white border border-neutral-base rounded', classes] | makeHtmlList\"\r\n     [attr.id]=\"id ? id : null\">\r\n  <div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\r\n    <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\r\n    <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\r\n  </div>\r\n  <div class=\"self-center h-full mr-lg\" *ngIf=\"iconComponent || icon\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\r\n    <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\r\n      <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Solicitud\" focusable=\"false\"><path d=\"M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z\" fill=\"currentColor\"/><path d=\"M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z\" fill=\"currentColor\"/><path d=\"M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z\" fill=\"currentColor\"/></svg>\r\n      <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Link\" focusable=\"false\"><path d=\"M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z\" fill=\"currentColor\"/><path d=\"M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z\" fill=\"currentColor\"/><path d=\"M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z\" fill=\"currentColor\"/></svg>\r\n      <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Item tipo Archivo\" focusable=\"false\"><path d=\"M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z\" fill=\"currentColor\"/><path d=\"M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z\" fill=\"currentColor\"/></svg>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"lg:flex flex-1 self-center\">\r\n    <div class=\"lg:flex-1 lg:self-center\">\r\n      <ng-container [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h1>\r\n        <h2 *ngSwitchCase=\"2\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h2>\r\n        <h3 *ngSwitchCase=\"3\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h3>\r\n        <h4 *ngSwitchCase=\"4\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h4>\r\n        <h5 *ngSwitchCase=\"5\"\r\n            [class]=\"getTitle().classes\"\r\n            [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </h5>\r\n        <p *ngSwitchDefault\r\n           [class]=\"getTitle().classes\"\r\n           [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\r\n        </p>\r\n      </ng-container>\r\n\r\n      <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\r\n         [attr.role]=\"role\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n         [attr.aria-label]=\"ariaLabel\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n         [attr.aria-hidden]=\"ariaHidden\"\r\n         [attr.aria-disabled]=\"ariaDisabled\"\r\n         [attr.aria-controls]=\"ariaControls\"\r\n         [attr.aria-current]=\"ariaCurrent\"\r\n         [attr.aria-live]=\"ariaLive\"\r\n         [attr.aria-expanded]=\"ariaExpanded\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup\"\r\n         [attr.tabindex]=\"tabindex\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\r\n      </p>\r\n      <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\r\n        <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\r\n        </li>\r\n      </ul>\r\n      <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 ItemComponent.ctorParameters = () => [
@@ -7319,20 +6983,21 @@ __decorate([
     DesyContentChild()
 ], ItemComponent.prototype, "contentRightComponent", void 0);
 
+class MediaObjectFigureComponent extends ContentBaseComponent {
+}
+MediaObjectFigureComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-media-object-figure',
+                template: "<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n  "
+            },] }
+];
+
 class MediaObjectComponent extends AccessibilityComponent {
-    ngOnChanges(changes) {
-        this.checkRequiredParams();
-    }
-    checkRequiredParams() {
-        if (!this.figureHtml) {
-            throw new Error(`figureHtml are required`);
-        }
-    }
 }
 MediaObjectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-media-object',
-                template: "<div [class]=\"'flex' + (classes ? ' ' + classes : '') + (center==true ? ' ' + 'items-center' : '')\" \r\n    [attr.id]=\"id\"\r\n    [attr.role]=\"role\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n    [attr.aria-hidden]=\"ariaHidden\"\r\n    [attr.aria-disabled]=\"ariaDisabled\"\r\n    [attr.aria-controls]=\"ariaControls\"\r\n    [attr.aria-current]=\"ariaCurrent\"\r\n    [attr.aria-live]=\"ariaLive\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex\">\r\n    <div [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\r\n\r\n    <div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\r\n        <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n"
+                template: "<div [class]=\"'flex' + (classes ? ' ' + classes : '') + (center==true ? ' ' + 'items-center' : '')\" \r\n    [attr.id]=\"id\"\r\n    [attr.role]=\"role\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n    [attr.aria-hidden]=\"ariaHidden\"\r\n    [attr.aria-disabled]=\"ariaDisabled\"\r\n    [attr.aria-controls]=\"ariaControls\"\r\n    [attr.aria-current]=\"ariaCurrent\"\r\n    [attr.aria-live]=\"ariaLive\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex\">\r\n    \r\n    <div *ngIf=\"figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\r\n\r\n    <div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse==true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\r\n    </div>\r\n\r\n    <div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n    </div>\r\n    \r\n</div>\r\n\r\n"
             },] }
 ];
 MediaObjectComponent.propDecorators = {
@@ -7343,13 +7008,22 @@ MediaObjectComponent.propDecorators = {
     figureClasses: [{ type: Input }],
     contenClasses: [{ type: Input }],
     caller: [{ type: Input }],
-    id: [{ type: Input }]
-};
+    id: [{ type: Input }],
+    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }],
+    mediaObjectFigureComponent: [{ type: ContentChildren, args: [MediaObjectFigureComponent,] }],
+    mediaFigureContent: [{ type: ViewChild, args: ['mediaFigureContent', { read: ElementRef, static: true },] }]
+};
+__decorate([
+    DesyContentChild()
+], MediaObjectComponent.prototype, "contentComponent", void 0);
+__decorate([
+    DesyContentChild()
+], MediaObjectComponent.prototype, "mediaObjectFigureComponent", void 0);
 
 class StatusComponent extends AccessibilityComponent {
     getType() {
         let type;
-        if (this.icon.type) {
+        if (this.icon && this.icon.type) {
             type = this.icon.type.toLocaleLowerCase();
         }
         else {
@@ -7357,19 +7031,11 @@ class StatusComponent extends AccessibilityComponent {
         }
         return type;
     }
-    ngOnChanges(changes) {
-        if (!this.text) {
-            throw new Error(`title is required`);
-        }
-        if (!this.icon) {
-            throw new Error(`icon is required`);
-        }
-    }
 }
 StatusComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-status',
-                template: "<div [class]=\"(classes ?  classes : '')\"\r\n        [attr.id]=\"id ? id : null\"\r\n        [attr.role]=\"role\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.aria-disabled]=\"ariaDisabled\"\r\n        [attr.aria-controls]=\"ariaControls\"\r\n        [attr.aria-current]=\"ariaCurrent\"\r\n        [attr.aria-live]=\"ariaLive\"\r\n        [attr.aria-expanded]=\"ariaExpanded\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup\"\r\n        [attr.tabindex]=\"tabindex\">\r\n\r\n        <p class=\"inline-flex items-center\">\r\n          <span class=\"inline-block font-bold uppercase\">{{text}}</span>\r\n          <span class=\"inline-block ml-sm\" *ngIf=\"!icon.html; else elseBlock\">                         \r\n            <ng-container [ngSwitch]=\"getType()\">\r\n              <ng-container *ngSwitchCase=\"'success'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'loading'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'error'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n            </ng-container>\r\n          </span>\r\n          <ng-template #elseBlock>\r\n            <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"icon.html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \r\n          </ng-template>\r\n        </p>        \r\n</div>\r\n"
+                template: "<div [class]=\"(classes ?  classes : '')\"\r\n        [attr.id]=\"id ? id : null\"\r\n        [attr.role]=\"role\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.aria-disabled]=\"ariaDisabled\"\r\n        [attr.aria-controls]=\"ariaControls\"\r\n        [attr.aria-current]=\"ariaCurrent\"\r\n        [attr.aria-live]=\"ariaLive\"\r\n        [attr.aria-expanded]=\"ariaExpanded\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup\"\r\n        [attr.tabindex]=\"tabindex\">\r\n\r\n        <p class=\"inline-flex items-center\">\r\n          <span class=\"inline-block font-bold uppercase\">{{text}}</span>\r\n          <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \r\n            <ng-container [ngSwitch]=\"getType()\">\r\n              <ng-container *ngSwitchCase=\"'success'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'loading'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'error'\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\r\n              </ng-container>\r\n            </ng-container>\r\n          </span>\r\n          <ng-template #elseBlock>\r\n            <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"icon.html\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \r\n          </ng-template>\r\n        </p>        \r\n</div>\r\n"
             },] }
 ];
 StatusComponent.propDecorators = {
@@ -7380,14 +7046,6 @@ StatusComponent.propDecorators = {
 };
 
 class StatusItemComponent extends AccessibilityComponent {
-    ngOnChanges(changes) {
-        if (!this.id) {
-            throw new Error(`id is required`);
-        }
-    }
-    handleContentEmpty(element) {
-        throw new Error(`${element} content, html or text is required`);
-    }
     getItems() {
         return (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
     }
@@ -7395,7 +7053,7 @@ class StatusItemComponent extends AccessibilityComponent {
 StatusItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-status-item',
-                template: "<ng-template #commonHtml>\r\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\"\r\n     (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"
+                template: "<ng-template #commonHtml>\r\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\r\n     <ng-container *desyCustomInnerContent=\"{\r\n        component: titleComponent,\r\n        html: title ? title.html : null,\r\n        text: title ? title.text : null\r\n      }\"></ng-container>\r\n  </p>\r\n\r\n  <ng-container *ngIf=\"hintComponent\">\r\n      <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hintComponent && hint\">\r\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\r\n               [role]=\"hint.role\"\r\n               [ariaLabel]=\"hint.ariaLabel\"\r\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\r\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\r\n               [ariaHidden]=\"hint.ariaHidden\"\r\n               [ariaDisabled]=\"hint.ariaDisabled\"\r\n               [ariaControls]=\"hint.ariaControls\"\r\n               [ariaCurrent]=\"hint.ariaCurrent\"\r\n               [ariaLive]=\"hint.ariaLive\"\r\n               [ariaExpanded]=\"hint.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\r\n               [tabindex]=\"hint.tabindex\"></desy-hint>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"errorMessageComponent\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\r\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\r\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\r\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\r\n                        [role]=\"errorMessage.role\"\r\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\r\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\r\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessage.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessage.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<div [attr.id]=\"id ? id : null\" [class]=\"(classes ?  classes : null)\"\r\n     [attr.role]=\"role\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n\r\n  <div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\r\n    <ng-container *ngIf=\"getItems(); else noItems\">\r\n      <div class=\"lg:w-2/3\">\r\n        <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n        <dl>\r\n          <div *ngFor=\"let item of getItems()\"\r\n              [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\r\n              [attr.id]=\"item.id ? item.id : null\"\r\n              [attr.role]=\"item.role\"\r\n              [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n              [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n              [attr.aria-label]=\"item.ariaLabel\"\r\n              [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n              [attr.aria-hidden]=\"item.ariaHidden\"\r\n              [attr.aria-disabled]=\"item.ariaDisabled\"\r\n              [attr.aria-controls]=\"item.ariaControls\"\r\n              [attr.aria-current]=\"item.ariaCurrent\"\r\n              [attr.aria-live]=\"item.ariaLive\"\r\n              [attr.aria-expanded]=\"item.ariaExpanded\"\r\n              [attr.aria-haspopup]=\"item.ariaHasPopup\">\r\n            <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\r\n                [attr.id]=\"item.term.id ? item.term.id : null\"\r\n                [attr.role]=\"item.term.role\"\r\n                [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\r\n                [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\r\n                [attr.aria-label]=\"item.term.ariaLabel\"\r\n                [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item.term.ariaHidden\"\r\n                [attr.aria-disabled]=\"item.term.ariaDisabled\"\r\n                [attr.aria-controls]=\"item.term.ariaControls\"\r\n                [attr.aria-current]=\"item.term.ariaCurrent\"\r\n                [attr.aria-live]=\"item.term.ariaLive\"\r\n                [attr.aria-expanded]=\"item.term.ariaExpanded\"\r\n                [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\r\n            </dt>\r\n            <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\r\n                [attr.id]=\"item.definition.id ? item.definition.id : null\"\r\n                [attr.role]=\"item.definition.role\"\r\n                [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\r\n                [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\r\n                [attr.aria-label]=\"item.definition.ariaLabel\"\r\n                [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\r\n                [attr.aria-hidden]=\"item.definition.ariaHidden\"\r\n                [attr.aria-disabled]=\"item.definition.ariaDisabled\"\r\n                [attr.aria-controls]=\"item.definition.ariaControls\"\r\n                [attr.aria-current]=\"item.definition.ariaCurrent\"\r\n                [attr.aria-live]=\"item.definition.ariaLive\"\r\n                [attr.aria-expanded]=\"item.definition.ariaExpanded\"\r\n                [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\r\n            </dd>\r\n          </div>\r\n        </dl>\r\n      </div>\r\n    </ng-container>\r\n    <ng-template #noItems>\r\n      <div class=\"lg:w-2/3\">\r\n        <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\r\n\r\n      <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\r\n           [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\r\n        <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\r\n        <ng-container *ngIf=\"statusComponent\">\r\n          <ng-content select=\"desy-status\"></ng-content>\r\n        </ng-container>\r\n        <desy-status *ngIf=\"!statusComponent && status\"\r\n                     [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\r\n                     [role]=\"status.role\"\r\n                     [ariaLabel]=\"status.ariaLabel\"\r\n                     [ariaDescribedBy]=\"status.ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"status.ariaLabelledBy\"\r\n                     [ariaHidden]=\"status.ariaHidden\"\r\n                     [ariaDisabled]=\"status.ariaDisabled\"\r\n                     [ariaControls]=\"status.ariaControls\"\r\n                     [ariaCurrent]=\"status.ariaCurrent\"\r\n                     [ariaLive]=\"status.ariaLive\"\r\n                     [ariaExpanded]=\"status.ariaExpanded\"\r\n                     [ariaErrorMessage]=\"status.ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"status.ariaHasPopup\"\r\n                     [tabindex]=\"status.tabindex\"></desy-status>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 StatusItemComponent.propDecorators = {
@@ -7473,24 +7131,15 @@ class TabsComponent extends AccessibilityComponent {
         this.changeDetector = changeDetector;
         this.currentTab = 0;
     }
-    ngOnChanges(changes) {
-        if (!this.title) {
-            throw new Error(`title is required`);
-        }
-        if (!this.tablistAriaLabel) {
-            throw new Error(`tablistAriaLabel is required`);
-        }
-    }
     ngAfterViewInit() {
-        const item = this.getItems();
-        this.selectTab(item.findIndex(value => !value.disabled));
+        if (this.items) {
+            const item = this.getItems();
+            this.selectTab(item.findIndex(value => !value.disabled));
+        }
         this.changeDetector.detectChanges();
     }
     getItems() {
         const items = (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
-        if (!items || items.length === 0) {
-            throw new Error(`items are required`);
-        }
         return items;
     }
     getItemPanel(tab) {
@@ -7502,9 +7151,6 @@ class TabsComponent extends AccessibilityComponent {
         }
         return panel;
     }
-    handleContentEmpty(element) {
-        throw new Error(`${element} content, html or text is required`);
-    }
     getIdPrefix() {
         if (this.idPrefix) {
             return this.idPrefix;
@@ -7574,7 +7220,7 @@ class TabsComponent extends AccessibilityComponent {
 TabsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-tabs',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-tabs ' + classes : 'c-tabs')\" data-module=\"c-tabs\"\r\n        [attr.role]=\"role\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.aria-disabled]=\"ariaDisabled\"\r\n        [attr.aria-controls]=\"ariaControls\"\r\n        [attr.aria-current]=\"ariaCurrent\"\r\n        [attr.aria-live]=\"ariaLive\"\r\n        [attr.aria-expanded]=\"ariaExpanded\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup\"\r\n        [attr.tabindex]=\"tabindex\">\r\n\r\n    <ng-container *ngIf=\"title\">\r\n      <ng-container [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\r\n        <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n        <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\r\n        <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\r\n        <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\r\n        <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!title\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\r\n          <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n          <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\r\n          <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\r\n          <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\r\n          <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getItems()\">\r\n      <div class=\"c-tabs lg:flex lg:flex-wrap\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\r\n          <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n                  <button #tabSelector\r\n                          (click)=\"selectTab(i)\"\r\n                          (keydown.home)=\"focusFirstTab($event)\"\r\n                          (keydown.end)=\"focusLastTab($event)\"\r\n                          (keydown.arrowleft)=\"focusPreviousTab(i)\"\r\n                          (keydown.arrowright)=\"focusNextTab(i)\"\r\n                          class=\"c-tabs__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none\"\r\n                          [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item)}\"\r\n                          [attr.id]=\"getItemId(i)\"\r\n                          [attr.role]=\"(item.role ? role : 'tab')\"\r\n                          [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\r\n                          [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                          [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                          [attr.aria-label]=\"item.ariaLabel\"\r\n                          [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                          [attr.aria-hidden]=\"item.ariaHidden\"\r\n                          [attr.aria-controls]=\"'tab-' + getItemId(i)\"\r\n                          [attr.aria-current]=\"item.ariaCurrent\"\r\n                          [attr.aria-live]=\"item.ariaLive\"\r\n                          [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                          [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                          [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\r\n                          [attr.disabled]=\"isDisabled(item)\"\r\n                          [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\r\n                      <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\" (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"
+                template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-tabs ' + classes : 'c-tabs')\" data-module=\"c-tabs\"\r\n        [attr.role]=\"role\"\r\n        [attr.aria-describedby]=\"ariaDescribedBy\"\r\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.aria-disabled]=\"ariaDisabled\"\r\n        [attr.aria-controls]=\"ariaControls\"\r\n        [attr.aria-current]=\"ariaCurrent\"\r\n        [attr.aria-live]=\"ariaLive\"\r\n        [attr.aria-expanded]=\"ariaExpanded\"\r\n        [attr.aria-haspopup]=\"ariaHasPopup\"\r\n        [attr.tabindex]=\"tabindex\">\r\n\r\n    <ng-container *ngIf=\"title\">\r\n      <ng-container [ngSwitch]=\"headingLevel\">\r\n        <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\r\n        <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n        <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\r\n        <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\r\n        <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\r\n        <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!title\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\r\n          <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n          <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\r\n          <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\r\n          <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\r\n          <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getItems()\">\r\n      <div class=\"c-tabs lg:flex lg:flex-wrap\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\r\n          <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n                  <button #tabSelector\r\n                          (click)=\"selectTab(i)\"\r\n                          (keydown.home)=\"focusFirstTab($event)\"\r\n                          (keydown.end)=\"focusLastTab($event)\"\r\n                          (keydown.arrowleft)=\"focusPreviousTab(i)\"\r\n                          (keydown.arrowright)=\"focusNextTab(i)\"\r\n                          class=\"c-tabs__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none\"\r\n                          [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item)}\"\r\n                          [attr.id]=\"getItemId(i)\"\r\n                          [attr.role]=\"(item.role ? role : 'tab')\"\r\n                          [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\r\n                          [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                          [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                          [attr.aria-label]=\"item.ariaLabel\"\r\n                          [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                          [attr.aria-hidden]=\"item.ariaHidden\"\r\n                          [attr.aria-controls]=\"'tab-' + getItemId(i)\"\r\n                          [attr.aria-current]=\"item.ariaCurrent\"\r\n                          [attr.aria-live]=\"item.ariaLive\"\r\n                          [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                          [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                          [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\r\n                          [attr.disabled]=\"isDisabled(item)\"\r\n                          [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\r\n                      <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\r\n                      </span>\r\n                  </button>\r\n          </ng-container>\r\n      </div>\r\n\r\n      <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\r\n           [attr.id]=\"'tab-' + getItemId(currentTab)\"\r\n           [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\r\n           [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\r\n           [attr.aria-label]=\"currentPanel?.ariaLabel\"\r\n           [attr.aria-labelledby]=\"getItemId(currentTab)\"\r\n           [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\r\n           [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\r\n           [attr.aria-controls]=\"currentPanel?.ariaControls\"\r\n           [attr.aria-current]=\"currentPanel?.ariaCurrent\"\r\n           [attr.aria-live]=\"currentPanel?.ariaLive\"\r\n           [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\r\n           [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\r\n        <ng-container [ngSwitch]=\"headingLevel\">\r\n          <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\r\n          <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\r\n          <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n          <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\r\n          <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\r\n          <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\r\n        </ng-container>\r\n        <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n</div>\r\n"
             },] }
 ];
 TabsComponent.ctorParameters = () => [
@@ -7625,14 +7271,13 @@ class AlertService {
         });
     }
     closeAlert(alert) {
-        if (!alert) {
-            throw Error('alert is required');
-        }
-        if (alert instanceof ComponentRef) {
-            alert.instance.dismiss();
-        }
-        else {
-            alert.dismiss();
+        if (alert) {
+            if (alert instanceof ComponentRef) {
+                alert.instance.dismiss();
+            }
+            else {
+                alert.dismiss();
+            }
         }
     }
     onCloseAlert(alert) {
@@ -7699,15 +7344,6 @@ class PaginationComponent extends AccessibilityComponent {
         this.prefix = '<span class="sr-only">Página&nbsp;</span>';
     }
     ngOnChanges(changes) {
-        if (!this.id) {
-            throw new Error(`id is required`);
-        }
-        if (this.totalItems === undefined || this.totalItems === null) {
-            throw new Error(`totalItems is required`);
-        }
-        if (!this.itemsPerPage === undefined || this.itemsPerPage === null) {
-            throw new Error(`itemsPerPage is required`);
-        }
         this.nPages = Math.ceil(this.totalItems / this.itemsPerPage);
         if (!this.currentPage || this.currentPage < 1 || this.currentPage > this.nPages) {
             this.currentPage = 1;
@@ -7772,7 +7408,7 @@ class PaginationComponent extends AccessibilityComponent {
 PaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-pagination',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [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"
+                template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\" *ngIf=\"totalItems && itemsPerPage\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
             },] }
 ];
 PaginationComponent.propDecorators = {
@@ -7986,91 +7622,6 @@ ContentChangeDirective.propDecorators = {
     desyContentChangeMutation: [{ type: Output }]
 };
 
-/**
- * Emite un evento cuando el contenido de un elemento esté vacío
- * El contenido marcado con #desyContentEmptyIgnore será ignorado
- *
- * NOTA: tener en cuenta que los eventos se emiten después de generarse la vista, por lo que si al gestionar el evento se realizan
- * cambios que afectan a la template, conviene forzar la detección de cambios. (Ejemplo de esto en el icono de NotificationComponent)
- */
-class ContentEmptyDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.desyContentEmpty = new EventEmitter();
-        this.desyContentNotEmpty = new EventEmitter();
-        this.lastWasEmpty = false;
-        this.viewInit = false;
-        const element = this.elementRef.nativeElement;
-        this.changes = new MutationObserver((mutations) => mutations.forEach(() => this.checkContent()));
-        this.changes.observe(element, {
-            attributes: false,
-            childList: true,
-            characterData: true,
-            subtree: false
-        });
-    }
-    ngAfterViewInit() {
-        if (!this.viewInit) {
-            this.viewInit = true;
-            this.checkContent();
-        }
-    }
-    /**
-     * Comprueba el contenido del elemento una vez se haya inicializado la vista. Si se detecta que el elemento está vacío, las comprobaciones
-     * sucesivas que tampoco detecten contenido no emitirán evento.
-     */
-    checkContent() {
-        if (this.viewInit) {
-            const childs = this.elementRef.nativeElement.childNodes;
-            let hasContent = false;
-            for (let i = 0; i < childs.length && !hasContent; i++) {
-                const item = childs.item(i);
-                if (item.nodeType === Node.TEXT_NODE && item.textContent.length > 0) {
-                    hasContent = true;
-                }
-                else if ((item.nodeType === Node.ELEMENT_NODE || item.nodeType === Node.CDATA_SECTION_NODE) && this.isContentNode(item)) {
-                    hasContent = true;
-                }
-            }
-            if (hasContent) {
-                if (this.lastWasEmpty) {
-                    this.desyContentNotEmpty.emit(this.elementRef.nativeElement.innerHTML);
-                }
-                this.lastWasEmpty = false;
-            }
-            else {
-                if (!this.lastWasEmpty) {
-                    this.desyContentEmpty.emit(this.elementRef.nativeElement.innerHTML);
-                }
-                this.lastWasEmpty = true;
-            }
-        }
-    }
-    isContentNode(elem) {
-        let contentNode = true;
-        if (this.contentsToIgnore && this.contentsToIgnore.length > 0) {
-            contentNode = !this.contentsToIgnore.find(ignoreElem => ignoreElem.nativeElement === elem);
-        }
-        return contentNode;
-    }
-    ngOnDestroy() {
-        this.changes.disconnect();
-    }
-}
-ContentEmptyDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[desyContentEmpty]'
-            },] }
-];
-ContentEmptyDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-ContentEmptyDirective.propDecorators = {
-    desyContentEmpty: [{ type: Output }],
-    desyContentNotEmpty: [{ type: Output }],
-    contentsToIgnore: [{ type: ContentChildren, args: ['desyContentEmptyIgnore', { read: ElementRef },] }]
-};
-
 /**
  * Permite introducir contenido de forma dinámica en una posición determinada desde:
  * - component: Componente existente de tipo ContentBase
@@ -8151,7 +7702,6 @@ SharedModule.decorators = [
                     InnerContentDirective,
                     ClickOutsideDirective,
                     ContentChangeDirective,
-                    ContentEmptyDirective,
                     CustomInnerContentDirective,
                 ],
                 imports: [
@@ -8174,7 +7724,6 @@ SharedModule.decorators = [
                     InnerContentDirective,
                     ClickOutsideDirective,
                     ContentChangeDirective,
-                    ContentEmptyDirective,
                     CustomInnerContentDirective,
                 ]
             },] }
@@ -8308,11 +7857,6 @@ class TooltipComponent extends AccessibilityComponent {
         this.hasContent = true;
         this.hasIconComponentContent = true;
     }
-    ngOnChanges(changes) {
-        if (!this.id) {
-            throw Error('id is required');
-        }
-    }
     ngAfterContentInit() {
         const contentTooltip = this.tooltipContent.nativeElement;
         this.tippyProperties = {
@@ -8362,9 +7906,6 @@ class TooltipComponent extends AccessibilityComponent {
         this.hasIconComponentContent = !isEmpty;
         this.changeDetectorRef.detectChanges();
     }
-    handleEmptyTooltipContent() {
-        throw Error('caller attribute or inner desy-tooltip-content component are required');
-    }
     getMainContent() {
         let content;
         if (this.html) {
@@ -8396,7 +7937,7 @@ TooltipComponent.KEY_CODE_ESC = 'Escape';
 TooltipComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-tooltip',
-                template: "<div [attr.id]=\"id\" [ngClass]=\"classes\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\r\n       ngxTippy [tippyProps]=\"tippyProperties\"\r\n       class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n       tabindex=\"0\" role=\"button\"\r\n       [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\"\r\n       (desyContentEmpty)=\"handleEmptyContent(true)\" (desyContentNotEmpty)=\"handleEmptyContent(false)\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\r\n    <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" #desyContentEmptyIgnore class=\"inline-block w-1.5\"></span>\r\n    <span *ngIf=\"iconComponent\" #desyContentEmptyIgnore class=\"inline-block\"\r\n          (desyContentEmpty)=\"handleEmptyIconContent(true)\"\r\n          (desyContentNotEmpty)=\"handleEmptyIconContent(false)\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasIconComponentContent\">\r\n        <ng-container [ngSwitch]=\"iconComponent.type\">\r\n          <svg *ngSwitchCase=\"'info'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchCase=\"'alert'\" #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchDefault #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\r\n        </ng-container>\r\n      </ng-container>\r\n    </span>\r\n    <span *ngIf=\"!iconComponent && icon\" #desyContentEmptyIgnore class=\"inline-block\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\r\n    </span>\r\n  </div>\r\n\r\n  <div #tooltipContent [attr.id]=\"getIdTooltip()\"\r\n       [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\"\r\n       (desyContentEmpty)=\"handleEmptyTooltipContent()\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n</div>\r\n"
+                template: "<div [attr.id]=\"id\" [ngClass]=\"classes\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\r\n       ngxTippy [tippyProps]=\"tippyProperties\"\r\n       class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\r\n       tabindex=\"0\" role=\"button\"\r\n       [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\r\n    <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\r\n    <span *ngIf=\"iconComponent\" class=\"inline-block\">\r\n      <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasIconComponentContent\">\r\n        <ng-container [ngSwitch]=\"iconComponent.type\">\r\n          <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\r\n          <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\r\n        </ng-container>\r\n      </ng-container>\r\n    </span>\r\n    <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\r\n    </span>\r\n  </div>\r\n\r\n  <div #tooltipContent [attr.id]=\"getIdTooltip()\"\r\n       [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 TooltipComponent.ctorParameters = () => [
@@ -8454,6 +7995,7 @@ DesyViewsModule.decorators = [
                     TooltipContentComponent,
                     PanelComponent,
                     TabItemComponent,
+                    MediaObjectFigureComponent,
                 ],
                 imports: [
                     CommonModule,
@@ -8486,6 +8028,7 @@ DesyViewsModule.decorators = [
                     TooltipContentComponent,
                     PanelComponent,
                     TabItemComponent,
+                    MediaObjectFigureComponent,
                 ]
             },] }
 ];
@@ -8872,5 +8415,5 @@ DesyAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, TreeComponent, TreeItemComponent, TreeItemsGeneratorComponent, TreeSubComponent, summaryTextOrSummaryHtmlRequiredFunction, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, AttributeChangeDirective as ɵba, InnerContentDirective as ɵbb, ClickOutsideDirective as ɵbc, ContentChangeDirective as ɵbd, ContentEmptyDirective as ɵbe, CustomInnerContentDirective as ɵbf, TooltipComponent as ɵbg, TemplateDrivenWrapperComponent as ɵbh, DateInputDividerComponent as ɵbi, DateInputDayComponent as ɵbj, DateInputMonthComponent as ɵbk, DateInputYearComponent as ɵbl, FocusClickedCellDirective as ɵbm, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, ITreeItem as ɵk, TreeCheckboxComponent as ɵl, HeaderNavigationItemComponent as ɵm, MenubaritemDirective as ɵn, RowDirective as ɵo, CellDirective as ɵp, TabItemComponent as ɵq, PanelComponent as ɵr, ToggleComponent as ɵs, ToggleOnStateComponent as ɵt, ToggleOffStateComponent as ɵu, SharedModule as ɵv, TextOrHtmlRequiredComponent as ɵw, InnerHtmlPipe as ɵx, MakeHtmlListPipe as ɵy, ExternalHrefPipe as ɵz };
+export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, TreeComponent, TreeItemComponent, TreeItemsGeneratorComponent, TreeSubComponent, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, ExternalHrefPipe as ɵba, AttributeChangeDirective as ɵbb, InnerContentDirective as ɵbc, ClickOutsideDirective as ɵbd, ContentChangeDirective as ɵbe, CustomInnerContentDirective as ɵbf, TooltipComponent as ɵbg, TemplateDrivenWrapperComponent as ɵbh, DateInputDividerComponent as ɵbi, DateInputDayComponent as ɵbj, DateInputMonthComponent as ɵbk, DateInputYearComponent as ɵbl, FocusClickedCellDirective as ɵbm, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, ITreeItem as ɵk, TreeCheckboxComponent as ɵl, HeaderNavigationItemComponent as ɵm, MenubaritemDirective as ɵn, RowDirective as ɵo, CellDirective as ɵp, MediaObjectFigureComponent as ɵq, TabItemComponent as ɵr, PanelComponent as ɵs, ToggleComponent as ɵt, ToggleOnStateComponent as ɵu, ToggleOffStateComponent as ɵv, SharedModule as ɵw, TextOrHtmlRequiredComponent as ɵx, InnerHtmlPipe as ɵy, MakeHtmlListPipe as ɵz };
 //# sourceMappingURL=desy-angular.js.map