desy-angular 5.0.0 → 5.1.2

package/bundles/desy-angular.umd.js

@@ -700,101 +700,100 @@
         function DropdownComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.clickEvent = new i0.EventEmitter();
-            _this.show = false;
+            _this.isOpen = false;
             _this.clickOutsideEnabled = false;
             return _this;
         }
         DropdownComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                var contentTooltip;
-                if (_this.dropdownContent && _this.dropdownContent.nativeElement) {
-                    contentTooltip = _this.dropdownContent.nativeElement;
-                    contentTooltip.style.display = 'block';
-                    _this.tippyProperties = {
-                        placement: 'bottom-start',
-                        inlinePositioning: true,
-                        content: contentTooltip,
-                        allowHTML: true,
-                        trigger: 'click',
-                        hideOnClick: true,
-                        interactive: true,
-                        arrow: false,
-                        offset: [0, -10],
-                        theme: '',
-                        plugins: [{
-                                name: 'hideOnEsc',
-                                defaultValue: true,
-                                fn: function (_a) {
-                                    var hide = _a.hide;
-                                    function onKeyDown(event) {
-                                        if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                                            hide();
-                                        }
-                                    }
-                                    return {
-                                        onShow: function () {
-                                            document.addEventListener('keydown', onKeyDown);
-                                        },
-                                        onHide: function () {
-                                            document.removeEventListener('keydown', onKeyDown);
-                                        },
-                                    };
-                                },
-                            }],
-                        role: false,
-                        aria: {
-                            content: 'auto',
-                        },
-                        onShown: function (instance) {
-                            var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
-                            if (firstFocusable) {
-                                setTimeout(function () { return firstFocusable.focus(); });
+            var contentTooltip;
+            if (this.dropdownContent && this.dropdownContent.nativeElement) {
+                contentTooltip = this.dropdownContent.nativeElement;
+                contentTooltip.style.display = 'block';
+                this.tippyProperties = {
+                    placement: 'bottom-start',
+                    inlinePositioning: true,
+                    content: contentTooltip,
+                    allowHTML: true,
+                    trigger: 'click',
+                    hideOnClick: true,
+                    interactive: true,
+                    arrow: false,
+                    offset: [0, -10],
+                    theme: '',
+                    plugins: [
+                        {
+                            name: 'hideOnPopperBlur',
+                            defaultValue: true,
+                            fn: function (instance) {
+                                return {
+                                    onCreate: function () {
+                                        instance.popper.addEventListener('focusout', function (event) {
+                                            if (instance.props.hideOnPopperBlur &&
+                                                event.relatedTarget &&
+                                                !instance.popper.contains(event.relatedTarget)) {
+                                                instance.hide();
+                                            }
+                                        });
+                                    },
+                                };
                             }
+                        },
+                        {
+                            name: 'hideOnEsc',
+                            defaultValue: true,
+                            fn: function (_a) {
+                                var hide = _a.hide;
+                                function onKeyDown(event) {
+                                    if (event.key === DropdownComponent.KEY_CODE_ESC) {
+                                        hide();
+                                    }
+                                }
+                                return {
+                                    onShow: function () {
+                                        document.addEventListener('keydown', onKeyDown);
+                                    },
+                                    onHide: function () {
+                                        document.removeEventListener('keydown', onKeyDown);
+                                    },
+                                };
+                            },
                         }
-                    };
-                }
-            });
-        };
-        DropdownComponent.prototype.ngOnChanges = function (changes) {
-            if (this.isDisabled()) { // se pone disable se cierra el dropdown
-                this.closeDropdown();
+                    ],
+                    role: false,
+                    aria: {
+                        content: 'auto',
+                    },
+                    onShown: function (instance) {
+                        var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
+                        if (firstFocusable) {
+                            firstFocusable.focus();
+                        }
+                    }
+                };
             }
         };
         DropdownComponent.prototype.onClick = function (event) {
             if (!this.isDisabled()) {
-                this.toggleDropdown();
                 this.clickEvent.emit(event);
             }
         };
-        DropdownComponent.prototype.toggleDropdown = function () {
-            var _this = this;
-            this.show = !this.show;
-            setTimeout(function () { return _this.clickOutsideEnabled = _this.show; });
-        };
-        DropdownComponent.prototype.closeDropdown = function () {
-            this.show = false;
-            this.clickOutsideEnabled = false;
+        DropdownComponent.prototype.setOpen = function (isOpen) {
+            this.isOpen = isOpen;
         };
         DropdownComponent.prototype.isDisabled = function () {
             return this.disabled ? true : null;
         };
-        DropdownComponent.prototype.onKeyDown = function (event) {
-            if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                this.closeDropdown();
-            }
-        };
         return DropdownComponent;
     }(AccessibilityAndContentRequiredComponent));
     DropdownComponent.KEY_CODE_ESC = 'Escape';
     DropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-dropdown',
-                    template: "<!-- dropdown -->\r\n<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button *ngIf=\"tippyProperties\" aria-haspopup=\"true\" (click)=\"onClick($event)\" ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"show\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\">\r\n      <ng-content></ng-content>\r\n    </span>    \r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"closeDropdown()\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n<!-- /dropdown -->\r\n"
+                    template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\"\r\n     (desyContentEmpty)=\"setOpen(false)\" (desyContentNotEmpty)=\"setOpen(true)\">\r\n  <button #desyContentEmptyIgnore (click)=\"onClick($event)\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          aria-haspopup=\"true\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" #desyContentEmptyIgnore class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
                 },] }
     ];
     DropdownComponent.propDecorators = {
-        dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef },] }],
+        dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef, static: true },] }],
         id: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         hiddenText: [{ type: i0.Input }],
@@ -802,8 +801,7 @@
         classesTooltip: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         caller: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }],
-        onKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+        clickEvent: [{ type: i0.Output }]
     };
 
     /**
@@ -827,28 +825,21 @@
         return StringUtils;
     }());
 
-    var ListboxLabelComponent = /** @class */ (function () {
+    var ListboxLabelComponent = /** @class */ (function (_super) {
+        __extends(ListboxLabelComponent, _super);
         function ListboxLabelComponent() {
-            this.isInit = false;
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        ListboxLabelComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.isInit = !!_this.content; });
-        };
-        ListboxLabelComponent.prototype.getContent = function () {
-            return this.isInit ? this.content : null;
-        };
         return ListboxLabelComponent;
-    }());
+    }(ContentBaseComponent));
     ListboxLabelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-listbox-label',
-                    template: "<ng-template #childComponentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                    template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
                 },] }
     ];
     ListboxLabelComponent.propDecorators = {
-        classes: [{ type: i0.Input }],
-        content: [{ type: i0.ViewChild, args: ['childComponentTemplate',] }]
+        classes: [{ type: i0.Input }]
     };
 
     var ListboxItemComponent = /** @class */ (function (_super) {
@@ -925,54 +916,72 @@
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.itemsChange = new i0.EventEmitter();
             _this.activeItemChange = new i0.EventEmitter();
-            _this.isListVisible = false;
+            _this.isListVisible = false; // Indica si la lista se está mostrando
             return _this;
         }
         ListboxComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                if (_this.listboxContent && _this.listboxContent.nativeElement) {
-                    var contentTooltip = _this.listboxContent.nativeElement;
-                    _this.tippyProperties = {
-                        placement: 'bottom-start',
-                        inlinePositioning: true,
-                        content: contentTooltip,
-                        allowHTML: true,
-                        trigger: 'click',
-                        hideOnClick: true,
-                        interactive: true,
-                        arrow: false,
-                        offset: [0, -10],
-                        theme: '',
-                        plugins: [{
-                                name: 'hideOnEsc',
-                                defaultValue: true,
-                                fn: function (_a) {
-                                    var hide = _a.hide;
-                                    function onKeyDown(event) {
-                                        if (event.key === ListboxComponent.KEY_CODE_ESC) {
-                                            hide();
-                                        }
-                                    }
-                                    return {
-                                        onShow: function () {
-                                            document.addEventListener('keydown', onKeyDown);
-                                        },
-                                        onHide: function () {
-                                            document.removeEventListener('keydown', onKeyDown);
-                                        },
-                                    };
-                                },
-                            }],
-                        role: false,
-                        aria: {
-                            content: 'auto',
+            var listboxButtonElement = this.listboxButton.nativeElement;
+            if (this.listboxContent && this.listboxContent.nativeElement) {
+                var contentTooltip = this.listboxContent.nativeElement;
+                this.tippyProperties = {
+                    placement: 'bottom-start',
+                    inlinePositioning: true,
+                    content: contentTooltip,
+                    allowHTML: true,
+                    trigger: 'click',
+                    hideOnClick: true,
+                    interactive: true,
+                    arrow: false,
+                    offset: [0, -10],
+                    theme: '',
+                    plugins: [
+                        {
+                            name: 'hideOnPopperBlur',
+                            defaultValue: true,
+                            fn: function (instance) {
+                                return {
+                                    onCreate: function () {
+                                        instance.popper.addEventListener('focusout', function (event) {
+                                            if (instance.props.hideOnPopperBlur &&
+                                                event.relatedTarget &&
+                                                !instance.popper.contains(event.relatedTarget)) {
+                                                instance.hide();
+                                            }
+                                        });
+                                    },
+                                };
+                            }
                         },
-                        onShow: _this.onListShow.bind(_this),
-                        onHidden: _this.onListClose.bind(_this)
-                    };
-                }
-            });
+                        {
+                            name: 'hideOnEsc',
+                            defaultValue: true,
+                            fn: function (_a) {
+                                var hide = _a.hide;
+                                function onKeyDown(event) {
+                                    if (event.key === ListboxComponent.KEY_CODE_ESC) {
+                                        hide();
+                                        listboxButtonElement.focus();
+                                    }
+                                }
+                                return {
+                                    onShow: function () {
+                                        document.addEventListener('keydown', onKeyDown);
+                                    },
+                                    onHide: function () {
+                                        document.removeEventListener('keydown', onKeyDown);
+                                    },
+                                };
+                            },
+                        }
+                    ],
+                    role: false,
+                    aria: {
+                        content: 'auto',
+                    },
+                    onShow: this.onListShow.bind(this),
+                    onHidden: this.onListClose.bind(this)
+                };
+            }
         };
         ListboxComponent.prototype.ngOnChanges = function () {
             var _this = this;
@@ -1086,11 +1095,11 @@
             if (this.doesChangeButtonText && !this.isMultiselectable && activeItems.length > 0) {
                 var activeItemOption = this.listboxOptions.find(function (item, index) { return index === activeItems[0].index; });
                 if (activeItemOption) {
-                    this.buttonContent = activeItemOption.nativeElement.innerHTML;
+                    this.buttonContentHtml = activeItemOption.nativeElement.innerHTML;
                 }
             }
             else {
-                this.buttonContent = this.html ? this.html : this.text;
+                this.buttonContentHtml = this.html ? this.html : null;
             }
             // Si hay cambios, se emiten
             if (hasActiveItemChange) {
@@ -1107,9 +1116,6 @@
         };
         ListboxComponent.prototype.onListClose = function () {
             this.isListVisible = false;
-            if (this.listboxButton) {
-                this.listboxButton.nativeElement.focus();
-            }
         };
         ListboxComponent.prototype.onListFocus = function () {
             var activeItemsData = this.getActiveItemsData();
@@ -1183,23 +1189,19 @@
         ListboxComponent.prototype.getLabelContent = function (label) {
             return label.html ? label.html : "<p>" + StringUtils.escapeHtml(label.text) + "</p>";
         };
-        ListboxComponent.prototype.isButtonContentHtml = function () {
-            var activeItemsData = this.getActiveItemsData();
-            return !!(this.doesChangeButtonText && !this.isMultiselectable && activeItemsData.length > 0 ? true : this.html);
-        };
         return ListboxComponent;
     }(AccessibilityAndTextOrHtmlRequiredComponent));
     ListboxComponent.KEY_CODE_ESC = 'Escape';
     ListboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-listbox',
-                    template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div *ngIf=\"labelComponent\" [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent.classes] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"labelComponent.getContent()\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"!labelComponent && label\" [id]=\"id + '-label'\" [class]=\"['mb-sm', label.classes] | makeHtmlList\"\r\n    [desyInnerContent]=\"getLabelContent(label)\" [isHtml]=\"true\">\r\n  </div>\r\n  <button *ngIf=\"tippyProperties\"\r\n          #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\"\r\n              [desyInnerContent]=\"buttonContent\" [isHtml]=\"isButtonContentHtml()\">\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\"\r\n            [desyInnerContent]=\"!item['content'] ? (item.html ? item.html : item.text) : null\"\r\n            [isHtml]=\"!item['content'] ? item.html : undefined\" [deleteContentIfEmpty]=\"false\">\r\n          <ng-container *ngTemplateOutlet=\"item['content']\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
+                    template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\r\n  </div>\r\n  <button #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: text }\"></ng-container>\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
                 },] }
     ];
     ListboxComponent.propDecorators = {
-        listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef },] }],
+        listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef, static: true },] }],
         listboxList: [{ type: i0.ViewChild, args: ['list', { read: i0.ElementRef },] }],
