desy-angular 9.0.0 → 9.1.0

package/fesm2022/desy-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, Directive, Pipe, EventEmitter, HostBinding, Output, ElementRef, QueryList, ViewChildren, ContentChildren, HostListener, forwardRef, Optional, ChangeDetectionStrategy, ViewContainerRef, Type, TemplateRef, ComponentRef, Injectable, ContentChild, SecurityContext, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, Directive, Pipe, EventEmitter, HostBinding, Output, ElementRef, HostListener, QueryList, ViewChildren, ContentChildren, forwardRef, Optional, ChangeDetectionStrategy, ViewContainerRef, Type, TemplateRef, ComponentRef, Injectable, ContentChild, SecurityContext, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
@@ -584,6 +584,16 @@ class DropdownComponent extends AccessibilityAndContentRequiredComponent {
         this.clickOutsideEnabled = false;
     }
     static { this.KEY_CODE_ESC = 'Escape'; }
+    detectClickToFocusBtn(event) {
+        if (event && event.href) {
+            document.dispatchEvent(new KeyboardEvent("keydown", {
+                'key': 'Escape'
+            }));
+            setTimeout(() => {
+                this.dropdownBtn.nativeElement.focus();
+            }, 100);
+        }
+    }
     ngOnInit() {
         let contentTooltip;
         if (this.dropdownContent && this.dropdownContent.nativeElement) {
@@ -665,14 +675,17 @@ class DropdownComponent extends AccessibilityAndContentRequiredComponent {
         return this.disabled ? true : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "desy-dropdown", inputs: { id: "id", disabled: "disabled", hiddenText: "hiddenText", classesContainer: "classesContainer", classesTooltip: "classesTooltip", caller: "caller", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "class": "this.classesContainer" } }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\n  </span>\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>\n</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i3.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "desy-dropdown", inputs: { id: "id", disabled: "disabled", hiddenText: "hiddenText", classesContainer: "classesContainer", classesTooltip: "classesTooltip", caller: "caller", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "click": "detectClickToFocusBtn($event.target)" }, properties: { "class": "this.classesContainer" } }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropdownBtn", first: true, predicate: ["dropdownBtn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button #dropdownBtn (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\n  </span>\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>\n</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i3.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'desy-dropdown', template: "<button (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\n  </span>\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>\n</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>" }]
+            args: [{ selector: 'desy-dropdown', template: "<button #dropdownBtn (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\n  </span>\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>\n</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>" }]
         }], propDecorators: { dropdownContent: [{
                 type: ViewChild,
                 args: ['dropdownContent', { read: ElementRef, static: true }]
+            }], dropdownBtn: [{
+                type: ViewChild,
+                args: ['dropdownBtn', { read: ElementRef, static: true }]
             }], id: [{
                 type: Input
             }], disabled: [{
@@ -692,6 +705,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], clickEvent: [{
                 type: Output
+            }], detectClickToFocusBtn: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
             }] } });
 
 class StringUtils {
@@ -1861,8 +1877,10 @@ class InputComponent extends FormFieldComponent {
         this.onChange(this.value);
     }
     onInput(event) {
-        this.value = event.target.value;
-        this.onChange(this.value);
+        if (event.data != '.') {
+            this.value = event.target.value;
+            this.onChange(this.value);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "desy-input", inputs: { name: "name", type: "type", describedBy: "describedBy", pattern: "pattern", inputmode: "inputmode", placeholder: "placeholder", formGroupClasses: "formGroupClasses", classes: "classes", autocomplete: "autocomplete", maxlength: "maxlength", errorId: "errorId", attributes: "attributes" }, host: { properties: { "class.c-form-group": "this.cfg", "class.c-form-group--error": "this.cfgr", "class": "this.formGroupClasses" } }, providers: [
@@ -1995,7 +2013,8 @@ class SelectComponent extends FormFieldComponent {
         return item instanceof OptionGroupComponent;
     }
     onInput(event) {
-        this.value = isNaN(Number(event.target.value)) ? event.target.value : Number(event.target.value);
+        let value = event.target.value;
+        this.value = !isNaN(Number(value)) && value != null && value != "" && value != undefined ? Number(value) : value;
         this.onChange(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -2043,22 +2062,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class FileUploadComponent extends FormFieldComponent {
     constructor() {
         super();
+        this.file = null;
         this.cfg = true;
     }
     onInput(event) {
         const value = event.target.files;
         if (value && value.length > 0 && value[0]) {
-            this.value = value[0];
+            this.file = value[0];
         }
         else {
-            this.value = null;
+            this.file = null;
         }
+        this.onChange(this.file);
         this.onTouch();
-        this.onChange(this.value);
     }
     ngOnChanges(changes) {
         this.cfgr = (this.hasErrorsMessage() || this.formGroupClasses === 'c-form-group--error');
     }
+    writeValue(file) {
+        this.file = file;
+        if (file === null && this.inputFile && this.inputFile.nativeElement) {
+            this.inputFile.nativeElement.value = file;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUploadComponent, selector: "desy-file-upload", inputs: { name: "name", describedBy: "describedBy", classes: "classes", accept: "accept", formGroupClasses: "formGroupClasses" }, host: { properties: { "class.c-form-group": "this.cfg", "class.c-form-group--error": "this.cfgr", "class": "this.formGroupClasses" } }, providers: [
             {
@@ -2066,7 +2092,7 @@ class FileUploadComponent extends FormFieldComponent {
                 multi: true,
                 useExisting: forwardRef(() => FileUploadComponent),
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n  <desy-label *ngIf=\"!labelRef && labelData\"\n              [text]=\"labelData.text\"\n              [html]=\"labelData.html\"\n              [classes]=\"labelData.classes\"\n              [isPageHeading]=\"labelData.isPageHeading\"\n              [for]=\"id\"\n              [role]=\"labelData.role\"\n              [ariaLabel]=\"labelData.ariaLabel\"\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n              [ariaHidden]=\"labelData.ariaHidden\"\n              [ariaDisabled]=\"labelData.ariaDisabled\"\n              [ariaControls]=\"labelData.ariaControls\"\n              [ariaCurrent]=\"labelData.ariaCurrent\"\n              [ariaLive]=\"labelData.ariaLive\"\n              [ariaExpanded]=\"labelData.ariaExpanded\"\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\n              [tabindex]=\"labelData.tabindex\"></desy-label>\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\n\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\n  <desy-hint *ngIf=\"!hintRef && hintData\"\n             [id]=\"getHintId()\"\n             [text]=\"hintData.text\"\n             [html]=\"hintData.html\"\n             [classes]=\"hintData.classes\"\n             [role]=\"hintData.role\"\n             [ariaLabel]=\"hintData.ariaLabel\"\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\n             [ariaHidden]=\"hintData.ariaHidden\"\n             [ariaDisabled]=\"hintData.ariaDisabled\"\n             [ariaControls]=\"hintData.ariaControls\"\n             [ariaCurrent]=\"hintData.ariaCurrent\"\n             [ariaLive]=\"hintData.ariaLive\"\n             [ariaExpanded]=\"hintData.ariaExpanded\"\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\n\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\n                      [id]=\"getErrorId()\"\n                      [text]=\"errorMessageData.text\"\n                      [html]=\"errorMessageData.html\"\n                      [classes]=\"errorMessageData.classes\"\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n                      [role]=\"errorMessageData.role\"\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n                      [ariaControls]=\"errorMessageData.ariaControls\"\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n                      [ariaLive]=\"errorMessageData.ariaLive\"\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\n\n  <input [class]=\"['mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base', classes] | makeHtmlList\" type=\"file\"\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\n         (input)=\"onInput($event)\"\n\n         [attr.id]=\"id ? id : null\"\n         [attr.name]=\"name ? name : null\"\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n         [attr.accept]=\"accept ? accept : null\"\n         [attr.role]=\"role ? role : null\"\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HintComponent, selector: "desy-hint", inputs: ["id", "classes", "html", "text"] }, { kind: "component", type: LabelComponent, selector: "desy-label", inputs: ["id", "classes", "html", "text", "isPageHeading", "headingLevel", "for"] }, { kind: "component", type: ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n  <desy-label *ngIf=\"!labelRef && labelData\"\n              [text]=\"labelData.text\"\n              [html]=\"labelData.html\"\n              [classes]=\"labelData.classes\"\n              [isPageHeading]=\"labelData.isPageHeading\"\n              [for]=\"id\"\n              [role]=\"labelData.role\"\n              [ariaLabel]=\"labelData.ariaLabel\"\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n              [ariaHidden]=\"labelData.ariaHidden\"\n              [ariaDisabled]=\"labelData.ariaDisabled\"\n              [ariaControls]=\"labelData.ariaControls\"\n              [ariaCurrent]=\"labelData.ariaCurrent\"\n              [ariaLive]=\"labelData.ariaLive\"\n              [ariaExpanded]=\"labelData.ariaExpanded\"\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\n              [tabindex]=\"labelData.tabindex\"></desy-label>\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\n\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\n  <desy-hint *ngIf=\"!hintRef && hintData\"\n             [id]=\"getHintId()\"\n             [text]=\"hintData.text\"\n             [html]=\"hintData.html\"\n             [classes]=\"hintData.classes\"\n             [role]=\"hintData.role\"\n             [ariaLabel]=\"hintData.ariaLabel\"\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\n             [ariaHidden]=\"hintData.ariaHidden\"\n             [ariaDisabled]=\"hintData.ariaDisabled\"\n             [ariaControls]=\"hintData.ariaControls\"\n             [ariaCurrent]=\"hintData.ariaCurrent\"\n             [ariaLive]=\"hintData.ariaLive\"\n             [ariaExpanded]=\"hintData.ariaExpanded\"\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\n\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\n                      [id]=\"getErrorId()\"\n                      [text]=\"errorMessageData.text\"\n                      [html]=\"errorMessageData.html\"\n                      [classes]=\"errorMessageData.classes\"\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n                      [role]=\"errorMessageData.role\"\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n                      [ariaControls]=\"errorMessageData.ariaControls\"\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n                      [ariaLive]=\"errorMessageData.ariaLive\"\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\n\n  <input #inputFile\n         [class]=\"['mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base', classes] | makeHtmlList\" type=\"file\"\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\n         (input)=\"onInput($event)\"\n         [attr.id]=\"id ? id : null\"\n         [attr.name]=\"name ? name : null\"\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n         [attr.accept]=\"accept ? accept : null\"\n         [attr.role]=\"role ? role : null\"\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HintComponent, selector: "desy-hint", inputs: ["id", "classes", "html", "text"] }, { kind: "component", type: LabelComponent, selector: "desy-label", inputs: ["id", "classes", "html", "text", "isPageHeading", "headingLevel", "for"] }, { kind: "component", type: ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -2076,8 +2102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => FileUploadComponent),
                         }
-                    ], template: "\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n  <desy-label *ngIf=\"!labelRef && labelData\"\n              [text]=\"labelData.text\"\n              [html]=\"labelData.html\"\n              [classes]=\"labelData.classes\"\n              [isPageHeading]=\"labelData.isPageHeading\"\n              [for]=\"id\"\n              [role]=\"labelData.role\"\n              [ariaLabel]=\"labelData.ariaLabel\"\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n              [ariaHidden]=\"labelData.ariaHidden\"\n              [ariaDisabled]=\"labelData.ariaDisabled\"\n              [ariaControls]=\"labelData.ariaControls\"\n              [ariaCurrent]=\"labelData.ariaCurrent\"\n              [ariaLive]=\"labelData.ariaLive\"\n              [ariaExpanded]=\"labelData.ariaExpanded\"\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\n              [tabindex]=\"labelData.tabindex\"></desy-label>\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\n\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\n  <desy-hint *ngIf=\"!hintRef && hintData\"\n             [id]=\"getHintId()\"\n             [text]=\"hintData.text\"\n             [html]=\"hintData.html\"\n             [classes]=\"hintData.classes\"\n             [role]=\"hintData.role\"\n             [ariaLabel]=\"hintData.ariaLabel\"\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\n             [ariaHidden]=\"hintData.ariaHidden\"\n             [ariaDisabled]=\"hintData.ariaDisabled\"\n             [ariaControls]=\"hintData.ariaControls\"\n             [ariaCurrent]=\"hintData.ariaCurrent\"\n             [ariaLive]=\"hintData.ariaLive\"\n             [ariaExpanded]=\"hintData.ariaExpanded\"\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\n\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\n                      [id]=\"getErrorId()\"\n                      [text]=\"errorMessageData.text\"\n                      [html]=\"errorMessageData.html\"\n                      [classes]=\"errorMessageData.classes\"\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n                      [role]=\"errorMessageData.role\"\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n                      [ariaControls]=\"errorMessageData.ariaControls\"\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n                      [ariaLive]=\"errorMessageData.ariaLive\"\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\n\n  <input [class]=\"['mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base', classes] | makeHtmlList\" type=\"file\"\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\n         (input)=\"onInput($event)\"\n\n         [attr.id]=\"id ? id : null\"\n         [attr.name]=\"name ? name : null\"\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n         [attr.accept]=\"accept ? accept : null\"\n         [attr.role]=\"role ? role : null\"\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\n\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                    ], template: "\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n  <desy-label *ngIf=\"!labelRef && labelData\"\n              [text]=\"labelData.text\"\n              [html]=\"labelData.html\"\n              [classes]=\"labelData.classes\"\n              [isPageHeading]=\"labelData.isPageHeading\"\n              [for]=\"id\"\n              [role]=\"labelData.role\"\n              [ariaLabel]=\"labelData.ariaLabel\"\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n              [ariaHidden]=\"labelData.ariaHidden\"\n              [ariaDisabled]=\"labelData.ariaDisabled\"\n              [ariaControls]=\"labelData.ariaControls\"\n              [ariaCurrent]=\"labelData.ariaCurrent\"\n              [ariaLive]=\"labelData.ariaLive\"\n              [ariaExpanded]=\"labelData.ariaExpanded\"\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\n              [tabindex]=\"labelData.tabindex\"></desy-label>\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" [for]=\"id\"></desy-label>\n\n  <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\n  <desy-hint *ngIf=\"!hintRef && hintData\"\n             [id]=\"getHintId()\"\n             [text]=\"hintData.text\"\n             [html]=\"hintData.html\"\n             [classes]=\"hintData.classes\"\n             [role]=\"hintData.role\"\n             [ariaLabel]=\"hintData.ariaLabel\"\n             [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\n             [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\n             [ariaHidden]=\"hintData.ariaHidden\"\n             [ariaDisabled]=\"hintData.ariaDisabled\"\n             [ariaControls]=\"hintData.ariaControls\"\n             [ariaCurrent]=\"hintData.ariaCurrent\"\n             [ariaLive]=\"hintData.ariaLive\"\n             [ariaExpanded]=\"hintData.ariaExpanded\"\n             [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\n             [ariaHasPopup]=\"hintData.ariaHasPopup\"\n             [tabindex]=\"hintData.tabindex\"></desy-hint>\n  <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\n\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\n                      [id]=\"getErrorId()\"\n                      [text]=\"errorMessageData.text\"\n                      [html]=\"errorMessageData.html\"\n                      [classes]=\"errorMessageData.classes\"\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n                      [role]=\"errorMessageData.role\"\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n                      [ariaControls]=\"errorMessageData.ariaControls\"\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n                      [ariaLive]=\"errorMessageData.ariaLive\"\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\n\n  <input #inputFile\n         [class]=\"['mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base', classes] | makeHtmlList\" type=\"file\"\n         [ngClass]=\"{'c-file-upload--error' : hasErrorsMessage()}\"\n         (input)=\"onInput($event)\"\n         [attr.id]=\"id ? id : null\"\n         [attr.name]=\"name ? name : null\"\n         [attr.aria-describedby]=\"[describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n         [attr.accept]=\"accept ? accept : null\"\n         [attr.role]=\"role ? role : null\"\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\n\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputFile: [{
+                type: ViewChild,
+                args: ['inputFile']
+            }], name: [{
                 type: Input
             }], describedBy: [{
                 type: Input
@@ -5383,11 +5412,11 @@ class BreadcrumbsComponent extends AccessibilityComponent {
         return itemList;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbsComponent, selector: "desy-breadcrumbs", inputs: { items: "items", classes: "classes", id: "id", collapseOnMobile: "collapseOnMobile", hasBackButton: "hasBackButton" }, queries: [{ propertyName: "itemComponentList", predicate: BreadcrumbsItemComponent }], usesInheritance: true, ngImport: i0, template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile===true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\n    [attr.id]=\"id ? id : null\"\n    [attr.role]=\"role\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : 'Est\u00E1s en: '\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-current]=\"ariaCurrent\"\n    [attr.aria-live]=\"ariaLive\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-haspopup]=\"ariaHasPopup\"\n    [attr.tabindex]=\"tabindex\">\n    <ol [class]=\"'lg:grid lg:grid-cols-max-content-'+getLength()+' w-full items-baseline text-sm'\">\n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\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\">\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>\n            </a>\n        </li>\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\n                    [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-current]=\"item.ariaCurrent\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\n                      [attr.id]=\"item.id ? item.id : null\"\n                      [attr.role]=\"item.role\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-disabled]=\"item.ariaDisabled\"\n                      [attr.aria-controls]=\"item.ariaControls\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </span>\n            </li>\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}\">\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\"\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </span>\n            </li>\n        </ng-container>\n    </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbsComponent, selector: "desy-breadcrumbs", inputs: { items: "items", classes: "classes", id: "id", collapseOnMobile: "collapseOnMobile", hasBackButton: "hasBackButton" }, queries: [{ propertyName: "itemComponentList", predicate: BreadcrumbsItemComponent }], usesInheritance: true, ngImport: i0, template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile===true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\n    [attr.id]=\"id ? id : null\"\n    [attr.role]=\"role\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : 'Est\u00E1s en: '\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-current]=\"ariaCurrent\"\n    [attr.aria-live]=\"ariaLive\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-haspopup]=\"ariaHasPopup\"\n    [attr.tabindex]=\"tabindex\">\n    <ol [ngClass]=\"{\n      'lg:grid-cols-max-content-1': getLength() === 1,\n      'lg:grid-cols-max-content-2': getLength() === 2,\n      'lg:grid-cols-max-content-3': getLength() === 3,\n      'lg:grid-cols-max-content-4': getLength() === 4,\n      'lg:grid-cols-max-content-5': getLength() === 5,\n      'lg:grid-cols-max-content-6': getLength() === 6,\n      'lg:grid-cols-max-content-7': getLength() === 7,\n      'lg:grid-cols-max-content-8': getLength() === 8 }\" class=\"lg:grid w-full items-baseline text-sm\">\n    \n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\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\">\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>\n            </a>\n        </li>\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\n                    [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-current]=\"item.ariaCurrent\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\n                      [attr.id]=\"item.id ? item.id : null\"\n                      [attr.role]=\"item.role\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-disabled]=\"item.ariaDisabled\"\n                      [attr.aria-controls]=\"item.ariaControls\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </span>\n            </li>\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}\">\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\"\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </span>\n            </li>\n        </ng-container>\n    </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'desy-breadcrumbs', template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile===true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\n    [attr.id]=\"id ? id : null\"\n    [attr.role]=\"role\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : 'Est\u00E1s en: '\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-current]=\"ariaCurrent\"\n    [attr.aria-live]=\"ariaLive\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-haspopup]=\"ariaHasPopup\"\n    [attr.tabindex]=\"tabindex\">\n    <ol [class]=\"'lg:grid lg:grid-cols-max-content-'+getLength()+' w-full items-baseline text-sm'\">\n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\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\">\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>\n            </a>\n        </li>\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\n                    [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-current]=\"item.ariaCurrent\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\n                      [attr.id]=\"item.id ? item.id : null\"\n                      [attr.role]=\"item.role\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-disabled]=\"item.ariaDisabled\"\n                      [attr.aria-controls]=\"item.ariaControls\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </span>\n            </li>\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}\">\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\"\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </span>\n            </li>\n        </ng-container>\n    </ol>\n</nav>\n" }]
+            args: [{ selector: 'desy-breadcrumbs', template: "<nav [class]=\"(classes ? 'c-breadcrumbs ' + classes : 'c-breadcrumbs') + (collapseOnMobile===true ? ' ' + 'c-breadcrumbs--collapse-on-mobile' : '')\"\n    [attr.id]=\"id ? id : null\"\n    [attr.role]=\"role\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-errormessage]=\"ariaErrorMessage\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : 'Est\u00E1s en: '\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-disabled]=\"ariaDisabled\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-current]=\"ariaCurrent\"\n    [attr.aria-live]=\"ariaLive\"\n    [attr.aria-expanded]=\"ariaExpanded\"\n    [attr.aria-haspopup]=\"ariaHasPopup\"\n    [attr.tabindex]=\"tabindex\">\n    <ol [ngClass]=\"{\n      'lg:grid-cols-max-content-1': getLength() === 1,\n      'lg:grid-cols-max-content-2': getLength() === 2,\n      'lg:grid-cols-max-content-3': getLength() === 3,\n      'lg:grid-cols-max-content-4': getLength() === 4,\n      'lg:grid-cols-max-content-5': getLength() === 5,\n      'lg:grid-cols-max-content-6': getLength() === 6,\n      'lg:grid-cols-max-content-7': getLength() === 7,\n      'lg:grid-cols-max-content-8': getLength() === 8 }\" class=\"lg:grid w-full items-baseline text-sm\">\n    \n        <li *ngIf=\"hasBackButton\" class=\"c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base\">\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\">\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>\n            </a>\n        </li>\n        <ng-container *ngFor=\"let item of getItemList(); last as isLast; index as index\">\n            <li *ngIf=\"!isLast\" class=\"flex items-baseline mb-sm py-xs text-neutral-dark\"  [ngClass]=\"{'hover:text-black' : item.routerLink}\">\n                <a *ngIf=\"item.routerLink\" class=\"underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate\"\n                    [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-current]=\"item.ariaCurrent\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline truncate\"\n                      [attr.id]=\"item.id ? item.id : null\"\n                      [attr.role]=\"item.role\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-disabled]=\"item.ariaDisabled\"\n                      [attr.aria-controls]=\"item.ariaControls\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"item.tabindex\">\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                </span>\n            </li>\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}\">\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\"\n                    aria-current=\"page\" [routerLink]=\"item.routerLink\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </a>\n                <span *ngIf=\"!item.routerLink\" class=\"no-underline text-black truncate\" aria-current=\"page\"\n                    [attr.id]=\"item.id ? item.id : null\"\n                    [attr.role]=\"item.role\"\n                    [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                    [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                    [attr.aria-hidden]=\"item.ariaHidden\"\n                    [attr.aria-disabled]=\"item.ariaDisabled\"\n                    [attr.aria-controls]=\"item.ariaControls\"\n                    [attr.aria-live]=\"item.ariaLive\"\n                    [attr.aria-expanded]=\"item.ariaExpanded\"\n                    [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                    [attr.tabindex]=\"item.tabindex\">\n                  <strong>\n                    <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n                  </strong>\n                </span>\n            </li>\n        </ng-container>\n    </ol>\n</nav>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { items: [{
                 type: Input
             }], classes: [{
@@ -6113,7 +6142,7 @@ class FooterComponent extends AccessibilityComponent {
         return meta instanceof FooterMetaComponent ? meta.contentComponent : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, selector: "desy-footer", inputs: { meta: "meta", navigation: "navigation", icon: "icon", containerClasses: "containerClasses", classes: "classes", description: "description", noLogo: "noLogo" }, queries: [{ propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "metaComponent", predicate: FooterMetaComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "navigationComponent", predicate: FooterNavigationComponent }], usesInheritance: true, ngImport: i0, template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', classes] | makeHtmlList\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\n    <ng-container *ngIf=\"getNavigationItems()\">\n      <div class=\"flex flex-col lg:flex-row flex-wrap gap-base\">\n        <div class=\"flex-1\" *ngFor=\"let nav of getNavigationItems()\">\n          <div class=\"lg:flex-1\">\n            <h3 class=\"c-h3 mb-base\">{{nav.title}}</h3>\n          </div>\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\n              <ng-container *ngTemplateOutlet=\"item.href !== null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <hr class=\"my-base border-t border-neutral-base\">\n    </ng-container>\n\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\n      <div class=\"mb-base\">\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\n          <ng-container *ngIf=\"metaElement\">\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap mb-base\" *ngIf=\"getMetaItems(metaElement)\">\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\n                <ng-container *ngTemplateOutlet=\"item.href !== null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n              </li>\n            </ul>\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\n              <p>\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\n              </p>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\n\n        <!-- Description -->\n        <div *ngIf=\"descriptionComponent || description?.html || description?.text; else noDesc\">\n          <h2 class=\"sr-only\">{{descriptionComponent?.visuallyHiddenTitle ? descriptionComponent?.visuallyHiddenTitle : description?.visuallyHiddenTitle ? description?.visuallyHiddenTitle : 'Acerca de'}}</h2>\n          <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description?.html, text: description?.text }\"></ng-container>\n        </div>\n        <ng-template #noDesc>\n          <div class=\"leading-tight\">\n            <p>\n              Todo el contenido bajo\n              <a class=\"c-link c-link--neutral\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\" rel=\"license\"\n                target=\"_blank\">licencia CC BY 4.0</a>\n            </p>\n          </div>\n          <div class=\"leading-tight\">\n            <p>\n              <a target=\"_blank\" class=\"c-link c-link--neutral\" href=\"https://www.aragon.es/\">Gobierno de Arag\u00F3n</a>. Edificio\n              Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\"\n                class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\n            </p>\n          </div>\n        </ng-template>\n\n      </div>\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\n        <p *ngIf=\"iconComponent || icon?.html\">\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\n        </p>\n        <p *ngIf=\"!noLogo\">\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)\">\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>\n          </a>\n        </p>\n      </div>\n    </div>\n  </div>\n</footer>\n\n<ng-template #itemHref let-item=\"item\">\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #itemRouterLink let-item=\"item\">\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, selector: "desy-footer", inputs: { meta: "meta", navigation: "navigation", icon: "icon", containerClasses: "containerClasses", classes: "classes", description: "description", noLogo: "noLogo" }, queries: [{ propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "metaComponent", predicate: FooterMetaComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "navigationComponent", predicate: FooterNavigationComponent }], usesInheritance: true, ngImport: i0, template: "<footer [class]=\"['py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm text-neutral-dark', classes] | makeHtmlList\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\n    <ng-container *ngIf=\"getNavigationItems()\">\n      <div class=\"flex flex-col lg:flex-row flex-wrap gap-base\">\n        <div class=\"flex-1\" *ngFor=\"let nav of getNavigationItems()\">\n          <div class=\"lg:flex-1\">\n            <h3 class=\"c-h3 mb-base\">{{nav.title}}</h3>\n          </div>\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\n              <ng-container *ngTemplateOutlet=\"(item.href !== null && item.href !== undefined) ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <hr class=\"my-base border-t border-neutral-base\">\n    </ng-container>\n\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\n      <div class=\"mb-base\">\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\n          <ng-container *ngIf=\"metaElement\">\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap mb-base\" *ngIf=\"getMetaItems(metaElement)\">\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\n                <ng-container *ngTemplateOutlet=\"(item.href !== null && item.href !== undefined) ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n              </li>\n            </ul>\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\n              <p>\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\n              </p>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\n\n        <!-- Description -->\n        <div *ngIf=\"descriptionComponent || description?.html || description?.text; else noDesc\">\n          <h2 class=\"sr-only\">{{descriptionComponent?.visuallyHiddenTitle ? descriptionComponent?.visuallyHiddenTitle : description?.visuallyHiddenTitle ? description?.visuallyHiddenTitle : 'Acerca de'}}</h2>\n          <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description?.html, text: description?.text }\"></ng-container>\n        </div>\n        <ng-template #noDesc>\n          <div class=\"leading-tight\">\n            <p>\n              Todo el contenido bajo\n              <a class=\"c-link c-link--neutral\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\" rel=\"license\"\n                target=\"_blank\">licencia CC BY 4.0</a>\n            </p>\n          </div>\n          <div class=\"leading-tight\">\n            <p>\n              <a target=\"_blank\" class=\"c-link c-link--neutral\" href=\"https://www.aragon.es/\">Gobierno de Arag\u00F3n</a>. Edificio\n              Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\"\n                class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\n            </p>\n          </div>\n        </ng-template>\n\n      </div>\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\n        <p *ngIf=\"iconComponent || icon?.html\">\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\n        </p>\n        <p *ngIf=\"!noLogo\">\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)\">\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>\n          </a>\n        </p>\n      </div>\n    </div>\n  </div>\n</footer>\n\n<ng-template #itemHref let-item=\"item\">\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #itemRouterLink let-item=\"item\">\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -6129,7 +6158,7 @@ __decorate([
 ], FooterComponent.prototype, "descriptionComponent", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\n    <ng-container *ngIf=\"getNavigationItems()\">\n      <div class=\"flex flex-col lg:flex-row flex-wrap gap-base\">\n        <div class=\"flex-1\" *ngFor=\"let nav of getNavigationItems()\">\n          <div class=\"lg:flex-1\">\n            <h3 class=\"c-h3 mb-base\">{{nav.title}}</h3>\n          </div>\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\n              <ng-container *ngTemplateOutlet=\"item.href !== null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <hr class=\"my-base border-t border-neutral-base\">\n    </ng-container>\n\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\n      <div class=\"mb-base\">\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\n          <ng-container *ngIf=\"metaElement\">\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap mb-base\" *ngIf=\"getMetaItems(metaElement)\">\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\n                <ng-container *ngTemplateOutlet=\"item.href !== null ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n              </li>\n            </ul>\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\n              <p>\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\n              </p>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\n\n        <!-- Description -->\n        <div *ngIf=\"descriptionComponent || description?.html || description?.text; else noDesc\">\n          <h2 class=\"sr-only\">{{descriptionComponent?.visuallyHiddenTitle ? descriptionComponent?.visuallyHiddenTitle : description?.visuallyHiddenTitle ? description?.visuallyHiddenTitle : 'Acerca de'}}</h2>\n          <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description?.html, text: description?.text }\"></ng-container>\n        </div>\n        <ng-template #noDesc>\n          <div class=\"leading-tight\">\n            <p>\n              Todo el contenido bajo\n              <a class=\"c-link c-link--neutral\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\" rel=\"license\"\n                target=\"_blank\">licencia CC BY 4.0</a>\n            </p>\n          </div>\n          <div class=\"leading-tight\">\n            <p>\n              <a target=\"_blank\" class=\"c-link c-link--neutral\" href=\"https://www.aragon.es/\">Gobierno de Arag\u00F3n</a>. Edificio\n              Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\"\n                class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\n            </p>\n          </div>\n        </ng-template>\n\n      </div>\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\n        <p *ngIf=\"iconComponent || icon?.html\">\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\n        </p>\n        <p *ngIf=\"!noLogo\">\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)\">\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>\n          </a>\n        </p>\n      </div>\n    </div>\n  </div>\n</footer>\n\n<ng-template #itemHref let-item=\"item\">\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #itemRouterLink let-item=\"item\">\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n" }]
+            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\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <div [class]=\"['container mx-auto px-base', containerClasses] | makeHtmlList\">\n    <ng-container *ngIf=\"getNavigationItems()\">\n      <div class=\"flex flex-col lg:flex-row flex-wrap gap-base\">\n        <div class=\"flex-1\" *ngFor=\"let nav of getNavigationItems()\">\n          <div class=\"lg:flex-1\">\n            <h3 class=\"c-h3 mb-base\">{{nav.title}}</h3>\n          </div>\n          <ul [class]=\"'grid grid-cols-1 gap-base lg:grid-cols-' + nav.columns\">\n            <li class=\"mb-xs\" *ngFor=\"let item of getNavigationItemItems(nav)\">\n              <ng-container *ngTemplateOutlet=\"(item.href !== null && item.href !== undefined) ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <hr class=\"my-base border-t border-neutral-base\">\n    </ng-container>\n\n    <div class=\"flex flex-wrap flex-col lg:flex-row justify-between\">\n      <div class=\"mb-base\">\n        <ng-template #metaTemplate let-metaElement=\"metaElement\">\n          <ng-container *ngIf=\"metaElement\">\n            <h2 class=\"sr-only\">{{(metaElement.visuallyHiddenTitle ? metaElement.visuallyHiddenTitle : 'Enlaces de pie de p\u00E1gina')}}</h2>\n            <ul class=\"flex flex-col lg:flex-row lg:flex-wrap mb-base\" *ngIf=\"getMetaItems(metaElement)\">\n              <li class=\"mb-sm mr-base\" *ngFor=\"let item of getMetaItems(metaElement)\">\n                <ng-container *ngTemplateOutlet=\"(item.href !== null && item.href !== undefined) ? itemHref : itemRouterLink; context: {item: item}\"></ng-container>\n              </li>\n            </ul>\n            <div class=\"mb-sm\"  *ngIf=\"getMetaContent(metaElement) || metaElement.html || metaElement.text\">\n              <p>\n                <ng-container *desyCustomInnerContent=\"{ component: getMetaContent(metaElement), html: metaElement.html, text: metaElement.text }\"></ng-container>\n              </p>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"metaTemplate; context: { metaElement: metaComponent ? metaComponent : meta }\"></ng-container>\n\n        <!-- Description -->\n        <div *ngIf=\"descriptionComponent || description?.html || description?.text; else noDesc\">\n          <h2 class=\"sr-only\">{{descriptionComponent?.visuallyHiddenTitle ? descriptionComponent?.visuallyHiddenTitle : description?.visuallyHiddenTitle ? description?.visuallyHiddenTitle : 'Acerca de'}}</h2>\n          <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description?.html, text: description?.text }\"></ng-container>\n        </div>\n        <ng-template #noDesc>\n          <div class=\"leading-tight\">\n            <p>\n              Todo el contenido bajo\n              <a class=\"c-link c-link--neutral\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.es\" rel=\"license\"\n                target=\"_blank\">licencia CC BY 4.0</a>\n            </p>\n          </div>\n          <div class=\"leading-tight\">\n            <p>\n              <a target=\"_blank\" class=\"c-link c-link--neutral\" href=\"https://www.aragon.es/\">Gobierno de Arag\u00F3n</a>. Edificio\n              Pignatelli. <abbr title=\u201DPaseo\u201D>P\u00BA</abbr> Mar\u00EDa Agust\u00EDn, 36. 50004 - Zaragoza - <abbr title=\"Tel\u00E9fono\"\n                class=\"no-underline\">Tel.</abbr> <a href=\"tel:+976714000\" class=\"c-link c-link--neutral\">976 714 000</a>\n            </p>\n          </div>\n        </ng-template>\n\n      </div>\n      <div class=\"mb-base lg:pl-base overflow-hidden\">\n        <p *ngIf=\"iconComponent || icon?.html\">\n          <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon?.html }\"></ng-container>\n        </p>\n        <p *ngIf=\"!noLogo\">\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)\">\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>\n          </a>\n        </p>\n      </div>\n    </div>\n  </div>\n</footer>\n\n<ng-template #itemHref let-item=\"item\">\n  <a class=\"c-link font-semibold\" [href]=\"item.href | externalHref\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #itemRouterLink let-item=\"item\">\n  <a class=\"c-link font-semibold\" [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\n     [attr.role]=\"item.role ? item.role : null\"\n     [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n     [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n     [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n     [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n     [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n     [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n     [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n     [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n     [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n    <ng-container *desyCustomInnerContent=\"{ component: item, text: item.text }\"></ng-container>\n  </a>\n</ng-template>\n" }]
         }], propDecorators: { meta: [{
                 type: Input
             }], navigation: [{
@@ -7502,7 +7531,7 @@ class NotificationComponent extends AccessibilityComponent {
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", title: "title", description: "description", content: "content", items: "items", icon: "icon", type: "type", isDismissible: "isDismissible", headingLevel: "headingLevel" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "itemCompontents", predicate: NotificationItemComponent }], usesInheritance: true, ngImport: i0, 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') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\n      <ng-container [ngSwitch]=\"getType()\">\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>\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>\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>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" 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>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", title: "title", description: "description", content: "content", items: "items", icon: "icon", type: "type", isDismissible: "isDismissible", headingLevel: "headingLevel" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "itemCompontents", predicate: NotificationItemComponent }], usesInheritance: true, ngImport: i0, template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type==='success' ? 'c-notification c-notification--success' : type==='alert' ? 'c-notification c-notification--alert' : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\n      <ng-container [ngSwitch]=\"getType()\">\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>\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>\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>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" 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>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }], animations: [
             trigger('displayNotification', [
                 state('void', style({
                     opacity: '0.0',
@@ -7552,7 +7581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 animate('150ms ease-in')
                             ])
                         ])
-                    ], 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') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\n      <ng-container [ngSwitch]=\"getType()\">\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>\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>\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>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" 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>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
+                    ], template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type==='success' ? 'c-notification c-notification--success' : type==='alert' ? 'c-notification c-notification--alert' : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"displayDefaultIcon && type\">\n      <ng-container [ngSwitch]=\"getType()\">\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>\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>\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>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" 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>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], classes: [{
@@ -8435,7 +8464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class TableAdvancedHeaderCellComponent extends ContentBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableAdvancedHeaderCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableAdvancedHeaderCellComponent, selector: "desy-table-advanced-header-cell", inputs: { classes: "classes", id: "id", colspan: "colspan", rowspan: "rowspan", orderBy: "orderBy", hasFilter: "hasFilter", filterClasses: "filterClasses", hasSelect: "hasSelect" }, queries: [{ propertyName: "selectComponent", predicate: TableAdvancedSelectComponent }, { propertyName: "contentComponent", predicate: ContentComponent }], usesInheritance: true, ngImport: i0, template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableAdvancedHeaderCellComponent, selector: "desy-table-advanced-header-cell", inputs: { classes: "classes", id: "id", colspan: "colspan", rowspan: "rowspan", orderBy: "orderBy", hasFilter: "hasFilter", filterClasses: "filterClasses", hasSelect: "hasSelect", identifier: "identifier" }, queries: [{ propertyName: "selectComponent", predicate: TableAdvancedSelectComponent }, { propertyName: "contentComponent", predicate: ContentComponent }], usesInheritance: true, ngImport: i0, template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>', isInline: true }); }
 }
 __decorate([
     DesyContentChild(),
@@ -8467,6 +8496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hasSelect: [{
                 type: Input
+            }], identifier: [{
+                type: Input
             }], selectComponent: [{
                 type: ContentChildren,
                 args: [TableAdvancedSelectComponent]
@@ -8696,10 +8727,10 @@ class TableAdvancedComponent extends AccessibilityComponent {
         if (head) {
             head.forEach((headerCell, headerCellIndex) => {
                 if (headerCell.hasFilter && headerCell.activeFilter) {
-                    params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueFilter });
+                    params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueFilter, identifier: headerCell.identifier });
                 }
                 if (headerCell.hasSelect && headerCell.activeSelect) {
-                    params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueSelect });
+                    params.filters.push({ columnIndex: headerCellIndex, filterText: headerCell.valueSelect, identifier: headerCell.identifier });
                 }
             });
             const orderByColumnIndex = head.findIndex(cell => cell.orderBy && cell.orderBy !== OrderBy.none);
@@ -8832,14 +8863,28 @@ class TableAdvancedComponent extends AccessibilityComponent {
         let result;
         const aComparable = this.cleanCurrency(a.getContent());
         const bComparable = this.cleanCurrency(b.getContent());
-        if (isNaN(+aComparable) && isNaN(+bComparable)) {
-            result = aComparable.localeCompare(bComparable, 'es', { sensitivity: 'base', ignorePunctuation: true });
-        }
-        else {
-            result = aComparable.localeCompare(bComparable, undefined, { numeric: true });
+        const numberRegex = /^-?\d+(\.|,)?\d*$/;
+        const dateRegex = /^(\d{2})(\/|-)(\d{2})(\/|-)(\d{4})( (\d{2}):(\d{2})(:(\d{2}))?)?$/;
+        if (aComparable && bComparable) {
+            if (numberRegex.test(aComparable) && numberRegex.test(bComparable)) {
+                result = aComparable.localeCompare(bComparable, undefined, { numeric: true });
+            }
+            else if (dateRegex.test(aComparable) && dateRegex.test(bComparable)) {
+                result = this.parseDateTime(aComparable) - this.parseDateTime(bComparable);
+            }
+            else {
+                result = aComparable.localeCompare(bComparable, 'es', { sensitivity: 'base', ignorePunctuation: true });
+            }
         }
         return result * (isAsc ? 1 : -1);
     }
+    parseDateTime(input) {
+        let [datePart, timePart] = input.split(' ');
+        let [day, month, year] = datePart.split(/\/|-/).map(Number);
+        let [hours = 0, minutes = 0, seconds = 0] = (timePart ? timePart.split(':') : []).map(Number);
+        let date = new Date(year, month - 1, day, hours, minutes, seconds);
+        return date.getTime();
+    }
     getNextDirection(item) {
         if (item.orderBy === OrderBy.none || item.orderBy === OrderBy.desc) {
             return OrderBy.asc;
@@ -8866,7 +8911,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableAdvancedComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableAdvancedComponent, selector: "desy-table-advanced", inputs: { rows: "rows", head: "head", caption: "caption", captionClasses: "captionClasses", firstCellIsHeader: "firstCellIsHeader", hasCheckboxes: "hasCheckboxes", idPrefix: "idPrefix", classes: "classes", checkboxClasses: "checkboxClasses", id: "id", wrapper: "wrapper" }, outputs: { rowsChange: "rowsChange", rowsChecked: "rowsChecked", recalculateTable: "recalculateTable" }, queries: [{ propertyName: "captionComponent", predicate: TableCaptionComponent }, { propertyName: "headerComponent", predicate: TableAdvancedHeaderComponent }, { propertyName: "rowComponentList", predicate: TableAdvancedRowComponent }], viewQueries: [{ propertyName: "rowData", predicate: RowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n  <table role=\"grid\"\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n          [attr.id]=\"id ? id : null\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n      </caption>\n      <thead *ngIf=\"getHeaderCells()\">\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\n                  <span class=\"sr-only\">Seleccionar fila</span>\n              </th>\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\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\"\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\n                      [attr.role]=\"item.role ? item.role : null\"\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy === orderByType.asc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy === orderByType.desc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy === orderByType.none\">\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>\n                        </span>\n                    </span>\n                  </span>\n\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                  </span>\n              </th>\n          </tr>\n      </thead>\n\n      <tbody>\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\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\">\n                  <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n                    <ng-container *ngTemplateOutlet=\"tableSelect; context: {selectable: getSelectForItem(item)}\"></ng-container>\n                    <ng-template #tableSelect let-selectable=\"selectable\">\n                      <desy-select [id]=\"getIdHeaderSelect(iHead)\"\n                        [labelData]=\"{ text: 'Filtrar por esta columna', classes: 'sr-only' }\"\n                        [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full mt-0'\"\n                        [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : 'mb-0'\"\n                        [name]=\"selectable.name\"\n                        [items]=\"getItemSelectOptions(selectable)\"\n                        [disabled]=\"selectable.disabled\"\n                        [describedBy]=\"getIdHeaderSelect(iHead)\"\n\n                        [(ngModel)]=\"item.valueSelect\" (ngModelChange)=\"handleInputSearch(item)\"\n\n                        [role]=\"selectable.role\"\n                        [ariaLabel]=\"selectable.ariaLabel\"\n                        [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n                        [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n                        [ariaHidden]=\"selectable.ariaHidden\"\n                        [ariaDisabled]=\"selectable.ariaDisabled\"\n                        [ariaControls]=\"selectable.ariaControls\"\n                        [ariaCurrent]=\"selectable.ariaCurrent\"\n                        [ariaLive]=\"selectable.ariaLive\"\n                        [ariaExpanded]=\"selectable.ariaExpanded\"\n                        [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n                        [ariaHasPopup]=\"selectable.ariaHasPopup\"\n                        [tabindex]=\"selectable.tabindex\">\n                      </desy-select>\n                    </ng-template>\n                  </ng-container>\n\n                  <div *ngIf=\"item.hasSelect && item.hasFilter\" class=\"pb-sm\"></div>\n\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\n                                   (clickEvent)=\"handleInputSearch(item)\"\n                                   (ngModelChange)=\"handleInputSearch(item)\"\n                                   labelText=\"Buscar en esta columna\"\n                                   [id]=\"getIdHeaderFilter(iHead)\"\n                                   placeholder=\"Buscar\"\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\n              </td>\n          </tr>\n\n\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n              [desyRow]=\"row\">\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n                  tabindex=\"-1\" >\n                <div class=\"c-checkboxes c-checkboxes--sm\">\n                  <div>\n                    <div class=\"relative flex items-start\">\n                      <div class=\"flex items-center mx-sm\">\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\"\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\n                               [id]=\"getIdRowCheckbox(iRow)\"\n                               [name]=\"getIdRowCheckbox(iRow)\"\n                               [attr.aria-label]=\"'Fila ' + iRow\">\n                      </div>\n                      <div class=\"pt-0.5 leading-5\">\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </td>\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\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\"\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                      [attr.id]=\"cell.id ? cell.id : null\"\n                      [attr.role]=\"cell.role ? cell.role : null\"\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                  </th>\n                  <ng-template #elseTd>\n                      <td tabindex=\"-1\" desyFocusClickedCell\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                          [attr.id]=\"cell.id ? cell.id : null\"\n                          [attr.role]=\"cell.role ? cell.role : null\"\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                      </td>\n                  </ng-template>\n              </ng-container>\n          </tr>\n      </tbody>\n  </table>\n</ng-template>\n\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: SelectComponent, selector: "desy-select", inputs: ["name", "items", "describedBy", "formGroupClasses", "classes"] }, { kind: "component", type: SearchBarComponent, selector: "desy-search-bar", inputs: ["describedBy", "classes", "buttonClasses", "placeholder"], outputs: ["clickEvent"] }, { kind: "directive", type: FocusClickedCellDirective, selector: "[desyFocusClickedCell]" }, { kind: "directive", type: CellDirective, selector: "[desyCell]", inputs: ["row", "rowIndex", "columnIndex"] }, { kind: "directive", type: RowDirective, selector: "[desyRow]", inputs: ["desyRow"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableAdvancedComponent, selector: "desy-table-advanced", inputs: { rows: "rows", head: "head", caption: "caption", captionClasses: "captionClasses", firstCellIsHeader: "firstCellIsHeader", hasCheckboxes: "hasCheckboxes", idPrefix: "idPrefix", classes: "classes", checkboxClasses: "checkboxClasses", id: "id", wrapper: "wrapper" }, outputs: { rowsChange: "rowsChange", rowsChecked: "rowsChecked", recalculateTable: "recalculateTable" }, queries: [{ propertyName: "captionComponent", predicate: TableCaptionComponent }, { propertyName: "headerComponent", predicate: TableAdvancedHeaderComponent }, { propertyName: "rowComponentList", predicate: TableAdvancedRowComponent }], viewQueries: [{ propertyName: "rowData", predicate: RowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n  <table role=\"grid\"\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n          [attr.id]=\"id ? id : null\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n      </caption>\n      <thead *ngIf=\"getHeaderCells()\">\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n                  <span class=\"sr-only\">Seleccionar fila</span>\n              </th>\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\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\"\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\n                      [attr.role]=\"item.role ? item.role : null\"\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy === orderByType.asc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy === orderByType.desc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy === orderByType.none\">\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>\n                        </span>\n                    </span>\n                  </span>\n\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                  </span>\n              </th>\n          </tr>\n      </thead>\n\n      <tbody>\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\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\">\n                  <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n                    <ng-container *ngTemplateOutlet=\"tableSelect; context: {selectable: getSelectForItem(item)}\"></ng-container>\n                    <ng-template #tableSelect let-selectable=\"selectable\">\n                      <desy-select [id]=\"getIdHeaderSelect(iHead)\"\n                        [labelData]=\"{ text: 'Filtrar por esta columna', classes: 'sr-only' }\"\n                        [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full mt-0'\"\n                        [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : 'mb-0'\"\n                        [name]=\"selectable.name\"\n                        [items]=\"getItemSelectOptions(selectable)\"\n                        [disabled]=\"selectable.disabled\"\n                        [describedBy]=\"getIdHeaderSelect(iHead)\"\n\n                        [(ngModel)]=\"item.valueSelect\" (ngModelChange)=\"handleInputSearch(item)\"\n\n                        [role]=\"selectable.role\"\n                        [ariaLabel]=\"selectable.ariaLabel\"\n                        [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n                        [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n                        [ariaHidden]=\"selectable.ariaHidden\"\n                        [ariaDisabled]=\"selectable.ariaDisabled\"\n                        [ariaControls]=\"selectable.ariaControls\"\n                        [ariaCurrent]=\"selectable.ariaCurrent\"\n                        [ariaLive]=\"selectable.ariaLive\"\n                        [ariaExpanded]=\"selectable.ariaExpanded\"\n                        [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n                        [ariaHasPopup]=\"selectable.ariaHasPopup\"\n                        [tabindex]=\"selectable.tabindex\">\n                      </desy-select>\n                    </ng-template>\n                  </ng-container>\n\n                  <div *ngIf=\"item.hasSelect && item.hasFilter\" class=\"pb-sm\"></div>\n\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\n                                   (clickEvent)=\"handleInputSearch(item)\"\n                                   (ngModelChange)=\"handleInputSearch(item)\"\n                                   labelText=\"Buscar en esta columna\"\n                                   [id]=\"getIdHeaderFilter(iHead)\"\n                                   placeholder=\"Buscar\"\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\n              </td>\n          </tr>\n\n\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n              [desyRow]=\"row\">\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n                  tabindex=\"-1\" >\n                <div class=\"c-checkboxes c-checkboxes--sm\">\n                  <div>\n                    <div class=\"relative flex items-start\">\n                      <div class=\"flex items-center mx-sm\">\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\"\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\n                               [id]=\"getIdRowCheckbox(iRow)\"\n                               [name]=\"getIdRowCheckbox(iRow)\"\n                               [attr.aria-label]=\"'Fila ' + iRow\">\n                      </div>\n                      <div class=\"pt-0.5 leading-5\">\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </td>\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\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\"\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                      [attr.id]=\"cell.id ? cell.id : null\"\n                      [attr.role]=\"cell.role ? cell.role : null\"\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                  </th>\n                  <ng-template #elseTd>\n                      <td tabindex=\"-1\" desyFocusClickedCell\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                          [attr.id]=\"cell.id ? cell.id : null\"\n                          [attr.role]=\"cell.role ? cell.role : null\"\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                      </td>\n                  </ng-template>\n              </ng-container>\n          </tr>\n      </tbody>\n  </table>\n</ng-template>\n\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: SelectComponent, selector: "desy-select", inputs: ["name", "items", "describedBy", "formGroupClasses", "classes"] }, { kind: "component", type: SearchBarComponent, selector: "desy-search-bar", inputs: ["describedBy", "classes", "buttonClasses", "placeholder"], outputs: ["clickEvent"] }, { kind: "directive", type: FocusClickedCellDirective, selector: "[desyFocusClickedCell]" }, { kind: "directive", type: CellDirective, selector: "[desyCell]", inputs: ["row", "rowIndex", "columnIndex"] }, { kind: "directive", type: RowDirective, selector: "[desyRow]", inputs: ["desyRow"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -8878,7 +8923,7 @@ __decorate([
 ], TableAdvancedComponent.prototype, "headerComponent", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableAdvancedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'desy-table-advanced', template: "<ng-template #tableContent>\n  <table role=\"grid\"\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n          [attr.id]=\"id ? id : null\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n      </caption>\n      <thead *ngIf=\"getHeaderCells()\">\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', checkboxClasses] | makeHtmlList\">\n                  <span class=\"sr-only\">Seleccionar fila</span>\n              </th>\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\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\"\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\n                      [attr.role]=\"item.role ? item.role : null\"\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy === orderByType.asc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy === orderByType.desc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy === orderByType.none\">\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>\n                        </span>\n                    </span>\n                  </span>\n\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                  </span>\n              </th>\n          </tr>\n      </thead>\n\n      <tbody>\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\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\">\n                  <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n                    <ng-container *ngTemplateOutlet=\"tableSelect; context: {selectable: getSelectForItem(item)}\"></ng-container>\n                    <ng-template #tableSelect let-selectable=\"selectable\">\n                      <desy-select [id]=\"getIdHeaderSelect(iHead)\"\n                        [labelData]=\"{ text: 'Filtrar por esta columna', classes: 'sr-only' }\"\n                        [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full mt-0'\"\n                        [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : 'mb-0'\"\n                        [name]=\"selectable.name\"\n                        [items]=\"getItemSelectOptions(selectable)\"\n                        [disabled]=\"selectable.disabled\"\n                        [describedBy]=\"getIdHeaderSelect(iHead)\"\n\n                        [(ngModel)]=\"item.valueSelect\" (ngModelChange)=\"handleInputSearch(item)\"\n\n                        [role]=\"selectable.role\"\n                        [ariaLabel]=\"selectable.ariaLabel\"\n                        [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n                        [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n                        [ariaHidden]=\"selectable.ariaHidden\"\n                        [ariaDisabled]=\"selectable.ariaDisabled\"\n                        [ariaControls]=\"selectable.ariaControls\"\n                        [ariaCurrent]=\"selectable.ariaCurrent\"\n                        [ariaLive]=\"selectable.ariaLive\"\n                        [ariaExpanded]=\"selectable.ariaExpanded\"\n                        [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n                        [ariaHasPopup]=\"selectable.ariaHasPopup\"\n                        [tabindex]=\"selectable.tabindex\">\n                      </desy-select>\n                    </ng-template>\n                  </ng-container>\n\n                  <div *ngIf=\"item.hasSelect && item.hasFilter\" class=\"pb-sm\"></div>\n\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\n                                   (clickEvent)=\"handleInputSearch(item)\"\n                                   (ngModelChange)=\"handleInputSearch(item)\"\n                                   labelText=\"Buscar en esta columna\"\n                                   [id]=\"getIdHeaderFilter(iHead)\"\n                                   placeholder=\"Buscar\"\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\n              </td>\n          </tr>\n\n\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n              [desyRow]=\"row\">\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n                  tabindex=\"-1\" >\n                <div class=\"c-checkboxes c-checkboxes--sm\">\n                  <div>\n                    <div class=\"relative flex items-start\">\n                      <div class=\"flex items-center mx-sm\">\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\"\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\n                               [id]=\"getIdRowCheckbox(iRow)\"\n                               [name]=\"getIdRowCheckbox(iRow)\"\n                               [attr.aria-label]=\"'Fila ' + iRow\">\n                      </div>\n                      <div class=\"pt-0.5 leading-5\">\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </td>\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\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\"\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                      [attr.id]=\"cell.id ? cell.id : null\"\n                      [attr.role]=\"cell.role ? cell.role : null\"\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                  </th>\n                  <ng-template #elseTd>\n                      <td tabindex=\"-1\" desyFocusClickedCell\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                          [attr.id]=\"cell.id ? cell.id : null\"\n                          [attr.role]=\"cell.role ? cell.role : null\"\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                      </td>\n                  </ng-template>\n              </ng-container>\n          </tr>\n      </tbody>\n  </table>\n</ng-template>\n\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n" }]
+            args: [{ selector: 'desy-table-advanced', template: "<ng-template #tableContent>\n  <table role=\"grid\"\n          [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n          [attr.id]=\"id ? id : null\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n      <caption *ngIf=\"caption || captionComponent\" [class]=\"getCaptionClass()\">\n        <ng-container *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n      </caption>\n      <thead *ngIf=\"getHeaderCells()\">\n          <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n              <th *ngIf=\"hasCheckboxes\" scope=\"col\" [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n                  <span class=\"sr-only\">Seleccionar fila</span>\n              </th>\n              <th scope=\"col\" *ngFor=\"let item of getHeaderCells(); index as iHeader\" [id]=\"getIdHeader(iHeader)\"\n                      [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\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\"\n                      [attr.colspan]=\"item.colspan ? item.colspan  : null\"\n                      [attr.rowspan]=\"item.rowspan ? item.rowspan  : null\"\n                      [attr.role]=\"item.role ? item.role : null\"\n                      [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n                      [attr.aria-disabled]=\"item.ariaDisabled ? item.ariaDisabled : null\"\n                      [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n                      [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n                      [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n                      [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n                      [attr.tabindex]=\"item.tabindex ? item.tabindex : null\">\n\n                  <span *ngIf=\"item.orderBy\" class=\"inline-block relative\" (click)=\"handleSortByColumn(iHeader)\" desyFocusClickedCell\n                        [attr.tabindex]=\"item.orderBy ? -1 : null\"\n                        [attr.role]=\"item.orderBy ? 'button' : null\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                    <span class=\"c-table-advanced__order\" *ngIf=\"item.orderBy\">\n                        <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n                        <span class=\"c-table-advanced__ascending\" *ngIf=\"item.orderBy === orderByType.asc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__descending\" *ngIf=\"item.orderBy === orderByType.desc\">\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>\n                        </span>\n                        <span class=\"c-table-advanced__none\"  *ngIf=\"item.orderBy === orderByType.none\">\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>\n                        </span>\n                    </span>\n                  </span>\n\n                  <span *ngIf=\"!item.orderBy\" class=\"inline-block relative\">\n                    <ng-container *ngIf=\"item.text\">{{item.text}}</ng-container>\n                    <ng-container *ngIf=\"item.contentComponent\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n                    </ng-container>\n                  </span>\n              </th>\n          </tr>\n      </thead>\n\n      <tbody>\n          <tr class=\"divide-x divide-neutral-base\" *ngIf=\"hasFilters()\">\n              <td *ngIf=\"hasCheckboxes\" [ngClass]=\"checkboxClasses\"></td>\n              <td tabindex=\"-1\" *ngFor=\"let item of getHeaderCells(); index as iHead\" desyFocusClickedCell\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\">\n                  <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n                    <ng-container *ngTemplateOutlet=\"tableSelect; context: {selectable: getSelectForItem(item)}\"></ng-container>\n                    <ng-template #tableSelect let-selectable=\"selectable\">\n                      <desy-select [id]=\"getIdHeaderSelect(iHead)\"\n                        [labelData]=\"{ text: 'Filtrar por esta columna', classes: 'sr-only' }\"\n                        [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full mt-0'\"\n                        [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : 'mb-0'\"\n                        [name]=\"selectable.name\"\n                        [items]=\"getItemSelectOptions(selectable)\"\n                        [disabled]=\"selectable.disabled\"\n                        [describedBy]=\"getIdHeaderSelect(iHead)\"\n\n                        [(ngModel)]=\"item.valueSelect\" (ngModelChange)=\"handleInputSearch(item)\"\n\n                        [role]=\"selectable.role\"\n                        [ariaLabel]=\"selectable.ariaLabel\"\n                        [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n                        [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n                        [ariaHidden]=\"selectable.ariaHidden\"\n                        [ariaDisabled]=\"selectable.ariaDisabled\"\n                        [ariaControls]=\"selectable.ariaControls\"\n                        [ariaCurrent]=\"selectable.ariaCurrent\"\n                        [ariaLive]=\"selectable.ariaLive\"\n                        [ariaExpanded]=\"selectable.ariaExpanded\"\n                        [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n                        [ariaHasPopup]=\"selectable.ariaHasPopup\"\n                        [tabindex]=\"selectable.tabindex\">\n                      </desy-select>\n                    </ng-template>\n                  </ng-container>\n\n                  <div *ngIf=\"item.hasSelect && item.hasFilter\" class=\"pb-sm\"></div>\n\n                  <desy-search-bar *ngIf=\"item.hasFilter\"\n                                   [(ngModel)]=\"item.valueFilter\" [ngModelOptions]=\"{standalone: true}\"\n                                   (clickEvent)=\"handleInputSearch(item)\"\n                                   (ngModelChange)=\"handleInputSearch(item)\"\n                                   labelText=\"Buscar en esta columna\"\n                                   [id]=\"getIdHeaderFilter(iHead)\"\n                                   placeholder=\"Buscar\"\n                                   [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n                                   buttonClasses=\"m-xs p-0.5 text-xs\"\n                                   [describedBy]=\"getIdHeader(iHead)\"> </desy-search-bar>\n              </td>\n          </tr>\n\n\n          <tr *ngFor=\"let row of getVisibleRows(); index as iRow\" class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n              [desyRow]=\"row\">\n              <td *ngIf=\"hasCheckboxes\" desyFocusClickedCell [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n                  tabindex=\"-1\" >\n                <div class=\"c-checkboxes c-checkboxes--sm\">\n                  <div>\n                    <div class=\"relative flex items-start\">\n                      <div class=\"flex items-center mx-sm\">\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\"\n                               [(ngModel)]=\"row.checked\" (ngModelChange)=\"handleCheckboxChange(row)\"\n                               [id]=\"getIdRowCheckbox(iRow)\"\n                               [name]=\"getIdRowCheckbox(iRow)\"\n                               [attr.aria-label]=\"'Fila ' + iRow\">\n                      </div>\n                      <div class=\"pt-0.5 leading-5\">\n                        <label class=\"sr-only block text-sm -mt-1\" [for]=\"getIdRowCheckbox(iRow)\">Selecciona fila {{ iRow }}</label>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </td>\n              <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n                  <th *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\" scope=\"row\"\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\"\n                      desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                      [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                      [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                      [attr.id]=\"cell.id ? cell.id : null\"\n                      [attr.role]=\"cell.role ? cell.role : null\"\n                      [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                      [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                      [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                      [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                      [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                      [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                      [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                      [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                      [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                      [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                      [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                      [attr.tabindex]=\"cell.tabindex ? cell.tabindex : null\">\n                    <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                  </th>\n                  <ng-template #elseTd>\n                      <td tabindex=\"-1\" desyFocusClickedCell\n                          [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n                          desyCell [row]=\"row\" [rowIndex]=\"iRow\" [columnIndex]=\"columnIndex\"\n                          [attr.colspan]=\"cell.colspan ? cell.colspan  : null\"\n                          [attr.rowspan]=\"cell.rowspan ? cell.rowspan  : null\"\n                          [attr.id]=\"cell.id ? cell.id : null\"\n                          [attr.role]=\"cell.role ? cell.role : null\"\n                          [attr.aria-label]=\"cell.ariaLabel ? cell.ariaLabel : null\"\n                          [attr.aria-describedby]=\"cell.ariaDescribedBy ? cell.ariaDescribedBy : null\"\n                          [attr.aria-labelledby]=\"cell.ariaLabelledBy ? cell.ariaLabelledBy : null\"\n                          [attr.aria-hidden]=\"cell.ariaHidden ? cell.ariaHidden : null\"\n                          [attr.aria-disabled]=\"cell.ariaDisabled ? cell.ariaDisabled : null\"\n                          [attr.aria-controls]=\"cell.ariaControls ? cell.ariaControls : null\"\n                          [attr.aria-current]=\"cell.ariaCurrent ? cell.ariaCurrent : null\"\n                          [attr.aria-live]=\"cell.ariaLive ? cell.ariaLive : null\"\n                          [attr.aria-expanded]=\"cell.ariaExpanded ? cell.ariaExpanded : null\"\n                          [attr.aria-errormessage]=\"cell.ariaErrorMessage ? cell.ariaErrorMessage : null\"\n                          [attr.aria-haspopup]=\"cell.ariaHasPopup ? cell.ariaHasPopup : null\"\n                          [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n                        <ng-container *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n                      </td>\n                  </ng-template>\n              </ng-container>\n          </tr>\n      </tbody>\n  </table>\n</ng-template>\n\n<div *ngIf=\"wrapper; else tableContent\" [class]=\"wrapper.classes\">\n  <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rows: [{
                 type: Input
             }], head: [{
@@ -10655,6 +10700,7 @@ class PaginationComponent extends AccessibilityComponent {
         this.currentPage = 1;
         this.currentPageChange = new EventEmitter();
         this.itemsPerPageChange = new EventEmitter();
+        this.nPagesHistory = 0;
         this.defaultText = false;
         this.previousIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>';
         this.nextIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>';
@@ -10699,16 +10745,19 @@ class PaginationComponent extends AccessibilityComponent {
         return Math.min((pageIndex + 1) * this.itemsPerPage, this.totalItems);
     }
     buildPages() {
-        const itemList = [];
-        for (let i = 0; i < this.nPages; i++) {
-            const item = {
-                text: i + 1,
-                active: ((i + 1) === this.currentPage),
-                routerLink: []
-            };
-            itemList.push(item);
+        if (this.nPagesHistory != this.nPages) {
+            this.nPagesHistory = this.nPages;
+            const itemList = [];
+            for (let i = 0; i < this.nPages; i++) {
+                const item = {
+                    text: i + 1,
+                    active: ((i + 1) === this.currentPage),
+                    routerLink: []
+                };
+                itemList.push(item);
+            }
+            this.items = itemList;
         }
-        this.items = itemList;
     }
     getIdPrefix() {
         return this.idPrefix ? this.idPrefix : 'pagination-item';