desy-angular 5.1.1 → 5.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3292,6 +3292,7 @@ class TreeItemComponent extends AccessibilityComponent {
3292
3292
  this.quitFocus = new EventEmitter();
3293
3293
  this.isFocus = false;
3294
3294
  this.isHover = false;
3295
+ this._matchesValidText = false; // True si el contenido del item encaja con los criterios de búsqueda y se está filtrando
3295
3296
  }
3296
3297
  ngOnChanges(changes) {
3297
3298
  if (this.sub && this.sub.itemList) {
@@ -3535,6 +3536,7 @@ class TreeItemComponent extends AccessibilityComponent {
3535
3536
  const itemText = this.hiddenWrapper.nativeElement.textContent;
3536
3537
  matches = SearchUtils.containsAnyWordFrom(itemText, value);
3537
3538
  }
3539
+ this._matchesValidText = value ? matches : false;
3538
3540
  return matches;
3539
3541
  }
3540
3542
  getKey() {
@@ -3557,6 +3559,9 @@ class TreeItemComponent extends AccessibilityComponent {
3557
3559
  }
3558
3560
  return parentKey;
3559
3561
  }
3562
+ isActive() {
3563
+ return this.active || this._matchesValidText;
3564
+ }
3560
3565
  /*
3561
3566
  * Métodos privados
3562
3567
  */
@@ -3574,7 +3579,7 @@ TreeItemComponent._treeItemKeySuffix = 0; // Sufijo estático para generar siemp
3574
3579
  TreeItemComponent.decorators = [
3575
3580
  { type: Component, args: [{
3576
3581
  selector: 'desy-tree-item',
3577
- template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n [id]=\"id\"\r\n [class]=\"'c-tree__item focus:outline-none'\"\r\n [ngClass]=\"{\r\n 'ml-4': subLevel === 0,\r\n 'ml-8': subLevel !== 0,\r\n 'c-tree__item--focus': isFocus && !sub,\r\n 'c-tree__item--hover': isHover && !sub,\r\n 'font-bold': active && subLevel === 0\r\n }\"\r\n (focusin)=\"handleItemFocus(true, !sub)\"\r\n (focusout)=\"handleItemFocus(false, !sub)\"\r\n (mouseover)=\"handleItemHover(true, !sub)\"\r\n (mouseout)=\"handleItemHover(false, !sub)\"\r\n (keydown.home)=\"handleHome($event, !sub)\"\r\n (keydown.end)=\"handleEnd($event, !sub)\"\r\n (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n role=\"treeitem\"\r\n [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n [attr.aria-current]=\"active && subLevel === 0 ? 'page' : null\"\r\n [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n [id]=\"id\"\r\n [class]=\"['block', classes] | makeHtmlList\"\r\n [ngClass]=\"{'font-bold': active}\"\r\n [attr.title]=\"title ? title : null\"\r\n [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n [attr.role]=\"role ? role : 'tree'\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (active ? 'page' : null)\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n <div class=\"font-bold\" *ngIf=\"active; else checkbox\">\r\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n </div>\r\n </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n (focusin)=\"handleItemFocus(true)\"\r\n (focusout)=\"handleItemFocus(false)\"\r\n (mouseover)=\"handleItemHover(true)\"\r\n (mouseout)=\"handleItemHover(false)\"\r\n (keydown.home)=\"handleHome($event)\"\r\n (keydown.end)=\"handleEnd($event)\"\r\n (keydown.arrowup)=\"handleArrowUp($event)\"\r\n (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n (keydown.arrowright)=\"handleArrowRight($event)\"\r\n (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n </span>\r\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n <li class=\"hidden\">\r\n <div #hiddenWrapper>\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </div>\r\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n <desy-tree-checkbox [name]=\"name ? name : parentName\"\r\n [id]=\"getId()\"\r\n [value]=\"value\"\r\n [classes]=\"classes\"\r\n [type]=\"type\"\r\n [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n [hasError]=\"inheritedHasError\"\r\n [disabled]=\"disabled\"\r\n [hasDividers]=\"hasDividers\"\r\n [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n [isIndeterminate]=\"isIndeterminate\"\r\n [(indeterminateChecked)]=\"indeterminateChecked\"\r\n (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n [labelComponent]=\"label\"\r\n [hintComponent]=\"hint\"\r\n\r\n [role]=\"role\"\r\n [ariaLabel]=\"ariaLabel\"\r\n [ariaDescribedBy]=\"ariaDescribedBy\"\r\n [ariaLabelledBy]=\"ariaLabelledBy\"\r\n [ariaHidden]=\"ariaHidden\"\r\n [ariaDisabled]=\"ariaDisabled\"\r\n [ariaControls]=\"ariaControls\"\r\n [ariaCurrent]=\"ariaCurrent\"\r\n [ariaLive]=\"ariaLive\"\r\n [ariaExpanded]=\"ariaExpanded\"\r\n [ariaErrorMessage]=\"ariaErrorMessage\"\r\n [ariaHasPopup]=\"ariaHasPopup\"\r\n [ariaModal]=\"ariaModal\"\r\n [tabindex]=\"tabindex\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n <ng-content select=\"desy-label\"></ng-content>\r\n <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n",
3582
+ template: "<li *ngIf=\"allParentsExpanded && !isHidden(); else hidden\"\r\n [id]=\"id\"\r\n [class]=\"'c-tree__item focus:outline-none'\"\r\n [ngClass]=\"{\r\n 'ml-4': subLevel === 0,\r\n 'ml-8': subLevel !== 0,\r\n 'c-tree__item--focus': isFocus && !sub,\r\n 'c-tree__item--hover': isHover && !sub\r\n }\"\r\n (focusin)=\"handleItemFocus(true, !sub)\"\r\n (focusout)=\"handleItemFocus(false, !sub)\"\r\n (mouseover)=\"handleItemHover(true, !sub)\"\r\n (mouseout)=\"handleItemHover(false, !sub)\"\r\n (keydown.home)=\"handleHome($event, !sub)\"\r\n (keydown.end)=\"handleEnd($event, !sub)\"\r\n (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\r\n (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\r\n (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\r\n (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\r\n role=\"treeitem\"\r\n [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\"\r\n [attr.aria-current]=\"isActive() && subLevel === 0 ? 'page' : null\"\r\n [attr.disabled]=\"disabled && subLevel === 0 ? 'disabled' : null\"\r\n [attr.aria-disabled]=\"disabled && subLevel === 0 ? 'true' : null\"\r\n [attr.tabIndex]=\"disabled && subLevel === 0 ? '-1' : null\">\r\n <div *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\r\n [id]=\"id\"\r\n [class]=\"['block', classes] | makeHtmlList\"\r\n [attr.title]=\"title ? title : null\"\r\n [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n\r\n [attr.role]=\"role ? role : 'tree'\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : (disabled ? 'true' : null)\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : (isActive() ? 'page' : null)\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : (disabled ? '-1' : null)\">\r\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n </div>\r\n</li>\r\n\r\n<ng-template #childrenTree>\r\n <div *ngIf=\"sub; else checkbox\" class=\"w-full h-full\"\r\n [ngClass]=\"{'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub}\"\r\n (focusin)=\"handleItemFocus(true)\"\r\n (focusout)=\"handleItemFocus(false)\"\r\n (mouseover)=\"handleItemHover(true)\"\r\n (mouseout)=\"handleItemHover(false)\"\r\n (keydown.home)=\"handleHome($event)\"\r\n (keydown.end)=\"handleEnd($event)\"\r\n (keydown.arrowup)=\"handleArrowUp($event)\"\r\n (keydown.arrowdown)=\"handleArrowDown($event)\"\r\n (keydown.arrowright)=\"handleArrowRight($event)\"\r\n (keydown.arrowLeft)=\"handleArrowLeft($event)\">\r\n <div [class]=\"['w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left', classes] | makeHtmlList\"\r\n\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\r\n <svg (click)=\"expandSub(false)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__minus\"><path fill=\"currentColor\" d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\"/></svg>\r\n <svg (click)=\"expandSub(true)\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" class=\"c-tree__plus\"><path fill=\"currentColor\" d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\"/></svg>\r\n </span>\r\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n</ng-template>\r\n\r\n<!-- Se incorpora el contenido m\u00EDnimo para funcionar con el objetivo de mejorar el rendimiento -->\r\n<ng-template #hidden>\r\n <li class=\"hidden\">\r\n <div #hiddenWrapper>\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </div>\r\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\r\n </li>\r\n</ng-template>\r\n\r\n<ng-template #checkbox>\r\n <desy-tree-checkbox [name]=\"name ? name : parentName\"\r\n [id]=\"getId()\"\r\n [value]=\"value\"\r\n [classes]=\"classes\"\r\n [type]=\"type\"\r\n [(checked)]=\"checked\" (checkedChange)=\"handleCheckboxChange($event)\"\r\n [hasError]=\"inheritedHasError\"\r\n [disabled]=\"disabled\"\r\n [hasDividers]=\"hasDividers\"\r\n [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\r\n [isIndeterminate]=\"isIndeterminate\"\r\n [(indeterminateChecked)]=\"indeterminateChecked\"\r\n (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\r\n\r\n [labelComponent]=\"label\"\r\n [hintComponent]=\"hint\"\r\n\r\n [role]=\"role\"\r\n [ariaLabel]=\"ariaLabel\"\r\n [ariaDescribedBy]=\"ariaDescribedBy\"\r\n [ariaLabelledBy]=\"ariaLabelledBy\"\r\n [ariaHidden]=\"ariaHidden\"\r\n [ariaDisabled]=\"ariaDisabled\"\r\n [ariaControls]=\"ariaControls\"\r\n [ariaCurrent]=\"ariaCurrent\"\r\n [ariaLive]=\"ariaLive\"\r\n [ariaExpanded]=\"ariaExpanded\"\r\n [ariaErrorMessage]=\"ariaErrorMessage\"\r\n [ariaHasPopup]=\"ariaHasPopup\"\r\n [ariaModal]=\"ariaModal\"\r\n [tabindex]=\"tabindex\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </desy-tree-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n <div class=\"font-bold\" *ngIf=\"isActive(); else contentLabel\">\r\n <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\r\n </div>\r\n <ng-content select=\"desy-hint\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentLabel>\r\n <ng-content select=\"desy-label\"></ng-content>\r\n</ng-template>\r\n",
3578
3583
  providers: [
3579
3584
  {
3580
3585
  provide: ITreeItem,
@@ -4812,6 +4817,11 @@ class NavComponent extends AccessibilityComponent {
4812
4817
  }
4813
4818
  }
4814
4819
  }
4820
+ simulateClick(event, item, index) {
4821
+ event.preventDefault();
4822
+ const element = document.getElementById(this.getItemId(item, index));
4823
+ element === null || element === void 0 ? void 0 : element.click();
4824
+ }
4815
4825
  isFocusableItem(item) {
4816
4826
  return !item.active && !item.disabled;
4817
4827
  }
@@ -4819,7 +4829,7 @@ class NavComponent extends AccessibilityComponent {
4819
4829
  NavComponent.decorators = [
4820
4830
  { type: Component, args: [{
4821
4831
  selector: 'desy-nav',
4822
- template: "<ng-template #innerHtml>\r\n <ng-container *ngFor=\"let item of getItemList(); index as i\">\r\n <li>\r\n <span *ngIf=\"item.active\"\r\n [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\r\n [attr.id]=\"getItemId(item, i)\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.role]=\"item.role ? item.role : null\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.tabindex]=\"item.tabindex\"\r\n (click)=\"onClick($event, item)\">\r\n <strong>\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n </strong>\r\n </span>\r\n <a *ngIf=\"!item.active && item.href\"\r\n [href]=\"item.href | externalHref\" [target]=\"item.target\"\r\n [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n [attr.id]=\"getItemId(item, i)\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.role]=\"item.role ? item.role : null\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n (desyContentEmpty)=\"handleContentEmpty(i)\"\r\n (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n (keydown.arrowDown)=\"moveNext($event, i)\"\r\n (click)=\"onClick($event, item)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n </a>\r\n <a *ngIf=\"!item.active && !item.href\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\r\n [class]=\"['flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'pointer-events-none': item.disabled}\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\r\n [attr.id]=\"getItemId(item, i)\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.role]=\"item.role ? item.role : null\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n (keydown.arrowUp)=\"movePrevious($event, i)\"\r\n (keydown.arrowDown)=\"moveNext($event, i)\"\r\n (click)=\"onClick($event, item)\"\r\n (desyContentEmpty)=\"handleContentEmpty(i)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\r\n <svg #desyContentEmptyIgnore *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle ml-sm text-neutral-base fill-current\" aria-hidden=\"true\" focusable=\"false\" ><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\"/></svg>\r\n </a>\r\n </li>\r\n <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n <div class=\"sr-only\">Separador</div>\r\n </li>\r\n </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\r\n [class]=\"['text-sm', classes] | makeHtmlList\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n</ul>\r\n<ng-template #wrapIntoNav>\r\n <nav [class]=\"['text-sm', classes] | makeHtmlList\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ul>\r\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\r\n </ul>\r\n </nav>\r\n</ng-template>\r\n"
4832
+ 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"
4823
4833
  },] }
4824
4834
  ];
4825
4835
  NavComponent.propDecorators = {
@@ -5364,20 +5374,11 @@ class MenuVerticalComponent extends AccessibilityComponent {
5364
5374
  const subItems = sub instanceof MenuVerticalItemSubComponent ? sub.itemComponents.toArray() : sub.items;
5365
5375
  return subItems && subItems.length > 0 ? subItems : null;
5366
5376
  }
5367
- focus(id, idFocus) {
5368
- const elementToQuitFocus = document.getElementById(id);
5369
- elementToQuitFocus.blur();
5370
- if (idFocus) {
5371
- const elementToFocus = document.getElementById(idFocus);
5372
- elementToFocus.tabIndex = 0;
5373
- elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
5374
- }
5375
- }
5376
5377
  }
5377
5378
  MenuVerticalComponent.decorators = [
5378
5379
  { type: Component, args: [{
5379
5380
  selector: 'desy-menu-vertical',
5380
- template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\"\r\n \r\n (click)=\"focus(id, item.fragment ? item.fragment : null)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notHref>\r\n <span [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </span>\r\n </ng-template>\r\n <ng-container *ngIf=\"isRoot && sub\">\r\n <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n [attr.aria-label]=\"sub.ariaLabel\"\r\n [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"sub.ariaHidden\"\r\n [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n [attr.aria-controls]=\"sub.ariaControls\"\r\n [attr.aria-current]=\"sub.ariaCurrent\"\r\n [attr.aria-live]=\"sub.ariaLive\"\r\n [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n [attr.tabindex]=\"sub.tabindex\">\r\n <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: subItem,\r\n id: getSubItemId(item, index, subIndex),\r\n index: subIndex,\r\n isRoot: false\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"!getSubItems(sub)\"\r\n [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n [id]=\"'sub-' + id\">\r\n <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n <div class=\"sr-only\">Separador</div>\r\n </li>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n [attr.role]=\"(role ? role : null)\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.aria-hidden]=\"ariaHidden\"\r\n [attr.aria-disabled]=\"ariaDisabled\"\r\n [attr.aria-controls]=\"ariaControls\"\r\n [attr.aria-current]=\"ariaCurrent\"\r\n [attr.aria-live]=\"ariaLive\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n [attr.tabindex]=\"tabindex\">\r\n <ul class=\"text-base\">\r\n <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</nav>\r\n",
5381
+ template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notHref>\r\n <span [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </span>\r\n </ng-template>\r\n <ng-container *ngIf=\"isRoot && sub\">\r\n <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n [attr.aria-label]=\"sub.ariaLabel\"\r\n [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"sub.ariaHidden\"\r\n [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n [attr.aria-controls]=\"sub.ariaControls\"\r\n [attr.aria-current]=\"sub.ariaCurrent\"\r\n [attr.aria-live]=\"sub.ariaLive\"\r\n [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n [attr.tabindex]=\"sub.tabindex\">\r\n <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: subItem,\r\n id: getSubItemId(item, index, subIndex),\r\n index: subIndex,\r\n isRoot: false\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"!getSubItems(sub)\"\r\n [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n [id]=\"'sub-' + id\">\r\n <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n <div class=\"sr-only\">Separador</div>\r\n </li>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n [attr.role]=\"(role ? role : null)\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.aria-hidden]=\"ariaHidden\"\r\n [attr.aria-disabled]=\"ariaDisabled\"\r\n [attr.aria-controls]=\"ariaControls\"\r\n [attr.aria-current]=\"ariaCurrent\"\r\n [attr.aria-live]=\"ariaLive\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n [attr.tabindex]=\"tabindex\">\r\n <ul class=\"text-base\">\r\n <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</nav>\r\n",
5381
5382
  animations: [
5382
5383
  trigger('displayMenuVertical', [
5383
5384
  state('void', style({