-        listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef },] }],
+        listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef, static: true },] }],
         listboxOptions: [{ type: i0.ViewChildren, args: ['option', { read: i0.ElementRef },] }],
         labelComponent: [{ type: i0.ContentChildren, args: [ListboxLabelComponent,] }],
         itemComponentList: [{ type: i0.ContentChildren, args: [ListboxItemComponent,] }],
@@ -3506,135 +3508,1138 @@
                     throw new Error('Item name is required');
                 }
             });
-            return items;
+            return items;
+        };
+        DateInputComponent.prototype.getItemDividerTemplate = function (item) {
+            return item.divider instanceof DateInputDividerComponent ? item.divider.dividerContent : null;
+        };
+        DateInputComponent.prototype.getItemDividerHtml = function (item) {
+            return item.divider.html ? item.divider.html : "<p>" + StringUtils.escapeHtml(item.divider.text) + "</p>";
+        };
+        return DateInputComponent;
+    }(FormFieldComponent));
+    DateInputComponent.defaultItems = [
+        {
+            name: 'day',
+            classes: 'w-14',
+            maxlength: 2
+        },
+        {
+            name: 'month',
+            classes: 'w-14',
+            maxlength: 2
+        },
+        {
+            name: 'year',
+            classes: 'w-20',
+            maxlength: 4
+        }
+    ];
+    DateInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-date-input',
+                    template: "\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <!-- With reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [class]=\"['flex', classes] | makeHtmlList\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n          <desy-input [labelData]=\"getItemLabel(item)\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [formControlName]=\"getItemName(item)\"\r\n                      [type]=\"'text'\"\r\n                      [inputmode]=\"'numeric'\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\r\n                      [role]=\"item.role\"\r\n                      [ariaLabel]=\"item.ariaLabel\"\r\n                      [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                      [ariaHidden]=\"item.ariaHidden\"\r\n                      [ariaDisabled]=\"item.ariaDisabled\"\r\n                      [ariaControls]=\"item.ariaControls\"\r\n                      [ariaCurrent]=\"item.ariaCurrent\"\r\n                      [ariaLive]=\"item.ariaLive\"\r\n                      [ariaExpanded]=\"item.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                      [tabindex]=\"item.tabindex\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [class]=\"['flex', classes] | makeHtmlList\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        \r\n        <ng-container *ngIf=\"item.divider\">\r\n          <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.divider\">\r\n          <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\r\n                        [role]=\"item.role\"\r\n                        [ariaLabel]=\"item.ariaLabel\"\r\n                        [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                        [ariaHidden]=\"item.ariaHidden\"\r\n                        [ariaDisabled]=\"item.ariaDisabled\"\r\n                        [ariaControls]=\"item.ariaControls\"\r\n                        [ariaCurrent]=\"item.ariaCurrent\"\r\n                        [ariaLive]=\"item.ariaLive\"\r\n                        [ariaExpanded]=\"item.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                        [tabindex]=\"item.tabindex\"></desy-input>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [class]=\"['flex', classes] | makeHtmlList\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      \r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\r\n                        [role]=\"item.role\"\r\n                        [ariaLabel]=\"item.ariaLabel\"\r\n                        [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                        [ariaHidden]=\"item.ariaHidden\"\r\n                        [ariaDisabled]=\"item.ariaDisabled\"\r\n                        [ariaControls]=\"item.ariaControls\"\r\n                        [ariaCurrent]=\"item.ariaCurrent\"\r\n                        [ariaLive]=\"item.ariaLive\"\r\n                        [ariaExpanded]=\"item.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                        [tabindex]=\"item.tabindex\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n</div>\r\n</ng-template>\r\n\r\n<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error' : (hasErrorsMessage() || formGroupClasses == 'c-form-group--error')}\">\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n      [classes]=\"fieldsetData.classes\"\r\n      [id]=\"fieldsetData.id\"\r\n      [legendData]=\"fieldsetData.legend\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"\r\n      [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n      [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n      [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n      [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n      [ariaControls]=\"fieldsetData.ariaControls\"\r\n      [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n      [ariaLive]=\"fieldsetData.ariaLive\"\r\n      [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n      [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n      [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && hasLegendComponent()\"\r\n      [legendRef]=\"legendTemplate\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && legendRef\"\r\n      [legendRef]=\"legendRef\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && legendData\"\r\n      [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n      [legendText]=\"legendText\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return DateInputComponent; }),
+                            multi: true
+                        }
+                    ]
+                },] }
+    ];
+    DateInputComponent.ctorParameters = function () { return [
+        { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] }
+    ]; };
+    DateInputComponent.propDecorators = {
+        ngModelGroup: [{ type: i0.Input }],
+        items: [{ type: i0.Input }],
+        itemsChange: [{ type: i0.Output }],
+        namePrefix: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        formGroupClasses: [{ type: i0.Input }],
+        errorMessage: [{ type: i0.Input }],
+        id: [{ type: i0.Input }],
+        fieldsetComponent: [{ type: i0.ContentChildren, args: [FieldsetComponent,] }],
+        legendComponent: [{ type: i0.ContentChildren, args: [LegendComponent,] }],
+        dateInputItemComponents: [{ type: i0.ContentChildren, args: [DateInputItemComponent,] }],
+        fieldsetData: [{ type: i0.Input }],
+        legendRef: [{ type: i0.Input }],
+        legendData: [{ type: i0.Input }],
+        legendText: [{ type: i0.Input }],
+        innerHtml: [{ type: i0.ViewChild, args: ['innerHtml', { static: true },] }]
+    };
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], DateInputComponent.prototype, "items", void 0);
+    __decorate([
+        DesyOnInputChange('onExternalChange')
+    ], DateInputComponent.prototype, "namePrefix", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
+    ], DateInputComponent.prototype, "fieldsetComponent", void 0);
+    __decorate([
+        DesyContentChild()
+    ], DateInputComponent.prototype, "legendComponent", void 0);
+
+    var SearchBarComponent = /** @class */ (function (_super) {
+        __extends(SearchBarComponent, _super);
+        function SearchBarComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.clickEvent = new i0.EventEmitter();
+            _this.value = '';
+            return _this;
+        }
+        SearchBarComponent.prototype.ngOnChanges = function (changes) {
+            this.checkRequiredParams();
+        };
+        SearchBarComponent.prototype.checkRequiredParams = function () {
+            if (!this.id) {
+                throw Error('id is required');
+            }
+            if (!this.hasLabel()) {
+                throw Error('label is required');
+            }
+        };
+        SearchBarComponent.prototype.ngAfterViewInit = function () {
+            if (this.button && this.button.length > 1) {
+                throw Error('only 1 button in content is allowed');
+            }
+        };
+        SearchBarComponent.prototype.onClick = function (event) {
+            if (!this.disabled) {
+                this.clickEvent.emit(event);
+            }
+        };
+        SearchBarComponent.prototype.hasButton = function () {
+            return this.button && this.button.length > 0;
+        };
+        return SearchBarComponent;
+    }(FormFieldComponent));
+    SearchBarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-search-bar',
+                    template: "<!-- searchbar -->\r\n<div class=\"relative\" [ngClass]=\"{'flex flex-wrap items-end': hasButton()}\">\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              classes=\"sr-only\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" classes=\"sr-only\" [for]=\"id\"></desy-label>\r\n  <input type=\"search\"\r\n         [class]=\"['c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n         [ngClass]=\"{'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(),'w-full': !hasButton()}\"\r\n         [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"id ? id : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"hasButton(); else defaultButton\">\r\n    <ng-content select=\"desy-button\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultButton>\r\n    <button type=\"submit\" [attr.disabled]=\"disabled ? 'disabled' : null\" [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n            (click)=\"onClick($event)\"\r\n            [class]=\"['absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus', buttonClasses] | makeHtmlList\">\r\n      <span class=\"sr-only\">Buscar</span>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"1.375em\" height=\"1.375em\" aria-hidden=\"true\"><path d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\" fill=\"currentColor\"/></svg>\r\n    </button>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n</div>\r\n<!-- /searchbar -->\r\n",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return SearchBarComponent; }),
+                            multi: true
+                        }
+                    ]
+                },] }
+    ];
+    SearchBarComponent.propDecorators = {
+        button: [{ type: i0.ContentChildren, args: [ButtonComponent,] }],
+        describedBy: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        buttonClasses: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        clickEvent: [{ type: i0.Output }]
+    };
+
+    var TreeSubComponent = /** @class */ (function (_super) {
+        __extends(TreeSubComponent, _super);
+        function TreeSubComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TreeSubComponent;
+    }(ContentBaseComponent));
+    TreeSubComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-tree-sub',
+                    template: "<ng-template #contentTemplate>\r\n  <ul [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\r\n      [attr.role]=\"role ? role : 'group'\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n      [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n      [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n      [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</ng-template>\r\n"
+                },] }
+    ];
+    TreeSubComponent.propDecorators = {
+        classes: [{ type: i0.Input }]
+    };
+
+    var ITreeItem = /** @class */ (function () {
+        function ITreeItem() {
+        }
+        return ITreeItem;
+    }());
+
+    var SearchUtils = /** @class */ (function () {
+        function SearchUtils() {
+        }
+        /**
+         * Comprueba si una cadena de texto (target) contiene cualquier palabra de otro texto (text)
+         * @param target - Texto en el que buscar
+         * @param text - Texto a buscar
+         * @param fullWord - Indica si las palabras del texto a buscar deben aparecer enteras
+         */
+        SearchUtils.containsAnyWordFrom = function (target, text, fullWord) {
+            var _this = this;
+            var words = [];
+            var includes = false;
+            var simplifiedTarget = this.getSimplifiedString(target);
+            if (text && text.split(' ').length > 1) {
+                words = text.split(' ');
+            }
+            words.push(text);
+            words.forEach(function (word) {
+                if (simplifiedTarget && word) {
+                    if ((fullWord && simplifiedTarget === _this.getSimplifiedString(word))
+                        || (!fullWord && simplifiedTarget.includes(_this.getSimplifiedString(word)))) {
+                        includes = true;
+                    }
+                }
+            });
+            return includes;
+        };
+        /**
+         * Convierte a mayúsculas, elimina espacios y reemplaza/elimina caracteres especiales para realizar comparaciones más tolerantes
+         * @param str - cadena de entrada
+         */
+        SearchUtils.getSimplifiedString = function (str) {
+            var res = str;
+            if (str) {
+                res = str.toLocaleUpperCase().trim();
+                res = res.replace('Á', 'A');
+                res = res.replace('É', 'E');
+                res = res.replace('Í', 'I');
+                res = res.replace('Ó', 'O');
+                res = res.replace('Ú', 'U');
+                res = res.replace('À', 'A');
+                res = res.replace('È', 'E');
+                res = res.replace('Ì', 'I');
+                res = res.replace('Ò', 'O');
+                res = res.replace('Ù', 'U');
+                res = res.replace('Ä', 'A');
+                res = res.replace('Ë', 'E');
+                res = res.replace('Ï', 'I');
+                res = res.replace('Ö', 'O');
+                res = res.replace('Ü', 'U');
+                res = res.replace(',', '');
+                res = res.replace('.', '');
+                res = res.replace('\'', '');
+                res = res.replace('"', '');
+            }
+            return res;
+        };
+        return SearchUtils;
+    }());
+
+    var TreeCheckboxComponent = /** @class */ (function (_super) {
+        __extends(TreeCheckboxComponent, _super);
+        function TreeCheckboxComponent(changeDetector) {
+            var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
+            _this.checkedChange = new i0.EventEmitter();
+            _this.indeterminateCheckedChange = new i0.EventEmitter();
+            _this.hasError = false;
+            _this._hasInit = false;
+            return _this;
+        }
+        TreeCheckboxComponent.prototype.ngOnInit = function () {
+            this._hasInit = true;
+            this.onDescribedByChange();
+        };
+        TreeCheckboxComponent.prototype.detectChanges = function () {
+            this.changeDetector.detectChanges();
+        };
+        TreeCheckboxComponent.prototype.hasChanged = function () {
+            if (this._hasInit) {
+                var input = this.inputElement.nativeElement;
+                // Se establece el cambio a visualizar en el input
+                if (this.isIndeterminate) {
+                    if (input.readOnly) {
+                        input.checked = false;
+                        input.readOnly = false;
+                    }
+                    else if (!input.checked) {
+                        input.readOnly = true;
+                        input.indeterminate = true;
+                    }
+                }
+                this.setIndeterminateChecked(input.indeterminate);
+                this.checkedChange.emit(input.checked);
+            }
+        };
+        TreeCheckboxComponent.prototype.onIdChange = function () {
+            this.overrideLabelParams();
+            this.overrideHintParams();
+        };
+        TreeCheckboxComponent.prototype.setIndeterminateStatus = function () {
+            var _a;
+            var input = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (input) {
+                if (this.indeterminateChecked) {
+                    input.readOnly = true;
+                    input.indeterminate = true;
+                }
+                else if (input.readOnly) {
+                    input.readOnly = false;
+                    input.indeterminate = false;
+                }
+            }
+        };
+        TreeCheckboxComponent.prototype.setIndeterminateChecked = function (indeterminateChecked) {
+            this.indeterminateChecked = indeterminateChecked;
+            this._lastIndeterminate = indeterminateChecked;
+            this.indeterminateCheckedChange.emit(indeterminateChecked);
+            this.changeDetector.detectChanges(); // Avisa al elemento input para que actualice su estado
+        };
+        TreeCheckboxComponent.prototype.focus = function () {
+            this.inputElement.nativeElement.focus();
+        };
+        TreeCheckboxComponent.prototype.matchesText = function (value) {
+            var checkboxText = this.contentWrapper.nativeElement.textContent;
+            return SearchUtils.containsAnyWordFrom(checkboxText, value);
+        };
+        TreeCheckboxComponent.prototype.preventDefault = function (event) {
+            event.preventDefault();
+        };
+        TreeCheckboxComponent.prototype.getHintId = function () {
+            return this.hintComponent ? this.hintComponent.id : '';
+        };
+        TreeCheckboxComponent.prototype.overrideLabelParams = function () {
+            if (this.labelComponent) {
+                this.labelComponent.for = this.id + '-input';
+                if (!this.labelComponent.classes) {
+                    this.labelComponent.classes = 'block relative -top-xs -left-8 pl-8 py-xs';
+                }
+                this.labelComponent.detectChanges();
+            }
+        };
+        TreeCheckboxComponent.prototype.overrideHintParams = function () {
+            if (this.hintComponent) {
+                if (!this.hintComponent.id) {
+                    this.hintComponent.id = this.id + '-item-hint';
+                }
+                this.hintComponent.detectChanges();
+            }
+            this.onDescribedByChange();
+        };
+        TreeCheckboxComponent.prototype.getItemDescribedBy = function () {
+            return (this.describedBy ? this.describedBy : '') + ' ' + this.getHintId();
+        };
+        TreeCheckboxComponent.prototype.onDescribedByChange = function () {
+            if (this.ariaDescribedBy) {
+                this.itemDescribedBy = this.ariaDescribedBy;
+            }
+            else {
+                this.itemDescribedBy = this.getItemDescribedBy();
+            }
+        };
+        return TreeCheckboxComponent;
+    }(AccessibilityComponent));
+    TreeCheckboxComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-tree-checkbox',
+                    template: "<div [class]=\"classes\" [ngClass]=\"{'border-t border-b border-neutral-base -mb-px': hasDividers}\">\r\n  <div class=\"relative flex items-start py-xs\">\r\n    <div class=\"flex items-center mx-sm\">\r\n      <input #input class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base\"\r\n             [id]=\"id + '-input'\"\r\n             [name]=\"name\"\r\n             [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\r\n             [value]=\"value\"\r\n             [checked]=\"checked\"\r\n             (change)=\"hasChanged()\"\r\n             [disabled]=\"disabled ? disabled : null\"\r\n             [attr.aria-invalid]=\"hasError ? 'true' : null\"\r\n\r\n             [attr.role]=\"role ? role : 'group'\"\r\n             [attr.aria-describedby]=\"itemDescribedBy\"\r\n             [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n             [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n             [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n             [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n             [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n             [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n             [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n             [attr.tabindex]=\"tabindex ? tabindex : null\"\r\n\r\n             (keydown.home)=\"preventDefault($event)\"\r\n             (keydown.end)=\"preventDefault($event)\"\r\n             (keydown.arrowup)=\"preventDefault($event)\"\r\n             (keydown.arrowdown)=\"preventDefault($event)\"\r\n             (keydown.arrowright)=\"preventDefault($event)\"\r\n             (keydown.arrowleft)=\"preventDefault($event)\">\r\n    </div>\r\n    <div #contentWrapper class=\"flex-1 pt-0.5 leading-5\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
+                },] }
+    ];
+    TreeCheckboxComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    TreeCheckboxComponent.propDecorators = {
+        inputElement: [{ type: i0.ViewChild, args: ['input', { static: true },] }],
+        contentWrapper: [{ type: i0.ViewChild, args: ['contentWrapper', { static: true },] }],
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        checked: [{ type: i0.Input }],
+        checkedChange: [{ type: i0.Output }],
+        isIndeterminate: [{ type: i0.Input }],
+        indeterminateChecked: [{ type: i0.Input }],
+        indeterminateCheckedChange: [{ type: i0.Output }],
+        disabled: [{ type: i0.Input }],
+        hasDividers: [{ type: i0.Input }],
+        describedBy: [{ type: i0.Input }],
+        hasError: [{ type: i0.Input }],
+        labelComponent: [{ type: i0.Input }],
+        hintComponent: [{ type: i0.Input }]
+    };
+    __decorate([
+        DesyOnInputChange('onIdChange')
+    ], TreeCheckboxComponent.prototype, "id", void 0);
+    __decorate([
+        DesyOnInputChange('setIndeterminateStatus')
+    ], TreeCheckboxComponent.prototype, "indeterminateChecked", void 0);
+    __decorate([
+        DesyOnInputChange('onDescribedByChange')
+    ], TreeCheckboxComponent.prototype, "describedBy", void 0);
+    __decorate([
+        DesyOnInputChange('overrideLabelParams')
+    ], TreeCheckboxComponent.prototype, "labelComponent", void 0);
+    __decorate([
+        DesyOnInputChange('overrideHintParams')
+    ], TreeCheckboxComponent.prototype, "hintComponent", void 0);
+
+    var TreeItemComponent = /** @class */ (function (_super) {
+        __extends(TreeItemComponent, _super);
+        function TreeItemComponent(changeDetector, element) {
+            var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
+            _this.element = element;
+            _this.checkedChange = new i0.EventEmitter();
+            _this.checkedChangeForTree = new i0.EventEmitter();
+            _this.expandedChange = new i0.EventEmitter();
+            _this.indeterminateCheckedChange = new i0.EventEmitter();
+            /*
+             * Identificador del wrapper del componente. Se utiliza para recorrer el árbol en sentido inverso y que cada item
+             * sepa cuál es su item/árbol padre.
+             * Esto es necesario ya que, a la hora de construir un árbol dinámico con templates,
+             * el decorador @ContentChildren no funciona correctamente y no los detecta.
+             * Dejo el enlace de un problema similar: https://github.com/angular/angular/issues/21751
+             */
+            _this.treeItemKey = TreeItemComponent.generateStaticItemKey();
+            _this.allParentsExpanded = true; // True si el elemento es visible según los elementos expandidos
+            _this.inheritedMatchesSearch = true; // True si el elemento es visible según los criterios de búsqueda
+            // Evento para emitir al componente arbol cuando se pretende abandonar el foco del item
+            _this.quitFocus = new i0.EventEmitter();
+            _this.isFocus = false;
+            _this.isHover = false;
+            _this._matchesValidText = false; // True si el contenido del item encaja con los criterios de búsqueda y se está filtrando
+            return _this;
+        }
+        TreeItemComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (this.sub && this.sub.itemList) {
+                this.sub.itemList.forEach(function (item) { return item.refreshAllParentsExpandedRecursive(_this.allParentsExpanded && _this.expanded); });
+            }
+            for (var propName in changes) {
+                if (changes.hasOwnProperty(propName)) {
+                    switch (propName) {
+                        case 'checked': {
+                            // Reasignamos el valor de checked cuando detectamos el cambio en la entrada
+                            setTimeout(function () {
+                                _this.setChecked(_this.checked, false, false);
+                                if (_this.inheritedExpandedFirstLevel && _this.checked && !_this.expanded) {
+                                    _this.expandSub(true);
+                                }
+                            });
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        /*
+         * Métodos expuestos que permiten configurar al ítem de forma externa
+         */
+        TreeItemComponent.prototype.focus = function () {
+            var _a;
+            (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.focus();
+            this.handleItemFocus(true);
+        };
+        TreeItemComponent.prototype.setCheckedAutomaticallyDependingOnChildren = function () {
+            if (this.sub) {
+                this.sub.itemList.forEach(function (item) { return item.setCheckedAutomaticallyDependingOnChildren(); });
+                if (this.areAllChildrenChecked()) {
+                    if (this.indeterminateChecked) {
+                        this.setIndeterminateChecked(false);
+                    }
+                    if (!this.checked) {
+                        this.setChecked(true, true);
+                    }
+                }
+                else if (this.hasChildrenCheckedOrIndeterminate()) {
+                    if (!this.indeterminateChecked) {
+                        this.setIndeterminateChecked(true);
+                    }
+                    if (this.checked) {
+                        this.setChecked(false, true);
+                    }
+                }
+                else {
+                    if (this.indeterminateChecked) {
+                        this.setIndeterminateChecked(false);
+                    }
+                    if (this.checked) {
+                        this.setChecked(false, true);
+                    }
+                }
+            }
+        };
+        TreeItemComponent.prototype.refreshAllParentsExpandedRecursive = function (value) {
+            var _this = this;
+            this.allParentsExpanded = value;
+            if (this.sub) {
+                this.sub.itemList.forEach(function (item) { return item.refreshAllParentsExpandedRecursive(value && _this.expanded); });
+            }
+        };
+        TreeItemComponent.prototype.detectChanges = function () {
+            this.changeDetector.detectChanges();
+        };
+        TreeItemComponent.prototype.expandSub = function (value) {
+            var _this = this;
+            this.expanded = value;
+            if (this.sub) {
+                this.sub.itemList.forEach(function (item) { return item.refreshAllParentsExpandedRecursive(_this.allParentsExpanded && value); });
+            }
+            this.expandedChange.emit(value);
+        };
+        /*
+         * Gestion de eventos
+         */
+        TreeItemComponent.prototype.handleCheckboxChange = function (checked) {
+            this.setChecked(checked, false);
+            if (this.inheritedExpandedFirstLevel && checked && !this.expanded) {
+                this.expandSub(true);
+            }
+        };
+        TreeItemComponent.prototype.handleIndeterminateCheckedChange = function (indeterminate) {
+            this.indeterminateCheckedChange.emit(indeterminate);
+        };
+        TreeItemComponent.prototype.handleItemFocus = function (value, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                this.isFocus = value;
+            }
+        };
+        TreeItemComponent.prototype.handleItemHover = function (value, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                this.isHover = value;
+            }
+        };
+        TreeItemComponent.prototype.handleArrowUp = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                event.preventDefault();
+                this.quitFocus.emit({
+                    nextElement: 'previous',
+                    currentItem: this
+                });
+            }
+        };
+        TreeItemComponent.prototype.handleHome = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                event.preventDefault();
+                this.quitFocus.emit({
+                    nextElement: 'first',
+                    currentItem: this
+                });
+            }
+        };
+        TreeItemComponent.prototype.handleEnd = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                event.preventDefault();
+                this.quitFocus.emit({
+                    nextElement: 'last',
+                    currentItem: this
+                });
+            }
+        };
+        TreeItemComponent.prototype.handleArrowDown = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                event.preventDefault();
+                this.quitFocus.emit({
+                    nextElement: 'next',
+                    currentItem: this
+                });
+            }
+        };
+        TreeItemComponent.prototype.handleArrowRight = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            var _a;
+            if (condition && this.sub && ((_a = this.sub.itemList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                event.preventDefault();
+                if (this.expanded) {
+                    this.quitFocus.emit({
+                        nextElement: 'firstChild',
+                        currentItem: this
+                    });
+                }
+                else {
+                    this.expandSub(true);
+                }
+            }
+        };
+        TreeItemComponent.prototype.handleArrowLeft = function (event, condition) {
+            if (condition === void 0) { condition = true; }
+            if (condition) {
+                event.preventDefault();
+                if (this.expanded) {
+                    this.expandSub(false);
+                }
+                else if (this.subLevel > 0) {
+                    this.quitFocus.emit({
+                        nextElement: 'parent',
+                        currentItem: this
+                    });
+                }
+            }
+        };
+        /*
+         * Setters and getters
+         */
+        TreeItemComponent.prototype.setChecked = function (checked, ignoreInTree, emitEvent) {
+            if (emitEvent === void 0) { emitEvent = true; }
+            if (!this.disabled) {
+                this.checked = checked;
+            }
+            if (!this.inheritedDecoupleChildFromParent && this.sub && this.sub.itemList && !this.indeterminateChecked) {
+                this.sub.itemList.forEach(function (item) {
+                    item.setIndeterminateChecked(false);
+                    item.setChecked(checked, true);
+                });
+            }
+            if (emitEvent) {
+                this.checkedChange.emit(checked);
+            }
+            if (!ignoreInTree) {
+                this.checkedChangeForTree.emit(checked);
+            }
+        };
+        TreeItemComponent.prototype.setIndeterminateChecked = function (indeterminate) {
+            if (!this.disabled) {
+                this.indeterminateChecked = indeterminate;
+                this.indeterminateCheckedChange.emit(indeterminate);
+            }
+        };
+        TreeItemComponent.prototype.setSubLevel = function (subLevel) {
+            this.subLevel = subLevel;
+            if (this.sub && this.sub.itemList) {
+                this.sub.itemList.forEach(function (item) { return item.setSubLevel(subLevel + 1); });
+            }
+        };
+        TreeItemComponent.prototype.setOrderRecursively = function (order) {
+            this.orderInTree = order;
+            var newOrder = order + 1;
+            if (this.sub && this.sub.itemList) {
+                this.sub.itemList.forEach(function (item) {
+                    newOrder = item.setOrderRecursively(newOrder);
+                });
+            }
+            return newOrder;
+        };
+        TreeItemComponent.prototype.setDefaultId = function (defaultId) {
+            this.defaultId = defaultId;
+            this.setDefaultIdRecursive();
+        };
+        TreeItemComponent.prototype.setDefaultIdRecursive = function () {
+            var _this = this;
+            if (this.sub && this.sub.itemList) {
+                this.sub.itemList.forEach(function (item, index) {
+                    item.setDefaultId("sub-" + _this.getId() + "-" + index);
+                });
+            }
+        };
+        TreeItemComponent.prototype.getId = function () {
+            return this.id ? this.id : this.defaultId;
+        };
+        TreeItemComponent.prototype.isHidden = function () {
+            return !this.inheritedMatchesSearch && (!this.sub || this.areAllChildrenHidden());
+        };
+        TreeItemComponent.prototype.areAllChildrenHidden = function () {
+            var children = this.sub.itemList;
+            return children.findIndex(function (child) { return !child.isHidden(); }) < 0;
+        };
+        TreeItemComponent.prototype.areAllChildrenChecked = function () {
+            var children = this.sub.itemList;
+            return children.findIndex(function (child) { return !child.checked; }) < 0;
+        };
+        TreeItemComponent.prototype.hasChildrenCheckedOrIndeterminate = function () {
+            var children = this.sub.itemList;
+            return children.findIndex(function (child) { return child.checked || child.indeterminateChecked; }) >= 0;
+        };
+        TreeItemComponent.prototype.matchesText = function (value) {
+            var _a;
+            var matches;
+            if (this.allParentsExpanded && !this.isHidden()) {
+                matches = (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.matchesText(value);
+            }
+            else {
+                var itemText = this.hiddenWrapper.nativeElement.textContent;
+                matches = SearchUtils.containsAnyWordFrom(itemText, value);
+            }
+            this._matchesValidText = value ? matches : false;
+            return matches;
+        };
+        TreeItemComponent.prototype.getKey = function () {
+            return this.treeItemKey;
+        };
+        TreeItemComponent.prototype.getParentKey = function () {
+            var parentKey;
+            var parentElement = this.element.nativeElement.parentElement;
+            while (parentElement && parentElement.tagName !== 'BODY' && parentElement.tagName !== 'DESY-TREE-ITEM' && parentElement.tagName !== 'DESY-TREE') {
+                parentElement = parentElement.parentElement;
+            }
+            if (parentElement.tagName === 'BODY') {
+                throw new Error('Parent for tree-item not found');
+            }
+            if (parentElement.tagName === 'DESY-TREE') {
+                parentKey = 'root';
+            }
+            if (parentElement.tagName === 'DESY-TREE-ITEM') {
+                parentKey = parentElement.getAttribute('desy-tree-item-key');
+            }
+            return parentKey;
+        };
+        TreeItemComponent.prototype.isActive = function () {
+            return this.active || this._matchesValidText;
+        };
+        /*
+         * Métodos privados
+         */
+        /**
+         * Genera una clave única para el componente
+         * @private
+         */
+        TreeItemComponent.generateStaticItemKey = function () {
+            var key = 'tree-item-key-' + TreeItemComponent._treeItemKeySuffix;
+            TreeItemComponent._treeItemKeySuffix++;
+            return key;
+        };
+        return TreeItemComponent;
+    }(AccessibilityComponent));
+    TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siempre claves distintas
+    TreeItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-tree-item',
+                    template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n    [id]=\"id\"\r\n    [class]=\"'c-tree__item focus:outline-none'\"\r\n    [ngClass]=\"{\r\n      'ml-4': subLevel === 0,\r\n      'ml-8': subLevel !== 0,\r\n      'c-tree__item--focus': isFocus && !sub,\r\n      'c-tree__item--hover': isHover && !sub\r\n    }\"\r\n    (focusin)=\"handleItemFocus(true, !sub)\"\r\n    (focusout)=\"handleItemFocus(false, !sub)\"\r\n    (mouseover)=\"handleItemHover(true, !sub)\"\r\n    (mouseout)=\"handleItemHover(false, !sub)\"\r\n    (keydown.home)=\"handleHome($event, !sub)\"\r\n    (keydown.end)=\"handleEnd($event, !sub)\"\r\n    (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n    (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n    (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n    (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n    [attr.aria-current]=\"isActive() && subLevel === 0 ? 'page' : null\"\r\n    [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n    [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n    [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\r\n       [attr.title]=\"title ? title : null\"\r\n       [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n       [attr.role]=\"role ? role : 'tree'\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (isActive() ? 'page' : null)\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n  </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n  <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n       [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n       (focusin)=\"handleItemFocus(true)\"\r\n       (focusout)=\"handleItemFocus(false)\"\r\n       (mouseover)=\"handleItemHover(true)\"\r\n       (mouseout)=\"handleItemHover(false)\"\r\n       (keydown.home)=\"handleHome($event)\"\r\n       (keydown.end)=\"handleEnd($event)\"\r\n       (keydown.arrowup)=\"handleArrowUp($event)\"\r\n       (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n       (keydown.arrowright)=\"handleArrowRight($event)\"\r\n       (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n    <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n        <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n        <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n      </span>\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n  <li class=\"hidden\">\r\n    <div #hiddenWrapper>\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n  <desy-tree-checkbox [name]=\"name ? name : parentName\"\r\n                      [id]=\"getId()\"\r\n                      [value]=\"value\"\r\n                      [classes]=\"classes\"\r\n                      [type]=\"type\"\r\n                      [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n                      [hasError]=\"inheritedHasError\"\r\n                      [disabled]=\"disabled\"\r\n                      [hasDividers]=\"hasDividers\"\r\n                      [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n                      [isIndeterminate]=\"isIndeterminate\"\r\n                      [(indeterminateChecked)]=\"indeterminateChecked\"\r\n                      (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n                      [labelComponent]=\"label\"\r\n                      [hintComponent]=\"hint\"\r\n\r\n                      [role]=\"role\"\r\n                      [ariaLabel]=\"ariaLabel\"\r\n                      [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                      [ariaHidden]=\"ariaHidden\"\r\n                      [ariaDisabled]=\"ariaDisabled\"\r\n                      [ariaControls]=\"ariaControls\"\r\n                      [ariaCurrent]=\"ariaCurrent\"\r\n                      [ariaLive]=\"ariaLive\"\r\n                      [ariaExpanded]=\"ariaExpanded\"\r\n                      [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"ariaHasPopup\"\r\n                      [ariaModal]=\"ariaModal\"\r\n                      [tabindex]=\"tabindex\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n    <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n  </div>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                    providers: [
+                        {
+                            provide: ITreeItem,
+                            useExisting: i0.forwardRef(function () { return TreeItemComponent; })
+                        }
+                    ]
+                },] }
+    ];
+    TreeItemComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef }
+    ]; };
+    TreeItemComponent.propDecorators = {
+        hiddenWrapper: [{ type: i0.ViewChild, args: ['hiddenWrapper',] }],
+        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        active: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        hasDividers: [{ type: i0.Input }],
+        isIndeterminate: [{ type: i0.Input }],
+        checked: [{ type: i0.Input }],
+        checkedChange: [{ type: i0.Output }],
+        expanded: [{ type: i0.Input }],
+        expandedChange: [{ type: i0.Output }],
+        indeterminateChecked: [{ type: i0.Input }],
+        indeterminateCheckedChange: [{ type: i0.Output }],
+        sub: [{ type: i0.ContentChildren, args: [TreeSubComponent,] }],
+        hint: [{ type: i0.ContentChildren, args: [HintComponent,] }],
+        label: [{ type: i0.ContentChildren, args: [LabelComponent,] }],
+        checkbox: [{ type: i0.ViewChild, args: [TreeCheckboxComponent,] }],
+        treeItemKey: [{ type: i0.HostBinding, args: ['attr.desy-tree-item-key',] }]
+    };
+    __decorate([
+        DesyOnInputChange('setDefaultIdRecursive')
+    ], TreeItemComponent.prototype, "id", void 0);
+    __decorate([
+        DesyContentChild({ onSetCallbackName: 'overrideSubValues' })
+    ], TreeItemComponent.prototype, "sub", void 0);
+    __decorate([
+        DesyContentChild()
+    ], TreeItemComponent.prototype, "hint", void 0);
+    __decorate([
+        DesyContentChild()
+    ], TreeItemComponent.prototype, "label", void 0);
+
+    var TreeComponent = /** @class */ (function (_super) {
+        __extends(TreeComponent, _super);
+        function TreeComponent(changeDetector) {
+            var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
+            _this.expandedFirstLevel = true;
+            _this.decoupleChildFromParent = false;
+            _this.disableDefaultSearch = false;
+            _this.searchMatchValuesChange = new i0.EventEmitter();
+            _this.rootItems = [];
+            _this._itemListCheckedSubscriptions = [];
+            _this._itemListQuitFocusSubscriptions = [];
+            _this._alreadyConfiguringItems = false;
+            return _this;
+        }
+        TreeComponent.prototype.ngOnDestroy = function () {
+            var _a, _b;
+            this.clearSubscriptions(this._itemListCheckedSubscriptions);
+            this.clearSubscriptions(this._itemListQuitFocusSubscriptions);
+            (_a = this._itemListSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this._allItemListSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        };
+        TreeComponent.prototype.ngOnChanges = function (changes) {
+            this.configureAllItems();
+        };
+        /*
+         * Eventos
+         */
+        /**
+         * Actualiza el valor del componente al checkquearse un ítem
+         * @param originItem ítem modificado
+         */
+        TreeComponent.prototype.updateValueFromItems = function (originItem) {
+            var _this = this;
+            // Si es radio, se desactivan el resto de items cuando se activa otro item
+            if (this.type !== 'checkbox') {
+                var items = this.getAllItemsInOrder();
+                items.forEach(function (item) {
+                    if (item !== originItem && item.checked) {
+                        item.setChecked(false, true);
+                    }
+                });
+            }
+            else if (!this.decoupleChildFromParent) {
+                this.rootItems.forEach(function (item) { return item.setCheckedAutomaticallyDependingOnChildren(); });
+            }
+            // Si es checkbox se modifica el valor y se emite
+            if (this.type === 'checkbox') {
+                this.value = [];
+                var items = this.getAllItemsInOrder();
+                items.forEach(function (item) {
+                    if (item.checked) {
+                        _this.value.push(item.value);
+                    }
+                });
+                this.onChange(this.value);
+            }
+        };
+        /**
+         * Gestiona cuando el foco abandona un ítem desde un evento de teclado controlado
+         * @param options
+         */
+        TreeComponent.prototype.handleItemQuitFocus = function (options) {
+            if (options && options.nextElement) {
+                var items = this.getAllItemsInOrder();
+                var focusableItems = items.filter(function (item) { return !item.isHidden() && !item.disabled && item.allParentsExpanded; });
+                switch (options.nextElement) {
+                    case "first":
+                        focusableItems[0].focus();
+                        break;
+                    case "last":
+                        focusableItems[focusableItems.length - 1].focus();
+                        break;
+                    case "parent":
+                        var currentSubLevel_1 = options.currentItem.subLevel;
+                        if (currentSubLevel_1 > 0) {
+                            var currentItemIndex = focusableItems.findIndex(function (item) { return item === options.currentItem; });
+                            var parent = focusableItems.slice(0, currentItemIndex).reverse().find(function (item) { return item.subLevel < currentSubLevel_1; });
+                            if (parent) {
+                                parent.focus();
+                            }
+                        }
+                        break;
+                    case "firstChild":
+                    case "next":
+                        if (options.currentItem) {
+                            var currentItemIndex = focusableItems.findIndex(function (item) { return item === options.currentItem; });
+                            if (currentItemIndex < focusableItems.length - 1) {
+                                focusableItems[currentItemIndex + 1].focus();
+                            }
+                        }
+                        break;
+                    case "previous":
+                        if (options.currentItem) {
+                            var currentItemIndex = focusableItems.findIndex(function (item) { return item === options.currentItem; });
+                            if (currentItemIndex > 0) {
+                                focusableItems[currentItemIndex - 1].focus();
+                            }
+                        }
+                        break;
+                }
+            }
+        };
+        /**
+         * Realiza la búsqueda interna de los items en el componente
+         * @param value texto de búsqueda
+         */
+        TreeComponent.prototype.onSearch = function (value) {
+            if (!this.disableDefaultSearch) {
+                if (value && value.length > 0) {
+                    this.searchMatchValues = this.allItems.filter(function (item) { return item.matchesText(value); }).map(function (item) { return item.value; });
+                }
+                else {
+                    this.searchMatchValues = null;
+                }
+                this.searchMatchValuesChange.emit(this.searchMatchValues);
+            }
+        };
+        /*
+         * Eventos al cambiar propiedades
+         */
+        /**
+         * Configura los items del árbol
+         */
+        TreeComponent.prototype.configureAllItems = function () {
+            var _this = this;
+            if (!this._alreadyConfiguringItems) {
+                this._alreadyConfiguringItems = true;
+                // Lo realizamos desde un setTimeout para que todos los inputs, values y demás vivan en paz y armonía
+                setTimeout(function () {
+                    var _a;
+                    if (((_a = _this.allItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        _this.clearSubscriptions(_this._itemListCheckedSubscriptions);
+                        _this.clearSubscriptions(_this._itemListQuitFocusSubscriptions);
+                        _this.allItems.forEach(function (item) {
+                            item.parentName = _this.name;
+                            item.type = _this.type;
+                            item.inheritedDescribedBy = _this.getDescribedByForItems();
+                            item.inheritedExpandedFirstLevel = _this.expandedFirstLevel;
+                            item.inheritedDecoupleChildFromParent = _this.decoupleChildFromParent;
+                            if (_this.value && _this.value.length > 0) {
+                                item.setChecked(!!_this.value.find(function (v) { return v === item.value; }), true);
+                            }
+                            item.detectChanges();
+                            var checkedSubscription = item.checkedChangeForTree.subscribe(function () { return _this.updateValueFromItems(item); });
+                            _this._itemListCheckedSubscriptions.push(checkedSubscription);
+                            var quitFocusSubscription = item.quitFocus.subscribe(function (options) { return _this.handleItemQuitFocus(options); });
+                            _this._itemListQuitFocusSubscriptions.push(quitFocusSubscription);
+                        });
+                        _this.setErrorInItems(_this.hasErrorMessageComponent());
+                        _this.buildTree();
+                        if (!_this.value) {
+                            _this.updateValueFromItems();
+                        }
+                    }
+                    if (_this.allItems && !_this._allItemListSubscription) {
+                        _this._allItemListSubscription = _this.allItems.changes.subscribe(function () { return _this.configureAllItems(); });
+                    }
+                    _this.changeDetector.detectChanges();
+                    _this._alreadyConfiguringItems = false;
+                });
+            }
+        };
+        /**
+         * Modifica los items visibles según el filtro de búsqueda
+         */
+        TreeComponent.prototype.onSearchMatchValuesChange = function () {
+            var _this = this;
+            if (this.allItems) {
+                this.allItems.forEach(function (item) {
+                    item.inheritedMatchesSearch = true;
+                });
+                if (this.searchMatchValues !== null && this.searchMatchValues !== undefined) {
+                    this.allItems.forEach(function (item) {
+                        if (_this.searchMatchValues.findIndex(function (value) { return item.value === value; }) < 0) {
+                            item.inheritedMatchesSearch = false;
+                        }
+                    });
+                }
+            }
+        };
+        /*
+         * Getters and setters
+         */
+        TreeComponent.prototype.getIdPrefix = function () {
+            return this.idPrefix ? this.idPrefix : this.name;
+        };
+        TreeComponent.prototype.getDescribedBy = function () {
+            var describedBy = '';
+            if (this.describedBy) {
+                describedBy = this.describedBy;
+            }
+            if (this.hasHintComponent() && this.hintComponent.id) {
+                describedBy = describedBy + ' ' + this.hintComponent.id;
+            }
+            if (this.hasErrorMessageComponent() && this.errorMessageComponent.id) {
+                describedBy = describedBy + ' ' + this.errorMessageComponent.id;
+            }
+            return describedBy;
+        };
+        /**
+         * Devuelve el valor de describedBy que se transmitirá a los items
+         */
+        TreeComponent.prototype.getDescribedByForItems = function () {
+            var describedBy;
+            if (this.hasFieldsetComponent()) {
+                describedBy = this.fieldsetComponent.describedBy;
+            }
+            else {
+                describedBy = this.getDescribedBy();
+            }
+            return describedBy;
+        };
+        TreeComponent.prototype.hasFieldsetComponent = function () {
+            return !!this.fieldsetComponent;
+        };
+        /**
+         * Overrides super.getHintId();
+         */
+        TreeComponent.prototype.getHintId = function () {
+            var _a;
+            return this.idPrefix ? this.idPrefix + '-hint' : (_a = this.hintComponent) === null || _a === void 0 ? void 0 : _a.id;
+        };
+        /**
+         * Overrides super.getHintId();
+         */
+        TreeComponent.prototype.getErrorId = function () {
+            var _a;
+            return this.idPrefix ? this.idPrefix + '-error' : (_a = this.errorMessageComponent) === null || _a === void 0 ? void 0 : _a.id;
+        };
+        /*
+         * Funciones para reemplazar el contenido del fieldset, label, hint o errormessage
+         */
+        TreeComponent.prototype.overrideFieldsetParams = function (fieldset) {
+            fieldset.caller = this.innerHtml;
+            fieldset.errorId = this.getErrorId();
+            fieldset.describedBy = this.getDescribedBy();
+            fieldset.detectChanges();
+        };
+        TreeComponent.prototype.overrideSearchBarParams = function (searchbar) {
+            var _this = this;
+            var defaultOnChange = searchbar.onChange;
+            var newOnChange = function (value) {
+                _this.onSearch(value);
+                defaultOnChange(value);
+            };
+            searchbar.registerOnChange(newOnChange);
+        };
+        /**
+         * Se llama desde FormField
+         */
+        TreeComponent.prototype.overrideHintParams = function (hint) {
+            hint.id = this.getHintId();
+            hint.detectChanges();
+        };
+        /**
+         * Se llama desde FormField
+         */
+        TreeComponent.prototype.overrideErrorMessageParams = function (errorMessage) {
+            errorMessage.id = this.getErrorId();
+            this.setErrorInItems(this.hasErrorMessageComponent());
+            errorMessage.detectChanges();
+        };
+        /**
+         * Se llama desde FormField
+         */
+        TreeComponent.prototype.onDeleteErrorMessage = function (errorMessage) {
+            this.setErrorInItems(this.hasErrorMessageComponent());
+        };
+        /*
+         * Métodos privados
+         */
+        /**
+         * Configura la estructura del árbol
+         * @private
+         */
+        TreeComponent.prototype.buildTree = function () {
+            var _this = this;
+            // Se crea un mapa para tener accesibles los items por key y se borran los listados existentes
+            var itemMap = {};
+            this.rootItems = [];
+            this.allItems.forEach(function (item) {
+                var key = item.getKey();
+                itemMap[key] = item;
+                if (item.sub) {
+                    item.sub.itemList = [];
+                }
+            });
+            // Se añaden los items a los listados correspondientes
+            this.allItems.forEach(function (item) {
+                var parentKey = item.getParentKey();
+                if (parentKey === 'root') {
+                    _this.rootItems.push(item);
+                }
+                else if (parentKey) {
+                    var sub = itemMap[parentKey].sub;
+                    if (sub) {
+                        sub.itemList.push(item);
+                    }
+                }
+            });
+            // Se configuran los items desde root
+            var order = 0;
+            this.rootItems.forEach(function (item, index) {
+                item.setSubLevel(0);
+                item.setDefaultId(_this.idPrefix + "-" + index);
+                item.refreshAllParentsExpandedRecursive(true);
+                item.setCheckedAutomaticallyDependingOnChildren();
+                order = item.setOrderRecursively(order);
+            });
         };
-        DateInputComponent.prototype.getItemDividerTemplate = function (item) {
-            return item.divider instanceof DateInputDividerComponent ? item.divider.dividerContent : null;
+        /**
+         * Si tiene un mensaje de error, se indica a los items
+         * @param hasError
+         * @private
+         */
+        TreeComponent.prototype.setErrorInItems = function (hasError) {
+            var _a;
+            if (((_a = this.allItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.allItems.forEach(function (item) {
+                    item.inheritedHasError = hasError;
+                    item.detectChanges();
+                });
+            }
         };
-        DateInputComponent.prototype.getItemDividerHtml = function (item) {
-            return item.divider.html ? item.divider.html : "<p>" + StringUtils.escapeHtml(item.divider.text) + "</p>";
+        /**
+         * Limpia un listado de subscripciones
+         * @param subscriptionList
+         * @private
+         */
+        TreeComponent.prototype.clearSubscriptions = function (subscriptionList) {
+            if (subscriptionList.length > 0) {
+                subscriptionList.forEach(function (s) { return s.unsubscribe(); });
+                subscriptionList.splice(0, subscriptionList.length);
+            }
         };
-        return DateInputComponent;
+        /**
+         * Devuelve los items del árbol ordenados
+         * @private
+         */
+        TreeComponent.prototype.getAllItemsInOrder = function () {
+            var list = [];
+            if (this.allItems) {
+                list = this.allItems.toArray().sort(function (a, b) { return a.orderInTree > b.orderInTree ? 1 : -1; });
+            }
+            return list;
+        };
+        return TreeComponent;
     }(FormFieldComponent));
-    DateInputComponent.defaultItems = [
-        {
-            name: 'day',
-            classes: 'w-14',
-            maxlength: 2
-        },
-        {
-            name: 'month',
-            classes: 'w-14',
-            maxlength: 2
-        },
-        {
-            name: 'year',
-            classes: 'w-20',
-            maxlength: 4
-        }
-    ];
-    DateInputComponent.decorators = [
+    TreeComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'desy-date-input',
-                    template: "\r\n<ng-template #innerHtml>\r\n  <ng-container *ngIf=\"hasHintComponent()\">\r\n    <ng-content select=\"desy-hint\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasHintComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"hintRef\"></ng-container>\r\n    <desy-hint *ngIf=\"!hintRef && hintData\"\r\n               [id]=\"getHintId()\"\r\n               [text]=\"hintData.text\"\r\n               [html]=\"hintData.html\"\r\n               [classes]=\"hintData.classes\"\r\n               [role]=\"hintData.role\"\r\n               [ariaLabel]=\"hintData.ariaLabel\"\r\n               [ariaDescribedBy]=\"hintData.ariaDescribedBy\"\r\n               [ariaLabelledBy]=\"hintData.ariaLabelledBy\"\r\n               [ariaHidden]=\"hintData.ariaHidden\"\r\n               [ariaDisabled]=\"hintData.ariaDisabled\"\r\n               [ariaControls]=\"hintData.ariaControls\"\r\n               [ariaCurrent]=\"hintData.ariaCurrent\"\r\n               [ariaLive]=\"hintData.ariaLive\"\r\n               [ariaExpanded]=\"hintData.ariaExpanded\"\r\n               [ariaErrorMessage]=\"hintData.ariaErrorMessage\"\r\n               [ariaHasPopup]=\"hintData.ariaHasPopup\"\r\n               [tabindex]=\"hintData.tabindex\"></desy-hint>\r\n    <desy-hint *ngIf=\"!hintRef && !hintData && hintText\" [text]=\"hintText\" [id]=\"getHintId()\"></desy-hint>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"hasErrorMessageComponent()\">\r\n    <ng-content select=\"desy-error-message\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasErrorMessageComponent()\">\r\n    <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                        [id]=\"getErrorId()\"\r\n                        [text]=\"errorMessageData.text\"\r\n                        [html]=\"errorMessageData.html\"\r\n                        [classes]=\"errorMessageData.classes\"\r\n                        [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                        [role]=\"errorMessageData.role\"\r\n                        [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                        [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                        [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                        [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                        [ariaControls]=\"errorMessageData.ariaControls\"\r\n                        [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                        [ariaLive]=\"errorMessageData.ariaLive\"\r\n                        [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                        [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n    <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                        [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n  </ng-container>\r\n\r\n  <!-- With reactive forms -->\r\n  <div *ngIf=\"controlContainer && !ngModelGroup\"\r\n       [formGroup]=\"controlContainer.control\"\r\n       [class]=\"['flex', classes] | makeHtmlList\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n          <desy-input [labelData]=\"getItemLabel(item)\"\r\n                      [labelRef]=\"getItemLabelRef(item)\"\r\n                      [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                      [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                      [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                      [name]=\"getItemName(item)\"\r\n                      [formControlName]=\"getItemName(item)\"\r\n                      [type]=\"'text'\"\r\n                      [inputmode]=\"'numeric'\"\r\n                      [autocomplete]=\"item.autocomplete\"\r\n                      [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n\r\n                      [maxlength]=\"item.maxlength\"\r\n                      [role]=\"item.role\"\r\n                      [ariaLabel]=\"item.ariaLabel\"\r\n                      [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                      [ariaHidden]=\"item.ariaHidden\"\r\n                      [ariaDisabled]=\"item.ariaDisabled\"\r\n                      [ariaControls]=\"item.ariaControls\"\r\n                      [ariaCurrent]=\"item.ariaCurrent\"\r\n                      [ariaLive]=\"item.ariaLive\"\r\n                      [ariaExpanded]=\"item.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                      [tabindex]=\"item.tabindex\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- Template-driven forms -->\r\n  <desy-template-driven-wrapper *ngIf=\"controlContainer && ngModelGroup\">\r\n    <div [ngModelGroup]=\"ngModelGroup\"\r\n         [class]=\"['flex', classes] | makeHtmlList\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n        \r\n        <ng-container *ngIf=\"item.divider\">\r\n          <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n            <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.divider\">\r\n          <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\r\n                        [role]=\"item.role\"\r\n                        [ariaLabel]=\"item.ariaLabel\"\r\n                        [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                        [ariaHidden]=\"item.ariaHidden\"\r\n                        [ariaDisabled]=\"item.ariaDisabled\"\r\n                        [ariaControls]=\"item.ariaControls\"\r\n                        [ariaCurrent]=\"item.ariaCurrent\"\r\n                        [ariaLive]=\"item.ariaLive\"\r\n                        [ariaExpanded]=\"item.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                        [tabindex]=\"item.tabindex\"></desy-input>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </desy-template-driven-wrapper>\r\n\r\n  <!-- With ngModel-->\r\n  <div *ngIf=\"!controlContainer\"\r\n       [class]=\"['flex', classes] | makeHtmlList\"\r\n       [attr.id]=\"id ? id : null\"\r\n       [attr.role]=\"role ? role : null\"\r\n       [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as i\">\r\n      \r\n      <ng-container *ngIf=\"item.divider\">\r\n        <div role=\"separator\" [ngClass]=\"item.divider.classes\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: getItemDividerTemplate(item), html: getItemDividerHtml(item) }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!item.divider\">\r\n        <div class=\"mr-base\">\r\n            <desy-input [labelData]=\"getItemLabel(item)\"\r\n                        [labelRef]=\"getItemLabelRef(item)\"\r\n                        [id]=\"item.id ? item.id : id + '-' + item.name\"\r\n                        [classes]=\"['mb-0', item.classes] | makeHtmlList\"\r\n                        [errorId]=\"item.hasErrors ? getErrorId() : null\"\r\n                        [name]=\"getItemName(item)\"\r\n                        [ngModel]=\"item.value\" (ngModelChange)=\"onInternalChange(item, +$event)\"\r\n                        [type]=\"'text'\"\r\n                        [inputmode]=\"'numeric'\"\r\n                        [autocomplete]=\"item.autocomplete\"\r\n                        [pattern]=\"item.pattern ? item.pattern : '[0-9]*'\"\r\n                        [disabled]=\"disabled ? true : null\"\r\n\r\n                        [maxlength]=\"item.maxlength\"\r\n                        [role]=\"item.role\"\r\n                        [ariaLabel]=\"item.ariaLabel\"\r\n                        [ariaDescribedBy]=\"item.ariaDescribedBy\"\r\n                        [ariaLabelledBy]=\"item.ariaLabelledBy\"\r\n                        [ariaHidden]=\"item.ariaHidden\"\r\n                        [ariaDisabled]=\"item.ariaDisabled\"\r\n                        [ariaControls]=\"item.ariaControls\"\r\n                        [ariaCurrent]=\"item.ariaCurrent\"\r\n                        [ariaLive]=\"item.ariaLive\"\r\n                        [ariaExpanded]=\"item.ariaExpanded\"\r\n                        [ariaErrorMessage]=\"item.ariaErrorMessage\"\r\n                        [ariaHasPopup]=\"item.ariaHasPopup\"\r\n                        [tabindex]=\"item.tabindex\"></desy-input>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n</div>\r\n</ng-template>\r\n\r\n<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error' : (hasErrorsMessage() || formGroupClasses == 'c-form-group--error')}\">\r\n\r\n  <ng-container *ngIf=\"hasFieldsetComponent()\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasFieldsetComponent()\">\r\n    <desy-fieldset *ngIf=\"fieldsetData\"\r\n      [classes]=\"fieldsetData.classes\"\r\n      [id]=\"fieldsetData.id\"\r\n      [legendData]=\"fieldsetData.legend\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[fieldsetData.describedBy, getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"\r\n      [ariaLabel]=\"fieldsetData.ariaLabel\"\r\n      [ariaLabelledBy]=\"fieldsetData.ariaLabelledBy\"\r\n      [ariaHidden]=\"fieldsetData.ariaHidden\"\r\n      [ariaDisabled]=\"fieldsetData.ariaDisabled\"\r\n      [ariaControls]=\"fieldsetData.ariaControls\"\r\n      [ariaCurrent]=\"fieldsetData.ariaCurrent\"\r\n      [ariaLive]=\"fieldsetData.ariaLive\"\r\n      [ariaExpanded]=\"fieldsetData.ariaExpanded\"\r\n      [ariaHasPopup]=\"fieldsetData.ariaHasPopup\"\r\n      [tabindex]=\"fieldsetData.tabindex\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && hasLegendComponent()\"\r\n      [legendRef]=\"legendTemplate\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\">\r\n      <ng-template #legendTemplate>\r\n        <ng-content select=\"desy-legend\"></ng-content>\r\n      </ng-template>\r\n    </desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && legendRef\"\r\n      [legendRef]=\"legendRef\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && legendData\"\r\n      [legendData]=\"{text: legendData.text, html: legendData.html,  classes: legendData.classes, isPageHeading: legendData.isPageHeading}\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n    <desy-fieldset *ngIf=\"!fieldsetData && !hasLegendComponent() && !legendRef && !legendData && legendText\"\r\n      [legendText]=\"legendText\"\r\n      [caller]=\"innerHtml\"\r\n      [errorId]=\"getErrorId()\"\r\n      [describedBy]=\"[ getHintId(), getErrorId()] | makeHtmlList:null\"\r\n      role=\"group\"></desy-fieldset>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!hasFieldset()\">\r\n    <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n",
+                    selector: 'desy-tree',
+                    template: "\r\n<ng-template #innerHtml>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n  <ng-content select=\"desy-error-message\"></ng-content>\r\n  <ng-content select=\"desy-search-bar\"></ng-content>\r\n  <ul [class]=\"['c-tree', classes] | makeHtmlList\"\r\n      [attr.role]=\"role ? role : 'tree'\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n      [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n      [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n      [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</ng-template>\r\n\r\n<!-- tree -->\r\n<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses === 'c-form-group--error') }\">\r\n  <ng-container *ngIf=\"hasFieldsetComponent(); else innerHtml\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n</div>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return DateInputComponent; }),
+                            useExisting: i0.forwardRef(function () { return TreeComponent; }),
                             multi: true
                         }
                     ]
                 },] }
     ];
-    DateInputComponent.ctorParameters = function () { return [
-        { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] }
+    TreeComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
     ]; };
-    DateInputComponent.propDecorators = {
-        ngModelGroup: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        itemsChange: [{ type: i0.Output }],
-        namePrefix: [{ type: i0.Input }],
+    TreeComponent.propDecorators = {
+        idPrefix: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
         formGroupClasses: [{ type: i0.Input }],
-        errorMessage: [{ type: i0.Input }],
-        id: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        describedBy: [{ type: i0.Input }],
+        expandedFirstLevel: [{ type: i0.Input }],
+        decoupleChildFromParent: [{ type: i0.Input }],
+        disableDefaultSearch: [{ type: i0.Input }],
+        searchMatchValues: [{ type: i0.Input }],
+        searchMatchValuesChange: [{ type: i0.Output }],
+        allItems: [{ type: i0.ContentChildren, args: [TreeItemComponent, { descendants: true },] }],
         fieldsetComponent: [{ type: i0.ContentChildren, args: [FieldsetComponent,] }],
-        legendComponent: [{ type: i0.ContentChildren, args: [LegendComponent,] }],
-        dateInputItemComponents: [{ type: i0.ContentChildren, args: [DateInputItemComponent,] }],
-        fieldsetData: [{ type: i0.Input }],
-        legendRef: [{ type: i0.Input }],
-        legendData: [{ type: i0.Input }],
-        legendText: [{ type: i0.Input }],
+        searchBarComponent: [{ type: i0.ContentChildren, args: [SearchBarComponent,] }],
         innerHtml: [{ type: i0.ViewChild, args: ['innerHtml', { static: true },] }]
     };
     __decorate([
-        DesyOnInputChange('onExternalChange')
-    ], DateInputComponent.prototype, "items", void 0);
+        DesyOnInputChange('onSearchMatchValuesChange')
+    ], TreeComponent.prototype, "searchMatchValues", void 0);
     __decorate([
-        DesyOnInputChange('onExternalChange')
-    ], DateInputComponent.prototype, "namePrefix", void 0);
+        DesyOnInputChange('configureAllItems')
+    ], TreeComponent.prototype, "allItems", void 0);
     __decorate([
         DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
-    ], DateInputComponent.prototype, "fieldsetComponent", void 0);
+    ], TreeComponent.prototype, "fieldsetComponent", void 0);
     __decorate([
-        DesyContentChild()
-    ], DateInputComponent.prototype, "legendComponent", void 0);
-
-    var SearchBarComponent = /** @class */ (function (_super) {
-        __extends(SearchBarComponent, _super);
-        function SearchBarComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.clickEvent = new i0.EventEmitter();
-            _this.value = '';
-            return _this;
-        }
-        SearchBarComponent.prototype.ngOnChanges = function (changes) {
-            this.checkRequiredParams();
-        };
-        SearchBarComponent.prototype.checkRequiredParams = function () {
-            if (!this.id) {
-                throw Error('id is required');
-            }
-            if (!this.hasLabel()) {
-                throw Error('label is required');
-            }
-        };
-        SearchBarComponent.prototype.ngAfterViewInit = function () {
-            if (this.button && this.button.length > 1) {
-                throw Error('only 1 button in content is allowed');
-            }
-        };
-        SearchBarComponent.prototype.onClick = function (event) {
-            if (!this.disabled) {
-                this.clickEvent.emit(event);
-            }
-        };
-        SearchBarComponent.prototype.hasButton = function () {
-            return this.button && this.button.length > 0;
-        };
-        return SearchBarComponent;
-    }(FormFieldComponent));
-    SearchBarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'desy-search-bar',
-                    template: "<!-- searchbar -->\r\n<div class=\"relative\" [ngClass]=\"{'flex flex-wrap items-end': hasButton()}\">\r\n  <ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\r\n  <desy-label *ngIf=\"!labelRef && labelData\"\r\n              [text]=\"labelData.text\"\r\n              [html]=\"labelData.html\"\r\n              classes=\"sr-only\"\r\n              [isPageHeading]=\"labelData.isPageHeading\"\r\n              [for]=\"id\"\r\n              [role]=\"labelData.role\"\r\n              [ariaLabel]=\"labelData.ariaLabel\"\r\n              [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\r\n              [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\r\n              [ariaHidden]=\"labelData.ariaHidden\"\r\n              [ariaDisabled]=\"labelData.ariaDisabled\"\r\n              [ariaControls]=\"labelData.ariaControls\"\r\n              [ariaCurrent]=\"labelData.ariaCurrent\"\r\n              [ariaLive]=\"labelData.ariaLive\"\r\n              [ariaExpanded]=\"labelData.ariaExpanded\"\r\n              [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\r\n              [ariaHasPopup]=\"labelData.ariaHasPopup\"\r\n              [tabindex]=\"labelData.tabindex\"></desy-label>\r\n  <desy-label *ngIf=\"!labelRef && !labelData && labelText\" [text]=\"labelText\" classes=\"sr-only\" [for]=\"id\"></desy-label>\r\n  <input type=\"search\"\r\n         [class]=\"['c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base', classes] | makeHtmlList\"\r\n         [ngClass]=\"{'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(),'w-full': !hasButton()}\"\r\n         [value]=\"value\" (input)=\"onInput($event.target.value)\"\r\n         [attr.id]=\"id ? id : null\"\r\n         [attr.name]=\"id ? id : null\"\r\n         [attr.aria-describedby]=\"[describedBy, getErrorId()] | makeHtmlList:null\"\r\n         [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\r\n         [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\r\n         [attr.disabled]=\"disabled ? true : null\"\r\n         [attr.placeholder]=\"placeholder ? placeholder : null\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"hasButton(); else defaultButton\">\r\n    <ng-content select=\"desy-button\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultButton>\r\n    <button type=\"submit\" [attr.disabled]=\"disabled ? 'disabled' : null\" [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n            (click)=\"onClick($event)\"\r\n            [class]=\"['absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus', buttonClasses] | makeHtmlList\">\r\n      <span class=\"sr-only\">Buscar</span>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"1.375em\" height=\"1.375em\" aria-hidden=\"true\"><path d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\" fill=\"currentColor\"/></svg>\r\n    </button>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && errorMessageData\"\r\n                      [id]=\"getErrorId()\"\r\n                      [text]=\"errorMessageData.text\"\r\n                      [html]=\"errorMessageData.html\"\r\n                      [classes]=\"errorMessageData.classes\"\r\n                      [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\r\n                      [role]=\"errorMessageData.role\"\r\n                      [ariaLabel]=\"errorMessageData.ariaLabel\"\r\n                      [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\r\n                      [ariaHidden]=\"errorMessageData.ariaHidden\"\r\n                      [ariaDisabled]=\"errorMessageData.ariaDisabled\"\r\n                      [ariaControls]=\"errorMessageData.ariaControls\"\r\n                      [ariaCurrent]=\"errorMessageData.ariaCurrent\"\r\n                      [ariaLive]=\"errorMessageData.ariaLive\"\r\n                      [ariaExpanded]=\"errorMessageData.ariaExpanded\"\r\n                      [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\r\n                      [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\r\n  <desy-error-message *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\r\n                      [text]=\"errorMessageText\" [id]=\"getErrorId()\"></desy-error-message>\r\n</div>\r\n<!-- /searchbar -->\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return SearchBarComponent; }),
-                            multi: true
-                        }
-                    ]
-                },] }
-    ];
-    SearchBarComponent.propDecorators = {
-        button: [{ type: i0.ContentChildren, args: [ButtonComponent,] }],
-        describedBy: [{ type: i0.Input }],
-        classes: [{ type: i0.Input }],
-        buttonClasses: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        clickEvent: [{ type: i0.Output }]
-    };
+        DesyContentChild({ onSetCallbackName: 'overrideSearchBarParams' })
+    ], TreeComponent.prototype, "searchBarComponent", void 0);
 
     var ConditionDirective = /** @class */ (function () {
         function ConditionDirective(templateRef) {
@@ -3682,6 +4687,31 @@
         items: [{ type: i0.Input }]
     };
 
+    var TreeItemsGeneratorComponent = /** @class */ (function () {
+        function TreeItemsGeneratorComponent(viewContainerRef) {
+            this.viewContainerRef = viewContainerRef;
+        }
+        TreeItemsGeneratorComponent.prototype.ngOnInit = function () {
+            this.viewContainerRef.createEmbeddedView(this.content);
+        };
+        return TreeItemsGeneratorComponent;
+    }());
+    TreeItemsGeneratorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-tree-items-generator',
+                    template: "<ng-template #content>\r\n  <ng-container *ngIf=\"items && itemTemplate\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: {item: item}\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    TreeItemsGeneratorComponent.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef }
+    ]; };
+    TreeItemsGeneratorComponent.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['content', { static: true },] }],
+        items: [{ type: i0.Input }],
+        itemTemplate: [{ type: i0.Input }]
+    };
+
     var ModalButtonPrimaryComponent = /** @class */ (function (_super) {
         __extends(ModalButtonPrimaryComponent, _super);
         function ModalButtonPrimaryComponent() {
@@ -4250,6 +5280,8 @@
             if (this.isOpen()) {
                 this.dialogService.closeDialog(this.dialog);
                 this.dialog = null;
+                var elementToFocus = document.getElementById('header-offcanvas-button');
+                elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
             }
         };
         HeaderOffcanvasComponent.prototype.isOpen = function () {
@@ -4275,14 +5307,15 @@
     }());
     HeaderOffcanvasComponent.dialogOptions = {
         id: 'header-offcanvas-dialog',
-        focusOnClose: 'header-offcanvas',
+        focusOnClose: 'header-offcanvas-button',
         ariaModal: 'true',
-        ariaLabelledBy: 'header-offcanvas-button-text'
+        ariaLabelledBy: 'header-offcanvas-button-text',
+        role: 'dialog'
     };
     HeaderOffcanvasComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-header-offcanvas',
-                    template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
+                    template: "\r\n<ng-template #offcanvasContent>\r\n  <div class=\"origin-top-left left-0 fixed inset-0 h-screen\">\r\n    <div class=\"h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10\"\r\n         [desyClickOutside]=\"isOpen()\" (clickOutside)=\"close()\">\r\n      <div class=\"text-right p-sm\">\r\n        <button (click)=\"close()\" id=\"header-offcanvas-button-close\" class=\"c-button c-button--sm c-button--transparent m-sm\"\r\n                (desyContentEmpty)=\"handleEmptyContent('Header-offcanvas close button')\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: closeButton }\"></ng-container> <svg #desyContentEmptyIgnore xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"self-center ml-2\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z\"/></svg>\r\n        </button>\r\n      </div>\r\n      <ng-container *desyCustomInnerContent=\"{ component: content }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *desyCustomInnerContent=\"{ component: button }\"></ng-container>\r\n"
                 },] }
     ];
     HeaderOffcanvasComponent.ctorParameters = function () { return [
@@ -4464,12 +5497,48 @@
         NavComponent.prototype.getIdPrefix = function () {
             return this.idPrefix ? this.idPrefix : 'nav-item';
         };
+        NavComponent.prototype.movePrevious = function (event, currentIndex) {
+            event.preventDefault();
+            var items = this.getItemList();
+            var nextIndex = currentIndex - 1;
+            while (nextIndex >= 0 && !this.isFocusableItem(items[nextIndex])) {
+                nextIndex--;
+            }
+            if (nextIndex < items.length) {
+                var itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+                if (itemElem) {
+                    itemElem.focus();
+                }
+            }
+        };
+        NavComponent.prototype.moveNext = function (event, currentIndex) {
+            event.preventDefault();
+            var items = this.getItemList();
+            var nextIndex = currentIndex + 1;
+            while (nextIndex < items.length && !this.isFocusableItem(items[nextIndex])) {
+                nextIndex++;
+            }
+            if (nextIndex < items.length) {
+                var itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+                if (itemElem) {
+                    itemElem.focus();
+                }
+            }
+        };
+        NavComponent.prototype.simulateClick = function (event, item, index) {
+            event.preventDefault();
+            var element = document.getElementById(this.getItemId(item, index));
+            element === null || element === void 0 ? void 0 : element.click();
+        };
+        NavComponent.prototype.isFocusableItem = function (item) {
+            return !item.active && !item.disabled;
+        };
         return NavComponent;
     }(AccessibilityComponent));
     NavComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-nav',
