desy-angular 5.0.1 → 5.1.3

package/fesm2015/desy-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, EventEmitter, HostBinding, Output, ElementRef, QueryList, ViewChildren, ContentChildren, ChangeDetectorRef, HostListener, forwardRef, Pipe, Optional, Host, Directive, TemplateRef, ComponentFactoryResolver, ViewContainerRef, Type, ComponentRef, Injectable, Injector, ApplicationRef, ContentChild, SecurityContext, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, EventEmitter, HostBinding, Output, ElementRef, QueryList, ViewChildren, ContentChildren, ChangeDetectorRef, HostListener, forwardRef, Pipe, Optional, Host, Directive, TemplateRef, ChangeDetectionStrategy, ViewContainerRef, ComponentFactoryResolver, Type, ComponentRef, Injectable, Injector, ApplicationRef, ContentChild, SecurityContext, NgModule } from '@angular/core';
 import { __decorate, __awaiter } from 'tslib';
 import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
@@ -3051,6 +3051,982 @@ SearchBarComponent.propDecorators = {
     clickEvent: [{ type: Output }]
 };
 
+class TreeSubComponent extends ContentBaseComponent {
+}
+TreeSubComponent.decorators = [
+    { type: 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: Input }]
+};
+
+class ITreeItem {
+}
+
+class 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
+     */
+    static containsAnyWordFrom(target, text, fullWord) {
+        let words = [];
+        let includes = false;
+        const simplifiedTarget = this.getSimplifiedString(target);
+        if (text && text.split(' ').length > 1) {
+            words = text.split(' ');
+        }
+        words.push(text);
+        words.forEach(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
+     */
+    static getSimplifiedString(str) {
+        let 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;
+    }
+}
+
+class TreeCheckboxComponent extends AccessibilityComponent {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+        this.checkedChange = new EventEmitter();
+        this.indeterminateCheckedChange = new EventEmitter();
+        this.hasError = false;
+        this._hasInit = false;
+    }
+    ngOnInit() {
+        this._hasInit = true;
+        this.onDescribedByChange();
+    }
+    detectChanges() {
+        this.changeDetector.detectChanges();
+    }
+    hasChanged() {
+        if (this._hasInit) {
+            const 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);
+        }
+    }
+    onIdChange() {
+        this.overrideLabelParams();
+        this.overrideHintParams();
+    }
+    setIndeterminateStatus() {
+        var _a;
+        const 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;
+            }
+        }
+    }
+    setIndeterminateChecked(indeterminateChecked) {
+        this.indeterminateChecked = indeterminateChecked;
+        this._lastIndeterminate = indeterminateChecked;
+        this.indeterminateCheckedChange.emit(indeterminateChecked);
+        this.changeDetector.detectChanges(); // Avisa al elemento input para que actualice su estado
+    }
+    focus() {
+        this.inputElement.nativeElement.focus();
+    }
+    matchesText(value) {
+        const checkboxText = this.contentWrapper.nativeElement.textContent;
+        return SearchUtils.containsAnyWordFrom(checkboxText, value);
+    }
+    preventDefault(event) {
+        event.preventDefault();
+    }
+    getHintId() {
+        return this.hintComponent ? this.hintComponent.id : '';
+    }
+    overrideLabelParams() {
+        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();
+        }
+    }
+    overrideHintParams() {
+        if (this.hintComponent) {
+            if (!this.hintComponent.id) {
+                this.hintComponent.id = this.id + '-item-hint';
+            }
+            this.hintComponent.detectChanges();
+        }
+        this.onDescribedByChange();
+    }
+    getItemDescribedBy() {
+        return (this.describedBy ? this.describedBy : '') + ' ' + this.getHintId();
+    }
+    onDescribedByChange() {
+        if (this.ariaDescribedBy) {
+            this.itemDescribedBy = this.ariaDescribedBy;
+        }
+        else {
+            this.itemDescribedBy = this.getItemDescribedBy();
+        }
+    }
+}
+TreeCheckboxComponent.decorators = [
+    { type: 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 = () => [
+    { type: ChangeDetectorRef }
+];
+TreeCheckboxComponent.propDecorators = {
+    inputElement: [{ type: ViewChild, args: ['input', { static: true },] }],
+    contentWrapper: [{ type: ViewChild, args: ['contentWrapper', { static: true },] }],
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    classes: [{ type: Input }],
+    value: [{ type: Input }],
+    checked: [{ type: Input }],
+    checkedChange: [{ type: Output }],
+    isIndeterminate: [{ type: Input }],
+    indeterminateChecked: [{ type: Input }],
+    indeterminateCheckedChange: [{ type: Output }],
+    disabled: [{ type: Input }],
+    hasDividers: [{ type: Input }],
+    describedBy: [{ type: Input }],
+    hasError: [{ type: Input }],
+    labelComponent: [{ type: Input }],
+    hintComponent: [{ type: 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);
+
+class TreeItemComponent extends AccessibilityComponent {
+    constructor(changeDetector, element) {
+        super();
+        this.changeDetector = changeDetector;
+        this.element = element;
+        this.checkedChange = new EventEmitter();
+        this.checkedChangeForTree = new EventEmitter();
+        this.expandedChange = new EventEmitter();
+        this.indeterminateCheckedChange = new 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 EventEmitter();
+        this.isFocus = false;
+        this.isHover = false;
+        this._matchesValidText = false; // True si el contenido del item encaja con los criterios de búsqueda y se está filtrando
+    }
+    ngOnChanges(changes) {
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(this.allParentsExpanded && this.expanded));
+        }
+        for (const propName in changes) {
+            if (changes.hasOwnProperty(propName)) {
+                switch (propName) {
+                    case 'checked': {
+                        // Reasignamos el valor de checked cuando detectamos el cambio en la entrada
+                        setTimeout(() => {
+                            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
+     */
+    focus() {
+        var _a;
+        (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.focus();
+        this.handleItemFocus(true);
+    }
+    setCheckedAutomaticallyDependingOnChildren() {
+        if (this.sub) {
+            this.sub.itemList.forEach(item => 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);
+                }
+            }
+        }
+    }
+    refreshAllParentsExpandedRecursive(value) {
+        this.allParentsExpanded = value;
+        if (this.sub) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(value && this.expanded));
+        }
+    }
+    detectChanges() {
+        this.changeDetector.detectChanges();
+    }
+    expandSub(value) {
+        this.expanded = value;
+        if (this.sub) {
+            this.sub.itemList.forEach(item => item.refreshAllParentsExpandedRecursive(this.allParentsExpanded && value));
+        }
+        this.expandedChange.emit(value);
+    }
+    /*
+     * Gestion de eventos
+     */
+    handleCheckboxChange(checked) {
+        this.setChecked(checked, false);
+        if (this.inheritedExpandedFirstLevel && checked && !this.expanded) {
+            this.expandSub(true);
+        }
+    }
+    handleIndeterminateCheckedChange(indeterminate) {
+        this.indeterminateCheckedChange.emit(indeterminate);
+    }
+    handleItemFocus(value, condition = true) {
+        if (condition) {
+            this.isFocus = value;
+        }
+    }
+    handleItemHover(value, condition = true) {
+        if (condition) {
+            this.isHover = value;
+        }
+    }
+    handleArrowUp(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'previous',
+                currentItem: this
+            });
+        }
+    }
+    handleHome(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'first',
+                currentItem: this
+            });
+        }
+    }
+    handleEnd(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'last',
+                currentItem: this
+            });
+        }
+    }
+    handleArrowDown(event, condition = true) {
+        if (condition) {
+            event.preventDefault();
+            this.quitFocus.emit({
+                nextElement: 'next',
+                currentItem: this
+            });
+        }
+    }
+    handleArrowRight(event, 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);
+            }
+        }
+    }
+    handleArrowLeft(event, 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
+     */
+    setChecked(checked, ignoreInTree, emitEvent = true) {
+        if (!this.disabled) {
+            this.checked = checked;
+        }
+        if (!this.inheritedDecoupleChildFromParent && this.sub && this.sub.itemList && !this.indeterminateChecked) {
+            this.sub.itemList.forEach(item => {
+                item.setIndeterminateChecked(false);
+                item.setChecked(checked, true);
+            });
+        }
+        if (emitEvent) {
+            this.checkedChange.emit(checked);
+        }
+        if (!ignoreInTree) {
+            this.checkedChangeForTree.emit(checked);
+        }
+    }
+    setIndeterminateChecked(indeterminate) {
+        if (!this.disabled) {
+            this.indeterminateChecked = indeterminate;
+            this.indeterminateCheckedChange.emit(indeterminate);
+        }
+    }
+    setSubLevel(subLevel) {
+        this.subLevel = subLevel;
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => item.setSubLevel(subLevel + 1));
+        }
+    }
+    setOrderRecursively(order) {
+        this.orderInTree = order;
+        let newOrder = order + 1;
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach(item => {
+                newOrder = item.setOrderRecursively(newOrder);
+            });
+        }
+        return newOrder;
+    }
+    setDefaultId(defaultId) {
+        this.defaultId = defaultId;
+        this.setDefaultIdRecursive();
+    }
+    setDefaultIdRecursive() {
+        if (this.sub && this.sub.itemList) {
+            this.sub.itemList.forEach((item, index) => {
+                item.setDefaultId(`sub-${this.getId()}-${index}`);
+            });
+        }
+    }
+    getId() {
+        return this.id ? this.id : this.defaultId;
+    }
+    isHidden() {
+        return !this.inheritedMatchesSearch && (!this.sub || this.areAllChildrenHidden());
+    }
+    areAllChildrenHidden() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => !child.isHidden()) < 0;
+    }
+    areAllChildrenChecked() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => !child.checked) < 0;
+    }
+    hasChildrenCheckedOrIndeterminate() {
+        const children = this.sub.itemList;
+        return children.findIndex(child => child.checked || child.indeterminateChecked) >= 0;
+    }
+    matchesText(value) {
+        var _a;
+        let matches;
+        if (this.allParentsExpanded && !this.isHidden()) {
+            matches = (_a = this.checkbox) === null || _a === void 0 ? void 0 : _a.matchesText(value);
+        }
+        else {
+            const itemText = this.hiddenWrapper.nativeElement.textContent;
+            matches = SearchUtils.containsAnyWordFrom(itemText, value);
+        }
+        this._matchesValidText = value ? matches : false;
+        return matches;
+    }
+    getKey() {
+        return this.treeItemKey;
+    }
+    getParentKey() {
+        let parentKey;
+        let 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;
+    }
+    isActive() {
+        return this.active || this._matchesValidText;
+    }
+    /*
+     * Métodos privados
+     */
+    /**
+     * Genera una clave única para el componente
+     * @private
+     */
+    static generateStaticItemKey() {
+        const key = 'tree-item-key-' + TreeItemComponent._treeItemKeySuffix;
+        TreeItemComponent._treeItemKeySuffix++;
+        return key;
+    }
+}
+TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siempre claves distintas
+TreeItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree-item',
+                template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n    [id]=\"id\"\r\n    [class]=\"'c-tree__item focus:outline-none'\"\r\n    [ngClass]=\"{\r\n      'ml-4': subLevel === 0,\r\n      'ml-8': subLevel !== 0,\r\n      'c-tree__item--focus': isFocus && !sub,\r\n      'c-tree__item--hover': isHover && !sub\r\n    }\"\r\n    (focusin)=\"handleItemFocus(true, !sub)\"\r\n    (focusout)=\"handleItemFocus(false, !sub)\"\r\n    (mouseover)=\"handleItemHover(true, !sub)\"\r\n    (mouseout)=\"handleItemHover(false, !sub)\"\r\n    (keydown.home)=\"handleHome($event, !sub)\"\r\n    (keydown.end)=\"handleEnd($event, !sub)\"\r\n    (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n    (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n    (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n    (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n    role=\"treeitem\"\r\n    [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n    [attr.aria-current]=\"isActive() && subLevel === 0 ? 'page' : null\"\r\n    [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n    [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n    [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n  <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n       [id]=\"id\"\r\n       [class]=\"['block', classes] | makeHtmlList\"\r\n       [attr.title]=\"title ? title : null\"\r\n       [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n       [attr.role]=\"role ? role : 'tree'\"\r\n       [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n       [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n       [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n       [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n       [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n       [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (isActive() ? 'page' : null)\"\r\n       [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n       [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n       [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n       [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n       [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n       [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n  </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n  <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n       [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n       (focusin)=\"handleItemFocus(true)\"\r\n       (focusout)=\"handleItemFocus(false)\"\r\n       (mouseover)=\"handleItemHover(true)\"\r\n       (mouseout)=\"handleItemHover(false)\"\r\n       (keydown.home)=\"handleHome($event)\"\r\n       (keydown.end)=\"handleEnd($event)\"\r\n       (keydown.arrowup)=\"handleArrowUp($event)\"\r\n       (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n       (keydown.arrowright)=\"handleArrowRight($event)\"\r\n       (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n    <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n         [attr.role]=\"role ? role : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n        <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n        <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n      </span>\r\n      <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n  <li class=\"hidden\">\r\n    <div #hiddenWrapper>\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n    <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n  <!--\r\n    El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\r\n    Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\r\n    Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\r\n    que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\r\n    ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\r\n  -->\r\n  <desy-tree-checkbox *ngIf=\"name || parentName\"\r\n                      [name]=\"name ? name : parentName\"\r\n                      [id]=\"getId()\"\r\n                      [value]=\"value\"\r\n                      [classes]=\"classes\"\r\n                      [type]=\"type\"\r\n                      [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n                      [hasError]=\"inheritedHasError\"\r\n                      [disabled]=\"disabled\"\r\n                      [hasDividers]=\"hasDividers\"\r\n                      [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n                      [isIndeterminate]=\"isIndeterminate\"\r\n                      [(indeterminateChecked)]=\"indeterminateChecked\"\r\n                      (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n                      [labelComponent]=\"label\"\r\n                      [hintComponent]=\"hint\"\r\n\r\n                      [role]=\"role\"\r\n                      [ariaLabel]=\"ariaLabel\"\r\n                      [ariaDescribedBy]=\"ariaDescribedBy\"\r\n                      [ariaLabelledBy]=\"ariaLabelledBy\"\r\n                      [ariaHidden]=\"ariaHidden\"\r\n                      [ariaDisabled]=\"ariaDisabled\"\r\n                      [ariaControls]=\"ariaControls\"\r\n                      [ariaCurrent]=\"ariaCurrent\"\r\n                      [ariaLive]=\"ariaLive\"\r\n                      [ariaExpanded]=\"ariaExpanded\"\r\n                      [ariaErrorMessage]=\"ariaErrorMessage\"\r\n                      [ariaHasPopup]=\"ariaHasPopup\"\r\n                      [ariaModal]=\"ariaModal\"\r\n                      [tabindex]=\"tabindex\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n    <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n  </div>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n  <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
+                providers: [
+                    {
+                        provide: ITreeItem,
+                        useExisting: forwardRef(() => TreeItemComponent)
+                    }
+                ]
+            },] }
+];
+TreeItemComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+TreeItemComponent.propDecorators = {
+    hiddenWrapper: [{ type: ViewChild, args: ['hiddenWrapper',] }],
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    value: [{ type: Input }],
+    classes: [{ type: Input }],
+    active: [{ type: Input }],
+    disabled: [{ type: Input }],
+    title: [{ type: Input }],
+    hasDividers: [{ type: Input }],
+    isIndeterminate: [{ type: Input }],
+    checked: [{ type: Input }],
+    checkedChange: [{ type: Output }],
+    expanded: [{ type: Input }],
+    expandedChange: [{ type: Output }],
+    indeterminateChecked: [{ type: Input }],
+    indeterminateCheckedChange: [{ type: Output }],
+    sub: [{ type: ContentChildren, args: [TreeSubComponent,] }],
+    hint: [{ type: ContentChildren, args: [HintComponent,] }],
+    label: [{ type: ContentChildren, args: [LabelComponent,] }],
+    checkbox: [{ type: ViewChild, args: [TreeCheckboxComponent,] }],
+    treeItemKey: [{ type: 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);
+
+class TreeComponent extends FormFieldComponent {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+        this.expandedFirstLevel = true;
+        this.decoupleChildFromParent = false;
+        this.disableDefaultSearch = false;
+        this.searchMatchValuesChange = new EventEmitter();
+        this.rootItems = [];
+        this._itemListCheckedSubscriptions = [];
+        this._itemListQuitFocusSubscriptions = [];
+        this._alreadyConfiguringItems = false;
+    }
+    ngOnDestroy() {
+        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();
+    }
+    ngOnChanges(changes) {
+        this.configureAllItems();
+    }
+    /**
+     * Se sobrescribe el valor para actualizar los items
+     * @Override
+     */
+    writeValue(value) {
+        this.value = value;
+        this.configureAllItems(true);
+        this.onChange(this.value);
+    }
+    /*
+     * Eventos
+     */
+    /**
+     * Actualiza el valor del componente al checkquearse un ítem
+     * @param originItem ítem modificado
+     */
+    updateValueFromItems(originItem) {
+        // Si es radio, se desactivan el resto de items cuando se activa otro item
+        if (this.type !== 'checkbox') {
+            const items = this.getAllItemsInOrder();
+            items.forEach(item => {
+                if (item !== originItem && item.checked) {
+                    item.setChecked(false, true);
+                }
+            });
+        }
+        else if (!this.decoupleChildFromParent) {
+            this.rootItems.forEach(item => item.setCheckedAutomaticallyDependingOnChildren());
+        }
+        this.value = [];
+        const items = this.getAllItemsInOrder();
+        items.forEach(item => {
+            if (item.checked) {
+                this.value.push(item.value);
+            }
+        });
+        this.onChange(this.value);
+    }
+    /**
+     * Gestiona cuando el foco abandona un ítem desde un evento de teclado controlado
+     * @param options
+     */
+    handleItemQuitFocus(options) {
+        if (options && options.nextElement) {
+            const items = this.getAllItemsInOrder();
+            const focusableItems = items.filter(item => !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":
+                    const currentSubLevel = options.currentItem.subLevel;
+                    if (currentSubLevel > 0) {
+                        const currentItemIndex = focusableItems.findIndex(item => item === options.currentItem);
+                        const parent = focusableItems.slice(0, currentItemIndex).reverse().find(item => item.subLevel < currentSubLevel);
+                        if (parent) {
+                            parent.focus();
+                        }
+                    }
+                    break;
+                case "firstChild":
+                case "next":
+                    if (options.currentItem) {
+                        let currentItemIndex = focusableItems.findIndex(item => item === options.currentItem);
+                        if (currentItemIndex < focusableItems.length - 1) {
+                            focusableItems[currentItemIndex + 1].focus();
+                        }
+                    }
+                    break;
+                case "previous":
+                    if (options.currentItem) {
+                        const currentItemIndex = focusableItems.findIndex(item => 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
+     */
+    onSearch(value) {
+        if (!this.disableDefaultSearch) {
+            if (value && value.length > 0) {
+                this.searchMatchValues = this.allItems.filter(item => item.matchesText(value)).map(item => item.value);
+            }
+            else {
+                this.searchMatchValues = null;
+            }
+            this.searchMatchValuesChange.emit(this.searchMatchValues);
+        }
+    }
+    /*
+     * Eventos al cambiar propiedades
+     */
+    /**
+     * Configura los items del árbol
+     */
+    configureAllItems(isValueChange = false) {
+        if (!this._alreadyConfiguringItems) {
+            this._alreadyConfiguringItems = true;
+            // Lo realizamos desde un setTimeout para que todos los inputs, values y demás vivan en paz y armonía
+            setTimeout(() => {
+                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(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) || isValueChange) {
+                            const valueList = this.value ? this.value : [];
+                            item.setChecked(!!valueList.find(v => v === item.value), true);
+                        }
+                        item.detectChanges();
+                        const checkedSubscription = item.checkedChangeForTree.subscribe(() => this.updateValueFromItems(item));
+                        this._itemListCheckedSubscriptions.push(checkedSubscription);
+                        const quitFocusSubscription = item.quitFocus.subscribe(options => this.handleItemQuitFocus(options));
+                        this._itemListQuitFocusSubscriptions.push(quitFocusSubscription);
+                    });
+                    this.setErrorInItems(this.hasErrorMessageComponent());
+                    this.buildTree();
+                    if (!this.value) {
+                        this.updateValueFromItems();
+                    }
+                    if (this.searchMatchValues) {
+                        this.onSearchMatchValuesChange();
+                    }
+                }
+                if (this.allItems && !this._allItemListSubscription) {
+                    this._allItemListSubscription = this.allItems.changes.subscribe(() => this.configureAllItems());
+                }
+                this.changeDetector.detectChanges();
+                this._alreadyConfiguringItems = false;
+            });
+        }
+    }
+    /**
+     * Modifica los items visibles según el filtro de búsqueda
+     */
+    onSearchMatchValuesChange() {
+        if (this.allItems) {
+            this.allItems.forEach(item => {
+                item.inheritedMatchesSearch = true;
+            });
+            if (this.searchMatchValues !== null && this.searchMatchValues !== undefined) {
+                this.allItems.forEach(item => {
+                    if (this.searchMatchValues.findIndex(value => item.value === value) < 0) {
+                        item.inheritedMatchesSearch = false;
+                    }
+                });
+            }
+        }
+    }
+    /*
+     * Getters and setters
+     */
+    getIdPrefix() {
+        return this.idPrefix ? this.idPrefix : this.name;
+    }
+    getDescribedBy() {
+        let 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
+     */
+    getDescribedByForItems() {
+        let describedBy;
+        if (this.hasFieldsetComponent()) {
+            describedBy = this.fieldsetComponent.describedBy;
+        }
+        else {
+            describedBy = this.getDescribedBy();
+        }
+        return describedBy;
+    }
+    hasFieldsetComponent() {
+        return !!this.fieldsetComponent;
+    }
+    /**
+     * Overrides super.getHintId();
+     */
+    getHintId() {
+        var _a;
+        return this.idPrefix ? this.idPrefix + '-hint' : (_a = this.hintComponent) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    /**
+     * Overrides super.getHintId();
+     */
+    getErrorId() {
+        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
+     */
+    overrideFieldsetParams(fieldset) {
+        fieldset.caller = this.innerHtml;
+        fieldset.errorId = this.getErrorId();
+        fieldset.describedBy = this.getDescribedBy();
+        fieldset.detectChanges();
+    }
+    overrideSearchBarParams(searchbar) {
+        const defaultOnChange = searchbar.onChange;
+        const newOnChange = value => {
+            this.onSearch(value);
+            defaultOnChange(value);
+        };
+        searchbar.registerOnChange(newOnChange);
+    }
+    /**
+     * Se llama desde FormField
+     */
+    overrideHintParams(hint) {
+        hint.id = this.getHintId();
+        hint.detectChanges();
+    }
+    /**
+     * Se llama desde FormField
+     */
+    overrideErrorMessageParams(errorMessage) {
+        errorMessage.id = this.getErrorId();
+        this.setErrorInItems(this.hasErrorMessageComponent());
+        errorMessage.detectChanges();
+    }
+    /**
+     * Se llama desde FormField
+     */
+    onDeleteErrorMessage(errorMessage) {
+        this.setErrorInItems(this.hasErrorMessageComponent());
+    }
+    /*
+     * Métodos privados
+     */
+    /**
+     * Configura la estructura del árbol
+     * @private
+     */
+    buildTree() {
+        // Se crea un mapa para tener accesibles los items por key y se borran los listados existentes
+        const itemMap = {};
+        this.rootItems = [];
+        this.allItems.forEach(item => {
+            const key = item.getKey();
+            itemMap[key] = item;
+            if (item.sub) {
+                item.sub.itemList = [];
+            }
+        });
+        // Se añaden los items a los listados correspondientes
+        this.allItems.forEach(item => {
+            const parentKey = item.getParentKey();
+            if (parentKey === 'root') {
+                this.rootItems.push(item);
+            }
+            else if (parentKey) {
+                const sub = itemMap[parentKey].sub;
+                if (sub) {
+                    sub.itemList.push(item);
+                }
+            }
+        });
+        // Se configuran los items desde root
+        let order = 0;
+        this.rootItems.forEach((item, index) => {
+            item.setSubLevel(0);
+            item.setDefaultId(`${this.idPrefix}-${index}`);
+            item.refreshAllParentsExpandedRecursive(true);
+            if (!this.decoupleChildFromParent) {
+                item.setCheckedAutomaticallyDependingOnChildren();
+            }
+            order = item.setOrderRecursively(order);
+        });
+    }
+    /**
+     * Si tiene un mensaje de error, se indica a los items
+     * @param hasError
+     * @private
+     */
+    setErrorInItems(hasError) {
+        var _a;
+        if (((_a = this.allItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.allItems.forEach(item => {
+                item.inheritedHasError = hasError;
+                item.detectChanges();
+            });
+        }
+    }
+    /**
+     * Limpia un listado de subscripciones
+     * @param subscriptionList
+     * @private
+     */
+    clearSubscriptions(subscriptionList) {
+        if (subscriptionList.length > 0) {
+            subscriptionList.forEach(s => s.unsubscribe());
+            subscriptionList.splice(0, subscriptionList.length);
+        }
+    }
+    /**
+     * Devuelve los items del árbol ordenados
+     * @private
+     */
+    getAllItemsInOrder() {
+        let list = [];
+        if (this.allItems) {
+            list = this.allItems.toArray().sort((a, b) => a.orderInTree > b.orderInTree ? 1 : -1);
+        }
+        return list;
+    }
+}
+TreeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-tree',
+                template: "\r\n<ng-template #innerHtml>\r\n  <ng-content select=\"desy-hint\"></ng-content>\r\n  <ng-content select=\"desy-error-message\"></ng-content>\r\n  <ng-content select=\"desy-search-bar\"></ng-content>\r\n  <ul [class]=\"['c-tree', classes] | makeHtmlList\"\r\n      [attr.role]=\"role ? role : 'tree'\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n      [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n      [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n      [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n      [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n      [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n      [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n      [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n      [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n      [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</ng-template>\r\n\r\n<!-- tree -->\r\n<div [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\r\n     [ngClass]=\"{'c-form-group--error': (hasErrorsMessage() || formGroupClasses === 'c-form-group--error') }\">\r\n  <ng-container *ngIf=\"hasFieldsetComponent(); else innerHtml\">\r\n    <ng-content select=\"desy-fieldset\"></ng-content>\r\n  </ng-container>\r\n</div>\r\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => TreeComponent),
+                        multi: true
+                    }
+                ]
+            },] }
+];
+TreeComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TreeComponent.propDecorators = {
+    idPrefix: [{ type: Input }],
+    classes: [{ type: Input }],
+    formGroupClasses: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    describedBy: [{ type: Input }],
+    expandedFirstLevel: [{ type: Input }],
+    decoupleChildFromParent: [{ type: Input }],
+    disableDefaultSearch: [{ type: Input }],
+    searchMatchValues: [{ type: Input }],
+    searchMatchValuesChange: [{ type: Output }],
+    allItems: [{ type: ContentChildren, args: [TreeItemComponent, { descendants: true },] }],
+    fieldsetComponent: [{ type: ContentChildren, args: [FieldsetComponent,] }],
+    searchBarComponent: [{ type: ContentChildren, args: [SearchBarComponent,] }],
+    innerHtml: [{ type: ViewChild, args: ['innerHtml', { static: true },] }]
+};
+__decorate([
+    DesyOnInputChange('onSearchMatchValuesChange')
+], TreeComponent.prototype, "searchMatchValues", void 0);
+__decorate([
+    DesyOnInputChange('configureAllItems')
+], TreeComponent.prototype, "allItems", void 0);
+__decorate([
+    DesyContentChild({ onSetCallbackName: 'overrideFieldsetParams' })
+], TreeComponent.prototype, "fieldsetComponent", void 0);
+__decorate([
+    DesyContentChild({ onSetCallbackName: 'overrideSearchBarParams' })
+], TreeComponent.prototype, "searchBarComponent", void 0);
+
 class ConditionDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -3085,6 +4061,30 @@ ConditionDirective.propDecorators = {
     items: [{ type: Input }]
 };
 
+class TreeItemsGeneratorComponent {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.content);
+    }
+}
+TreeItemsGeneratorComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush
+            },] }
+];
+TreeItemsGeneratorComponent.ctorParameters = () => [
+    { type: ViewContainerRef }
+];
+TreeItemsGeneratorComponent.propDecorators = {
+    content: [{ type: ViewChild, args: ['content', { static: true },] }],
+    items: [{ type: Input }],
+    itemTemplate: [{ type: Input }]
+};
+
 class ModalButtonPrimaryComponent extends ContentBaseComponent {
     constructor() {
         super(...arguments);
@@ -3600,6 +4600,8 @@ class HeaderOffcanvasComponent {
         if (this.isOpen()) {
             this.dialogService.closeDialog(this.dialog);
             this.dialog = null;
+            const elementToFocus = document.getElementById('header-offcanvas-button');
+            elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
         }
     }
     isOpen() {
@@ -3624,14 +4626,15 @@ class HeaderOffcanvasComponent {
 }
 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: 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 = () => [
@@ -3798,11 +4801,47 @@ class NavComponent extends AccessibilityComponent {
     getIdPrefix() {
         return this.idPrefix ? this.idPrefix : 'nav-item';
     }
+    movePrevious(event, currentIndex) {
+        event.preventDefault();
+        const items = this.getItemList();
+        let nextIndex = currentIndex - 1;
+        while (nextIndex >= 0 && !this.isFocusableItem(items[nextIndex])) {
+            nextIndex--;
+        }
+        if (nextIndex < items.length) {
+            const itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+            if (itemElem) {
+                itemElem.focus();
+            }
+        }
+    }
+    moveNext(event, currentIndex) {
+        event.preventDefault();
+        const items = this.getItemList();
+        let nextIndex = currentIndex + 1;
+        while (nextIndex < items.length && !this.isFocusableItem(items[nextIndex])) {
+            nextIndex++;
+        }
+        if (nextIndex < items.length) {
+            const itemElem = document.getElementById(this.getItemId(items[nextIndex], nextIndex));
+            if (itemElem) {
+                itemElem.focus();
+            }
+        }
+    }
+    simulateClick(event, item, index) {
+        event.preventDefault();
+        const element = document.getElementById(this.getItemId(item, index));
+        element === null || element === void 0 ? void 0 : element.click();
+    }
+    isFocusableItem(item) {
+        return !item.active && !item.disabled;
+    }
 }
 NavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-nav',
-                template: "<ng-template #innerHtml>\r\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n    <li>\r\n        <span *ngIf=\"item.active\"\r\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n               [attr.id]=\"getItemId(item, i)\"\r\n               [attr.title]=\"item.title ? item.title : null\"\r\n               [attr.role]=\"item.role ? item.role : null\"\r\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n               [attr.tabindex]=\"item.tabindex\"\r\n               (click)=\"onClick($event, item)\">\r\n              <strong>\r\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n              </strong>\r\n          </span>\r\n          <a *ngIf=\"!item.active && item.href\"\r\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n             [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n             [attr.id]=\"getItemId(item, i)\"\r\n             [attr.title]=\"item.title ? item.title : null\"\r\n             [attr.role]=\"item.role ? item.role : null\"\r\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n             (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n             (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 = {
@@ -3832,7 +4871,7 @@ class HeaderSubnavComponent extends AccessibilityComponent {
 HeaderSubnavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-header-subnav',
-                template: "<ng-template #templateNav>\r\n  <ng-content select=\"desy-nav\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #templateContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div class=\"hidden lg:flex items-center\" *ngIf=\"hasSubnavItems(); else noItems\">\r\n  <div class=\"ml-3 py-2 relative border-r border-l border-neutral-base\">\r\n    <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 = {
@@ -3861,7 +4900,7 @@ class HeaderDropdownComponent extends AccessibilityComponent {
 HeaderDropdownComponent.decorators = [
     { type: 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 = {
@@ -3869,11 +4908,15 @@ HeaderDropdownComponent.propDecorators = {
     classesContainer: [{ type: Input }],
     classesTooltip: [{ type: Input }],
     classes: [{ type: Input }],
-    nav: [{ type: ContentChildren, args: [NavComponent,] }]
+    nav: [{ type: ContentChildren, args: [NavComponent,] }],
+    contentComponent: [{ type: ContentChildren, args: [ContentComponent,] }]
 };
 __decorate([
     DesyContentChild({ onSetCallbackName: 'overrideNavParams' })
-], HeaderDropdownComponent.prototype, "nav", void 0);
+], HeaderDropdownComponent.prototype, "nav", void 0);
+__decorate([
+    DesyContentChild()
+], HeaderDropdownComponent.prototype, "contentComponent", void 0);
 
 class SkipLinkComponent extends AccessibilityComponent {
     constructor(changeDetectorRef) {
@@ -4306,7 +5349,7 @@ class MenuVerticalComponent extends AccessibilityComponent {
         else {
             const idPrefix = this.idPrefix ? this.idPrefix : 'nav-item';
             if (i === 0) {
-                return idPrefix;
+                return idPrefix + '-0';
             }
             else {
                 return idPrefix + '-' + i;
@@ -5374,63 +6417,6 @@ __decorate([
     DesyContentChild()
 ], TableComponent.prototype, "headerComponent", void 0);
 
-class 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
-     */
-    static containsAnyWordFrom(target, text, fullWord) {
-        let words = [];
-        let includes = false;
-        const simplifiedTarget = this.getSimplifiedString(target);
-        if (text && text.split(' ').length > 1) {
-            words = text.split(' ');
-        }
-        words.push(text);
-        words.forEach(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
-     */
-    static getSimplifiedString(str) {
-        let 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;
-    }
-}
-
 var OrderBy;
 (function (OrderBy) {
     OrderBy["none"] = "none";
@@ -6799,7 +7785,7 @@ class PaginationComponent extends AccessibilityComponent {
 PaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-pagination',
-                template: "<div [attr.id]=\"id ? id : null\" [class]=\"['lg:flex lg:flex-wrap lg:align-center', classesContainer] | makeHtmlList\">\r\n  <ng-container *ngIf=\"hasSelect\">\r\n    <p class=\"w-full mb-xs text-sm text-neutral-dark\">\r\n      Selecciona una p\u00E1gina para cargar datos\r\n    </p>\r\n    <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\r\n         [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n         [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n         [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n         [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n         [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n         [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n         [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n         [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n         [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n         [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n         [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n         [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n      <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\r\n                   [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\r\n                   classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\r\n      <desy-listbox [id]=\"id + '-listbox'\"\r\n                    [idPrefix]=\"idPrefix\"\r\n                    [text]=\"'P\u00E1gina ' + getActiveItemText()\"\r\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\r\n                    [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 = {
@@ -7278,6 +8264,11 @@ DesyFormsModule.decorators = [
                     DateInputDayComponent,
                     DateInputMonthComponent,
                     DateInputYearComponent,
+                    TreeComponent,
+                    TreeSubComponent,
+                    TreeItemComponent,
+                    TreeCheckboxComponent,
+                    TreeItemsGeneratorComponent,
                     ConditionDirective,
                 ],
                 imports: [
@@ -7314,6 +8305,10 @@ DesyFormsModule.decorators = [
                     DateInputDayComponent,
                     DateInputMonthComponent,
                     DateInputYearComponent,
+                    TreeComponent,
+                    TreeSubComponent,
+                    TreeItemComponent,
+                    TreeItemsGeneratorComponent,
                     ConditionDirective
                 ]
             },] }
@@ -7508,6 +8503,67 @@ DesyViewsModule.decorators = [
             },] }
 ];
 
+class ToggleOffStateComponent extends AccessibilityComponent {
+}
+ToggleOffStateComponent.decorators = [
+    { type: 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: ViewChild, args: ['contentTemplateOffState', { static: true },] }],
+    classes: [{ type: Input }]
+};
+
+class ToggleOnStateComponent extends AccessibilityComponent {
+}
+ToggleOnStateComponent.decorators = [
+    { type: 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: ViewChild, args: ['contentTemplateOnState', { static: true },] }],
+    classes: [{ type: Input }]
+};
+
+class ToggleComponent extends AccessibilityComponent {
+    constructor() {
+        super(...arguments);
+        this.clickEvent = new EventEmitter();
+        this.pressedChange = new EventEmitter();
+    }
+    onClick(event) {
+        this.pressed = !this.pressed;
+        this.pressedChange.emit(this.pressed);
+        this.clickEvent.emit(event);
+    }
+}
+ToggleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'desy-toggle',
+                template: "<!-- toggle -->\r\n<div class=\"relative\">\r\n  <button *ngIf=\"isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\r\n          \r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"'switch'\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n\r\n  <button *ngIf=\"!isSwitch\"\r\n          (click)=\"onClick($event)\"\r\n          [type]=\"'button'\"\r\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\r\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\r\n          [attr.id]=\"id ? id : null\" \r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\" \r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" \r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\" \r\n          [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" \r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \r\n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \r\n          [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n    \r\n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\r\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\r\n  </button>\r\n</div>\r\n<!-- /toggle -->"
+            },] }
+];
+ToggleComponent.propDecorators = {
+    id: [{ type: Input }],
+    isSwitch: [{ type: Input }],
+    pressed: [{ type: Input }],
+    classes: [{ type: Input }],
+    clickEvent: [{ type: Output }],
+    pressedChange: [{ type: Output }],
+    contentTemplateOnState: [{ type: ContentChildren, args: [ToggleOnStateComponent,] }],
+    contentTemplateOffState: [{ type: ContentChildren, args: [ToggleOffStateComponent,] }]
+};
+__decorate([
+    DesyContentChild()
+], ToggleComponent.prototype, "contentTemplateOnState", void 0);
+__decorate([
+    DesyContentChild()
+], ToggleComponent.prototype, "contentTemplateOffState", void 0);
+
 class DesyButtonsModule {
 }
 DesyButtonsModule.decorators = [
@@ -7519,7 +8575,10 @@ DesyButtonsModule.decorators = [
                     ListboxComponent,
                     PillComponent,
                     ListboxItemComponent,
-                    ListboxLabelComponent
+                    ListboxLabelComponent,
+                    ToggleComponent,
+                    ToggleOnStateComponent,
+                    ToggleOffStateComponent
                 ],
                 imports: [
                     CommonModule,
@@ -7534,7 +8593,10 @@ DesyButtonsModule.decorators = [
                     ListboxComponent,
                     PillComponent,
                     ListboxItemComponent,
-                    ListboxLabelComponent
+                    ListboxLabelComponent,
+                    ToggleComponent,
+                    ToggleOnStateComponent,
+                    ToggleOffStateComponent
                 ]
             },] }
 ];
@@ -7823,5 +8885,5 @@ DesyAngularModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, summaryTextOrSummaryHtmlRequiredFunction, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, CustomInnerContentDirective as ɵba, TooltipComponent as ɵbb, TemplateDrivenWrapperComponent as ɵbc, DateInputDividerComponent as ɵbd, DateInputDayComponent as ɵbe, DateInputMonthComponent as ɵbf, DateInputYearComponent as ɵbg, FocusClickedCellDirective as ɵbh, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, HeaderNavigationItemComponent as ɵk, MenubaritemDirective as ɵl, RowDirective as ɵm, CellDirective as ɵn, TabItemComponent as ɵo, PanelComponent as ɵp, SharedModule as ɵq, TextOrHtmlRequiredComponent as ɵr, InnerHtmlPipe as ɵs, MakeHtmlListPipe as ɵt, ExternalHrefPipe as ɵu, AttributeChangeDirective as ɵv, InnerContentDirective as ɵw, ClickOutsideDirective as ɵx, ContentChangeDirective as ɵy, ContentEmptyDirective as ɵz };
+export { AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AlertService, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, ButtonLoaderComponent, CharacterCountComponent, CheckboxItemComponent, CheckboxesComponent, CollapsibleComponent, ConditionDirective, ContentComponent, DateInputComponent, DefinitionComponent, DescriptionComponent, DescriptionItemComponent, DescriptionListComponent, DesyAngularModule, DesyButtonsModule, DesyCommonsModule, DesyFormsModule, DesyModalsModule, DesyNavModule, DesyPaginationModule, DesyTablesModule, DesyViewsModule, DetailsComponent, DialogComponent, DialogService, DropdownComponent, ErrorMessageComponent, ErrorSummaryComponent, ErrorSummaryItemComponent, FieldsetComponent, FileUploadComponent, FooterComponent, FooterMetaComponent, FooterMetaItemComponent, FooterNavigationComponent, FooterNavigationItemComponent, HeaderComponent, HeaderDropdownComponent, HeaderNavigationComponent, HeaderOffcanvasButtonComponent, HeaderOffcanvasCloseButtonComponent, HeaderOffcanvasComponent, HeaderSubnavComponent, HintComponent, IconComponent, InputComponent, InputGroupComponent, InputGroupDividerComponent, InputGroupInputComponent, InputGroupSelectComponent, ItemComponent, ItemContentBottomComponent, ItemContentRightComponent, ItemItemComponent, LabelComponent, LegendComponent, ListboxComponent, ListboxItemComponent, ListboxLabelComponent, MediaObjectComponent, MenuHorizontalComponent, MenuHorizontalItemComponent, MenuVerticalComponent, MenuVerticalItemComponent, MenuVerticalItemSubComponent, MenuVerticalItemSubItemComponent, MenubarComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSubitemComponent, MenubarSubsubitemComponent, ModalButtonPrimaryComponent, ModalButtonSecondaryComponent, ModalComponent, NavComponent, NavItemComponent, NotificationComponent, NotificationItemComponent, OptionComponent, OptionGroupComponent, OrderBy, PaginationComponent, PillComponent, RadioItemComponent, RadiosComponent, SearchBarComponent, SelectComponent, SkipLinkComponent, SpinnerComponent, StatusComponent, StatusItemComponent, TableAdvancedComponent, TableAdvancedHeaderCellComponent, TableAdvancedHeaderComponent, TableAdvancedRowCellComponent, TableAdvancedRowComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TermComponent, TextareaComponent, TitleComponent, TooltipContentComponent, TreeComponent, TreeItemComponent, TreeItemsGeneratorComponent, TreeSubComponent, summaryTextOrSummaryHtmlRequiredFunction, AccessibilityComponent as ɵa, AccessibilityAndContentRequiredComponent as ɵb, AttributeChangeDirective as ɵba, InnerContentDirective as ɵbb, ClickOutsideDirective as ɵbc, ContentChangeDirective as ɵbd, ContentEmptyDirective as ɵbe, CustomInnerContentDirective as ɵbf, TooltipComponent as ɵbg, TemplateDrivenWrapperComponent as ɵbh, DateInputDividerComponent as ɵbi, DateInputDayComponent as ɵbj, DateInputMonthComponent as ɵbk, DateInputYearComponent as ɵbl, FocusClickedCellDirective as ɵbm, AccessibilityAndTextOrHtmlRequiredComponent as ɵc, DesyContentChild as ɵd, ContentBaseComponent as ɵe, FormFieldComponent as ɵf, SelectItemComponent as ɵg, DesyOnInputChange as ɵh, InputGroupItemComponent as ɵi, DateInputItemComponent as ɵj, ITreeItem as ɵk, TreeCheckboxComponent as ɵl, HeaderNavigationItemComponent as ɵm, MenubaritemDirective as ɵn, RowDirective as ɵo, CellDirective as ɵp, TabItemComponent as ɵq, PanelComponent as ɵr, ToggleComponent as ɵs, ToggleOnStateComponent as ɵt, ToggleOffStateComponent as ɵu, SharedModule as ɵv, TextOrHtmlRequiredComponent as ɵw, InnerHtmlPipe as ɵx, MakeHtmlListPipe as ɵy, ExternalHrefPipe as ɵz };
 //# sourceMappingURL=desy-angular.js.map