-                    template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (click)=\"onClick($event, item)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (click)=\"onClick($event, item)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
+                    template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n             (keydown.arrowDown)=\"moveNext($event, i)\"\r\n             (click)=\"onClick($event, item)\"\r\n             (keydown.space)=\"simulateClick($event, item, i)\"\r\n             (keydown.enter)=\"simulateClick($event, item, i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n          <a *ngIf=\"!item.active && !item.href\"\r\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n               [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n               (keydown.arrowDown)=\"moveNext($event, i)\"\r\n               (click)=\"onClick($event, item)\"\r\n               (keydown.space)=\"simulateClick($event, item, i)\"\r\n               (keydown.enter)=\"simulateClick($event, item, i)\"\r\n               (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n            <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n          </a>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n        <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n    [class]=\"['text-sm', classes] | makeHtmlList\"\r\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ul>\r\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n    </ul>\r\n  </nav>\r\n</ng-template>\r\n"
                 },] }
     ];
     NavComponent.propDecorators = {
@@ -4504,7 +5573,7 @@
     HeaderSubnavComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-header-subnav',
-                    template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <h2 id=\"subnav-title\" class=\"\">\r\n      <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                     [classesContainer]=\"classesContainer\"\r\n                     [classesTooltip]=\"classesTooltip\"\r\n                     [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                     [caller]=\"caller\"\r\n\r\n                     [role]=\"role\"\r\n                     [ariaLabel]=\"ariaLabel\"\r\n                     [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                     [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                     [ariaHidden]=\"ariaHidden\"\r\n                     [ariaDisabled]=\"ariaDisabled\"\r\n                     [ariaControls]=\"ariaControls\"\r\n                     [ariaCurrent]=\"ariaCurrent\"\r\n                     [ariaLive]=\"ariaLive\"\r\n                     [ariaExpanded]=\"ariaExpanded\"\r\n                     [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                     [ariaHasPopup]=\"ariaHasPopup\"\r\n                     [tabindex]=\"tabindex\">\r\n        <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n      </desy-dropdown>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </h2>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n    <span #desyContentEmptyIgnore class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n"
+                    template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <p class=\"sr-only\">Aplicaci\u00F3n actual: </p>\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n      <ng-template #caller>\r\n        <ng-container *ngTemplateOutlet=\"templateNav\"></ng-container>\r\n      </ng-template>\r\n    </desy-dropdown>\r\n  </div>\r\n</div>\r\n<ng-template #noItems>\r\n  <p class=\"hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white\"\r\n     (desyContentEmpty)=\"handleEmptyContent('Header-subnav')\">\r\n    <span #desyContentEmptyIgnore class=\"sr-only\">Aplicaci\u00F3n actual: </span>\r\n    <ng-container *ngTemplateOutlet=\"templateContent\"></ng-container>\r\n  </p>\r\n</ng-template>\r\n\r\n\r\n"
                 },] }
     ];
     HeaderSubnavComponent.propDecorators = {
@@ -4538,7 +5607,7 @@
     HeaderDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-header-dropdown',
-                    template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer ? classesContainer : 'hidden lg:block'\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-content></ng-content>\r\n    </desy-dropdown>\r\n    <ng-template #caller>\r\n      <ng-content select=\"desy-nav\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n"
+                    template: "<div class=\"ml-4 flex items-center lg:ml-6\">\r\n  <div class=\"ml-3 relative\">\r\n    <desy-dropdown [hiddenText]=\"hiddenText\"\r\n                   [classesContainer]=\"classesContainer ? classesContainer : 'hidden lg:block'\"\r\n                   [classesTooltip]=\"classesTooltip\"\r\n                   [classes]=\"classes ? classes : 'c-dropdown--header'\"\r\n                   [caller]=\"caller\"\r\n\r\n                   [role]=\"role\"\r\n                   [ariaLabel]=\"ariaLabel\"\r\n                   [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                   [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                   [ariaHidden]=\"ariaHidden\"\r\n                   [ariaDisabled]=\"ariaDisabled\"\r\n                   [ariaControls]=\"ariaControls\"\r\n                   [ariaCurrent]=\"ariaCurrent\"\r\n                   [ariaLive]=\"ariaLive\"\r\n                   [ariaExpanded]=\"ariaExpanded\"\r\n                   [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                   [ariaHasPopup]=\"ariaHasPopup\"\r\n                   [tabindex]=\"tabindex\">\r\n      <ng-content></ng-content>\r\n    </desy-dropdown>\r\n    <ng-template #caller>\r\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: templateNav }\"></ng-container>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n"
                 },] }
     ];
     HeaderDropdownComponent.propDecorators = {
@@ -4546,11 +5615,15 @@
         classesContainer: [{ type: i0.Input }],
         classesTooltip: [{ type: i0.Input }],
         classes: [{ type: i0.Input }],
-        nav: [{ type: i0.ContentChildren, args: [NavComponent,] }]
+        nav: [{ type: i0.ContentChildren, args: [NavComponent,] }],
+        contentComponent: [{ type: i0.ContentChildren, args: [ContentComponent,] }]
     };
     __decorate([
         DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
-    ], HeaderDropdownComponent.prototype, "nav", void 0);
+    ], HeaderDropdownComponent.prototype, "nav", void 0);
+    __decorate([
+        DesyContentChild()
+    ], HeaderDropdownComponent.prototype, "contentComponent", void 0);
 
     var SkipLinkComponent = /** @class */ (function (_super) {
         __extends(SkipLinkComponent, _super);
@@ -5049,7 +6122,7 @@
             else {
                 var idPrefix = this.idPrefix ? this.idPrefix : 'nav-item';
                 if (i === 0) {
-                    return idPrefix;
+                    return idPrefix + '-0';
                 }
                 else {
                     return idPrefix + '-' + i;
@@ -5091,7 +6164,7 @@
     MenuVerticalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-menu-vertical',
-                    template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\" [routerLinkActive]=\"item.routerLinkActiveClasses\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
+                    template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
                     animations: [
                         animations.trigger('displayMenuVertical', [
                             animations.state('void', animations.style({
@@ -5887,7 +6960,7 @@
     MenubarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-menubar',
-                    template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
+                    template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
                 },] }
     ];
     MenubarComponent.ctorParameters = function () { return [
@@ -6169,67 +7242,6 @@
         DesyContentChild()
     ], TableComponent.prototype, "headerComponent", void 0);
 
-    var SearchUtils = /** @class */ (function () {
-        function SearchUtils() {
-        }
-        /**
-         * Comprueba si una cadena de texto (target) contiene cualquier palabra de otro texto (text)
-         * @param target - Texto en el que buscar
-         * @param text - Texto a buscar
-         * @param fullWord - Indica si las palabras del texto a buscar deben aparecer enteras
-         */
-        SearchUtils.containsAnyWordFrom = function (target, text, fullWord) {
-            var _this = this;
-            var words = [];
-            var includes = false;
-            var simplifiedTarget = this.getSimplifiedString(target);
-            if (text && text.split(' ').length > 1) {
-                words = text.split(' ');
-            }
-            words.push(text);
-            words.forEach(function (word) {
-                if (simplifiedTarget && word) {
-                    if ((fullWord && simplifiedTarget === _this.getSimplifiedString(word))
-                        || (!fullWord && simplifiedTarget.includes(_this.getSimplifiedString(word)))) {
-                        includes = true;
-                    }
-                }
-            });
-            return includes;
-        };
-        /**
-         * Convierte a mayúsculas, elimina espacios y reemplaza/elimina caracteres especiales para realizar comparaciones más tolerantes
-         * @param str - cadena de entrada
-         */
-        SearchUtils.getSimplifiedString = function (str) {
-            var res = str;
-            if (str) {
-                res = str.toLocaleUpperCase().trim();
-                res = res.replace('Á', 'A');
-                res = res.replace('É', 'E');
-                res = res.replace('Í', 'I');
-                res = res.replace('Ó', 'O');
-                res = res.replace('Ú', 'U');
-                res = res.replace('À', 'A');
-                res = res.replace('È', 'E');
-                res = res.replace('Ì', 'I');
-                res = res.replace('Ò', 'O');
-                res = res.replace('Ù', 'U');
-                res = res.replace('Ä', 'A');
-                res = res.replace('Ë', 'E');
-                res = res.replace('Ï', 'I');
-                res = res.replace('Ö', 'O');
-                res = res.replace('Ü', 'U');
-                res = res.replace(',', '');
-                res = res.replace('.', '');
-                res = res.replace('\'', '');
-                res = res.replace('"', '');
-            }
-            return res;
-        };
-        return SearchUtils;
-    }());
-
     exports.OrderBy = void 0;
     (function (OrderBy) {
         OrderBy["none"] = "none";
@@ -7732,7 +8744,7 @@
     PaginationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'desy-pagination',
-                    template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
+                    template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\r\n                    [doesChangeButtonText]=\"true\"\r\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\r\n                    [(items)]=\"items\"\r\n                    (activeItemChange)=\"changePage(+$event.text)\"></desy-listbox>\r\n      <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\r\n                   [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n    </nav>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!hasSelect\">\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <ul class=\"flex flex-wrap\">\r\n        <li *ngFor=\"let item of items; index as i\">\r\n          <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\r\n                       classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\r\n                       disabled=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\r\n          <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\r\n                       [html]=\"prefix + (i + 1) + getSuffix(i)\"\r\n                       (clickEvent)=\"changePage(i + 1)\"\r\n                       classes=\"mb-sm mr-sm\"></desy-button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </ng-container>\r\n  <p class=\"block lg:ml-auto text-sm text-neutral-dark\">\r\n    <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\r\n  </p>\r\n</div>\r\n"
                 },] }
     ];
     PaginationComponent.propDecorators = {
@@ -8236,6 +9248,11 @@
                         DateInputDayComponent,
                         DateInputMonthComponent,
                         DateInputYearComponent,
+                        TreeComponent,
+                        TreeSubComponent,
+                        TreeItemComponent,
+                        TreeCheckboxComponent,
+                        TreeItemsGeneratorComponent,
                         ConditionDirective,
                     ],
                     imports: [
@@ -8272,6 +9289,10 @@
                         DateInputDayComponent,
                         DateInputMonthComponent,
                         DateInputYearComponent,
+                        TreeComponent,
+                        TreeSubComponent,
+                        TreeItemComponent,
+                        TreeItemsGeneratorComponent,
                         ConditionDirective
                     ]
                 },] }
@@ -8473,6 +9494,80 @@
                 },] }
     ];
 
+    var ToggleOffStateComponent = /** @class */ (function (_super) {
+        __extends(ToggleOffStateComponent, _super);
+        function ToggleOffStateComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ToggleOffStateComponent;
+    }(AccessibilityComponent));
+    ToggleOffStateComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-toggle-off-state',
+                    template: "<ng-template #contentTemplateOffState>\r\n   <ng-content></ng-content>\r\n</ng-template>"
+                },] }
+    ];
+    ToggleOffStateComponent.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['contentTemplateOffState', { static: true },] }],
+        classes: [{ type: i0.Input }]
+    };
+
+    var ToggleOnStateComponent = /** @class */ (function (_super) {
+        __extends(ToggleOnStateComponent, _super);
+        function ToggleOnStateComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ToggleOnStateComponent;
+    }(AccessibilityComponent));
+    ToggleOnStateComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-toggle-on-state',
+                    template: "<ng-template #contentTemplateOnState>\r\n   <ng-content></ng-content>\r\n</ng-template>"
+                },] }
+    ];
+    ToggleOnStateComponent.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['contentTemplateOnState', { static: true },] }],
+        classes: [{ type: i0.Input }]
+    };
+
+    var ToggleComponent = /** @class */ (function (_super) {
+        __extends(ToggleComponent, _super);
+        function ToggleComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.clickEvent = new i0.EventEmitter();
+            _this.pressedChange = new i0.EventEmitter();
+            return _this;
+        }
+        ToggleComponent.prototype.onClick = function (event) {
+            this.pressed = !this.pressed;
+            this.pressedChange.emit(this.pressed);
+            this.clickEvent.emit(event);
+        };
+        return ToggleComponent;
+    }(AccessibilityComponent));
+    ToggleComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'desy-toggle',
+                    template: "<!-- toggle -->\r\n<div class=\"relative\">\r\n  <button *ngIf=\"isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\r\n          \r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"'switch'\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n\r\n  <button *ngIf=\"!isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n</div>\r\n<!-- /toggle -->"
+                },] }
+    ];
+    ToggleComponent.propDecorators = {
+        id: [{ type: i0.Input }],
+        isSwitch: [{ type: i0.Input }],
+        pressed: [{ type: i0.Input }],
+        classes: [{ type: i0.Input }],
+        clickEvent: [{ type: i0.Output }],
+        pressedChange: [{ type: i0.Output }],
+        contentTemplateOnState: [{ type: i0.ContentChildren, args: [ToggleOnStateComponent,] }],
+        contentTemplateOffState: [{ type: i0.ContentChildren, args: [ToggleOffStateComponent,] }]
+    };
+    __decorate([
+        DesyContentChild()
+    ], ToggleComponent.prototype, "contentTemplateOnState", void 0);
+    __decorate([
+        DesyContentChild()
+    ], ToggleComponent.prototype, "contentTemplateOffState", void 0);
+
     var DesyButtonsModule = /** @class */ (function () {
         function DesyButtonsModule() {
         }
@@ -8487,7 +9582,10 @@
                         ListboxComponent,
                         PillComponent,
                         ListboxItemComponent,
-                        ListboxLabelComponent
+                        ListboxLabelComponent,
+                        ToggleComponent,
+                        ToggleOnStateComponent,
+                        ToggleOffStateComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -8502,7 +9600,10 @@
                         ListboxComponent,
                         PillComponent,
                         ListboxItemComponent,
-                        ListboxLabelComponent
+                        ListboxLabelComponent,
+                        ToggleComponent,
+                        ToggleOnStateComponent,
+                        ToggleOffStateComponent
                     ]
                 },] }
     ];
@@ -8930,17 +10031,26 @@
     exports.TextareaComponent = TextareaComponent;
     exports.TitleComponent = TitleComponent;
     exports.TooltipContentComponent = TooltipContentComponent;
+    exports.TreeComponent = TreeComponent;
+    exports.TreeItemComponent = TreeItemComponent;
+    exports.TreeItemsGeneratorComponent = TreeItemsGeneratorComponent;
+    exports.TreeSubComponent = TreeSubComponent;
     exports.summaryTextOrSummaryHtmlRequiredFunction = summaryTextOrSummaryHtmlRequiredFunction;
     exports.ɵa = AccessibilityComponent;
     exports.ɵb = AccessibilityAndContentRequiredComponent;
-    exports.ɵba = CustomInnerContentDirective;
-    exports.ɵbb = TooltipComponent;
-    exports.ɵbc = TemplateDrivenWrapperComponent;
-    exports.ɵbd = DateInputDividerComponent;
-    exports.ɵbe = DateInputDayComponent;
-    exports.ɵbf = DateInputMonthComponent;
-    exports.ɵbg = DateInputYearComponent;
-    exports.ɵbh = FocusClickedCellDirective;
+    exports.ɵba = AttributeChangeDirective;
+    exports.ɵbb = InnerContentDirective;
+    exports.ɵbc = ClickOutsideDirective;
+    exports.ɵbd = ContentChangeDirective;
+    exports.ɵbe = ContentEmptyDirective;
+    exports.ɵbf = CustomInnerContentDirective;
+    exports.ɵbg = TooltipComponent;
+    exports.ɵbh = TemplateDrivenWrapperComponent;
+    exports.ɵbi = DateInputDividerComponent;
+    exports.ɵbj = DateInputDayComponent;
+    exports.ɵbk = DateInputMonthComponent;
+    exports.ɵbl = DateInputYearComponent;
+    exports.ɵbm = FocusClickedCellDirective;
     exports.ɵc = AccessibilityAndTextOrHtmlRequiredComponent;
     exports.ɵd = DesyContentChild;
     exports.ɵe = ContentBaseComponent;
@@ -8949,22 +10059,22 @@
     exports.ɵh = DesyOnInputChange;
     exports.ɵi = InputGroupItemComponent;
     exports.ɵj = DateInputItemComponent;
-    exports.ɵk = HeaderNavigationItemComponent;
-    exports.ɵl = MenubaritemDirective;
-    exports.ɵm = RowDirective;
-    exports.ɵn = CellDirective;
-    exports.ɵo = TabItemComponent;
-    exports.ɵp = PanelComponent;
-    exports.ɵq = SharedModule;
-    exports.ɵr = TextOrHtmlRequiredComponent;
-    exports.ɵs = InnerHtmlPipe;
-    exports.ɵt = MakeHtmlListPipe;
-    exports.ɵu = ExternalHrefPipe;
-    exports.ɵv = AttributeChangeDirective;
-    exports.ɵw = InnerContentDirective;
-    exports.ɵx = ClickOutsideDirective;
-    exports.ɵy = ContentChangeDirective;
-    exports.ɵz = ContentEmptyDirective;
+    exports.ɵk = ITreeItem;
+    exports.ɵl = TreeCheckboxComponent;
+    exports.ɵm = HeaderNavigationItemComponent;
+    exports.ɵn = MenubaritemDirective;
+    exports.ɵo = RowDirective;
+    exports.ɵp = CellDirective;
+    exports.ɵq = TabItemComponent;
+    exports.ɵr = PanelComponent;
+    exports.ɵs = ToggleComponent;
+    exports.ɵt = ToggleOnStateComponent;
+    exports.ɵu = ToggleOffStateComponent;
+    exports.ɵv = SharedModule;
+    exports.ɵw = TextOrHtmlRequiredComponent;
+    exports.ɵx = InnerHtmlPipe;
+    exports.ɵy = MakeHtmlListPipe;
+    exports.ɵz = ExternalHrefPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });