desy-angular 5.0.0 → 5.0.1

package/fesm2015/desy-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, EventEmitter, HostBinding, Output, ElementRef, HostListener, QueryList, ViewChildren, ContentChildren, ChangeDetectorRef, 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, ComponentFactoryResolver, ViewContainerRef, 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';
@@ -323,96 +323,97 @@ class DropdownComponent extends AccessibilityAndContentRequiredComponent {
     constructor() {
         super(...arguments);
         this.clickEvent = new EventEmitter();
-        this.show = false;
+        this.isOpen = false;
         this.clickOutsideEnabled = false;
     }
     ngOnInit() {
-        setTimeout(() => {
-            let contentTooltip;
-            if (this.dropdownContent && this.dropdownContent.nativeElement) {
-                contentTooltip = this.dropdownContent.nativeElement;
-                contentTooltip.style.display = 'block';
-                this.tippyProperties = {
-                    placement: 'bottom-start',
-                    inlinePositioning: true,
-                    content: contentTooltip,
-                    allowHTML: true,
-                    trigger: 'click',
-                    hideOnClick: true,
-                    interactive: true,
-                    arrow: false,
-                    offset: [0, -10],
-                    theme: '',
-                    plugins: [{
-                            name: 'hideOnEsc',
-                            defaultValue: true,
-                            fn({ hide }) {
-                                function onKeyDown(event) {
-                                    if (event.key === DropdownComponent.KEY_CODE_ESC) {
-                                        hide();
-                                    }
-                                }
-                                return {
-                                    onShow() {
-                                        document.addEventListener('keydown', onKeyDown);
-                                    },
-                                    onHide() {
-                                        document.removeEventListener('keydown', onKeyDown);
-                                    },
-                                };
-                            },
-                        }],
-                    role: false,
-                    aria: {
-                        content: 'auto',
-                    },
-                    onShown(instance) {
-                        const firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
-                        if (firstFocusable) {
-                            setTimeout(() => firstFocusable.focus());
+        let contentTooltip;
+        if (this.dropdownContent && this.dropdownContent.nativeElement) {
+            contentTooltip = this.dropdownContent.nativeElement;
+            contentTooltip.style.display = 'block';
+            this.tippyProperties = {
+                placement: 'bottom-start',
+                inlinePositioning: true,
+                content: contentTooltip,
+                allowHTML: true,
+                trigger: 'click',
+                hideOnClick: true,
+                interactive: true,
+                arrow: false,
+                offset: [0, -10],
+                theme: '',
+                plugins: [
+                    {
+                        name: 'hideOnPopperBlur',
+                        defaultValue: true,
+                        fn(instance) {
+                            return {
+                                onCreate() {
+                                    instance.popper.addEventListener('focusout', (event) => {
+                                        if (instance.props.hideOnPopperBlur &&
+                                            event.relatedTarget &&
+                                            !instance.popper.contains(event.relatedTarget)) {
+                                            instance.hide();
+                                        }
+                                    });
+                                },
+                            };
                         }
+                    },
+                    {
+                        name: 'hideOnEsc',
+                        defaultValue: true,
+                        fn({ hide }) {
+                            function onKeyDown(event) {
+                                if (event.key === DropdownComponent.KEY_CODE_ESC) {
+                                    hide();
+                                }
+                            }
+                            return {
+                                onShow() {
+                                    document.addEventListener('keydown', onKeyDown);
+                                },
+                                onHide() {
+                                    document.removeEventListener('keydown', onKeyDown);
+                                },
+                            };
+                        },
                     }
-                };
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (this.isDisabled()) { // se pone disable se cierra el dropdown
-            this.closeDropdown();
+                ],
+                role: false,
+                aria: {
+                    content: 'auto',
+                },
+                onShown(instance) {
+                    const firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
+                    if (firstFocusable) {
+                        firstFocusable.focus();
+                    }
+                }
+            };
         }
     }
     onClick(event) {
         if (!this.isDisabled()) {
-            this.toggleDropdown();
             this.clickEvent.emit(event);
         }
     }
-    toggleDropdown() {
-        this.show = !this.show;
-        setTimeout(() => this.clickOutsideEnabled = this.show);
-    }
-    closeDropdown() {
-        this.show = false;
-        this.clickOutsideEnabled = false;
+    setOpen(isOpen) {
+        this.isOpen = isOpen;
     }
     isDisabled() {
         return this.disabled ? true : null;
     }
-    onKeyDown(event) {
-        if (event.key === DropdownComponent.KEY_CODE_ESC) {
-            this.closeDropdown();
-        }
-    }
 }
 DropdownComponent.KEY_CODE_ESC = 'Escape';
 DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-dropdown',
-                template: "<!-- dropdown -->\r\n<div [class]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <button *ngIf=\"tippyProperties\" aria-haspopup=\"true\" (click)=\"onClick($event)\" ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"show\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"html\" [deleteContentIfEmpty]=\"false\">\r\n      <ng-content></ng-content>\r\n    </span>    \r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\"\r\n       [desyClickOutside]=\"clickOutsideEnabled\" (clickOutside)=\"closeDropdown()\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n<!-- /dropdown -->\r\n"
+                template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\"\r\n     (desyContentEmpty)=\"setOpen(false)\" (desyContentNotEmpty)=\"setOpen(true)\">\r\n  <button #desyContentEmptyIgnore (click)=\"onClick($event)\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n          [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n          aria-haspopup=\"true\"\r\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.id]=\"id ? id : null\"\r\n          [attr.role]=\"role ? role : null\"\r\n          [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n          [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n    <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <span *ngIf=\"hiddenText\" #desyContentEmptyIgnore class=\"sr-only\">{{ hiddenText }}</span>\r\n  <div #dropdownContent style=\"display: none;\"\r\n       [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 DropdownComponent.propDecorators = {
-    dropdownContent: [{ type: ViewChild, args: ['dropdownContent', { read: ElementRef },] }],
+    dropdownContent: [{ type: ViewChild, args: ['dropdownContent', { read: ElementRef, static: true },] }],
     id: [{ type: Input }],
     disabled: [{ type: Input }],
     hiddenText: [{ type: Input }],
@@ -420,8 +421,7 @@ DropdownComponent.propDecorators = {
     classesTooltip: [{ type: Input }],
     classes: [{ type: Input }],
     caller: [{ type: Input }],
-    clickEvent: [{ type: Output }],
-    onKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+    clickEvent: [{ type: Output }]
 };
 
 /**
@@ -442,26 +442,16 @@ class StringUtils {
     }
 }
 
-class ListboxLabelComponent {
-    constructor() {
-        this.isInit = false;
-    }
-    ngOnInit() {
-        setTimeout(() => this.isInit = !!this.content);
-    }
-    getContent() {
-        return this.isInit ? this.content : null;
-    }
+class ListboxLabelComponent extends ContentBaseComponent {
 }
 ListboxLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-listbox-label',
-                template: "<ng-template #childComponentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
+                template: "<ng-template #contentTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n"
             },] }
 ];
 ListboxLabelComponent.propDecorators = {
-    classes: [{ type: Input }],
-    content: [{ type: ViewChild, args: ['childComponentTemplate',] }]
+    classes: [{ type: Input }]
 };
 
 class ListboxItemComponent extends AccessibilityComponent {
@@ -533,51 +523,70 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
         super(...arguments);
         this.itemsChange = new EventEmitter();
         this.activeItemChange = new EventEmitter();
-        this.isListVisible = false;
+        this.isListVisible = false; // Indica si la lista se está mostrando
     }
     ngOnInit() {
-        setTimeout(() => {
-            if (this.listboxContent && this.listboxContent.nativeElement) {
-                const contentTooltip = this.listboxContent.nativeElement;
-                this.tippyProperties = {
-                    placement: 'bottom-start',
-                    inlinePositioning: true,
-                    content: contentTooltip,
-                    allowHTML: true,
-                    trigger: 'click',
-                    hideOnClick: true,
-                    interactive: true,
-                    arrow: false,
-                    offset: [0, -10],
-                    theme: '',
-                    plugins: [{
-                            name: 'hideOnEsc',
-                            defaultValue: true,
-                            fn({ hide }) {
-                                function onKeyDown(event) {
-                                    if (event.key === ListboxComponent.KEY_CODE_ESC) {
-                                        hide();
-                                    }
-                                }
-                                return {
-                                    onShow() {
-                                        document.addEventListener('keydown', onKeyDown);
-                                    },
-                                    onHide() {
-                                        document.removeEventListener('keydown', onKeyDown);
-                                    },
-                                };
-                            },
-                        }],
-                    role: false,
-                    aria: {
-                        content: 'auto',
+        const listboxButtonElement = this.listboxButton.nativeElement;
+        if (this.listboxContent && this.listboxContent.nativeElement) {
+            const contentTooltip = this.listboxContent.nativeElement;
+            this.tippyProperties = {
+                placement: 'bottom-start',
+                inlinePositioning: true,
+                content: contentTooltip,
+                allowHTML: true,
+                trigger: 'click',
+                hideOnClick: true,
+                interactive: true,
+                arrow: false,
+                offset: [0, -10],
+                theme: '',
+                plugins: [
+                    {
+                        name: 'hideOnPopperBlur',
+                        defaultValue: true,
+                        fn(instance) {
+                            return {
+                                onCreate() {
+                                    instance.popper.addEventListener('focusout', (event) => {
+                                        if (instance.props.hideOnPopperBlur &&
+                                            event.relatedTarget &&
+                                            !instance.popper.contains(event.relatedTarget)) {
+                                            instance.hide();
+                                        }
+                                    });
+                                },
+                            };
+                        }
                     },
-                    onShow: this.onListShow.bind(this),
-                    onHidden: this.onListClose.bind(this)
-                };
-            }
-        });
+                    {
+                        name: 'hideOnEsc',
+                        defaultValue: true,
+                        fn({ hide }) {
+                            function onKeyDown(event) {
+                                if (event.key === ListboxComponent.KEY_CODE_ESC) {
+                                    hide();
+                                    listboxButtonElement.focus();
+                                }
+                            }
+                            return {
+                                onShow() {
+                                    document.addEventListener('keydown', onKeyDown);
+                                },
+                                onHide() {
+                                    document.removeEventListener('keydown', onKeyDown);
+                                },
+                            };
+                        },
+                    }
+                ],
+                role: false,
+                aria: {
+                    content: 'auto',
+                },
+                onShow: this.onListShow.bind(this),
+                onHidden: this.onListClose.bind(this)
+            };
+        }
     }
     ngOnChanges() {
         setTimeout(() => {
@@ -664,11 +673,11 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
         if (this.doesChangeButtonText && !this.isMultiselectable && activeItems.length > 0) {
             const activeItemOption = this.listboxOptions.find((item, index) => index === activeItems[0].index);
             if (activeItemOption) {
-                this.buttonContent = activeItemOption.nativeElement.innerHTML;
+                this.buttonContentHtml = activeItemOption.nativeElement.innerHTML;
             }
         }
         else {
-            this.buttonContent = this.html ? this.html : this.text;
+            this.buttonContentHtml = this.html ? this.html : null;
         }
         // Si hay cambios, se emiten
         if (hasActiveItemChange) {
@@ -684,9 +693,6 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
     }
     onListClose() {
         this.isListVisible = false;
-        if (this.listboxButton) {
-            this.listboxButton.nativeElement.focus();
-        }
     }
     onListFocus() {
         const activeItemsData = this.getActiveItemsData();
@@ -760,22 +766,18 @@ class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponent {
     getLabelContent(label) {
         return label.html ? label.html : `<p>${StringUtils.escapeHtml(label.text)}</p>`;
     }
-    isButtonContentHtml() {
-        const activeItemsData = this.getActiveItemsData();
-        return !!(this.doesChangeButtonText && !this.isMultiselectable && activeItemsData.length > 0 ? true : this.html);
-    }
 }
 ListboxComponent.KEY_CODE_ESC = 'Escape';
 ListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-listbox',
-                template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div *ngIf=\"labelComponent\" [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent.classes] | makeHtmlList\">\r\n    <ng-container *ngTemplateOutlet=\"labelComponent.getContent()\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"!labelComponent && label\" [id]=\"id + '-label'\" [class]=\"['mb-sm', label.classes] | makeHtmlList\"\r\n    [desyInnerContent]=\"getLabelContent(label)\" [isHtml]=\"true\">\r\n  </div>\r\n  <button *ngIf=\"tippyProperties\"\r\n          #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\"\r\n              [desyInnerContent]=\"buttonContent\" [isHtml]=\"isButtonContentHtml()\">\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\"\r\n            [desyInnerContent]=\"!item['content'] ? (item.html ? item.html : item.text) : null\"\r\n            [isHtml]=\"!item['content'] ? item.html : undefined\" [deleteContentIfEmpty]=\"false\">\r\n          <ng-container *ngTemplateOutlet=\"item['content']\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
+                template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\r\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\r\n  </div>\r\n  <button #button [id]=\"id + '-button'\"\r\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n          ngxTippy [tippyProps]=\"tippyProperties\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n          [attr.aria-role] = \"role ? role : null\"\r\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n          [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n          [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n          [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n          [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n          [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n          [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: text }\"></ng-container>\r\n        </span>\r\n    <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n  </button>\r\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n    <ul *ngIf=\"itemList\"\r\n        #list [id]=\"id\"\r\n        (focus)=\"onListFocus()\"\r\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n        (keydown.home)=\"moveFocus(0, $event)\"\r\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n        (keydown.space)=\"onSpace($event)\"\r\n        role=\"listbox\"\r\n        tabindex=\"-1\"\r\n        class=\"text-sm outline-none\"\r\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n        [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n        [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n        [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n        [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n        [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n        [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n        [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n      <ng-container *ngFor=\"let item of itemList; index as index\">\r\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n            [id]=\"getItemId(item, index)\"\r\n            [attr.title]=\"item.title ? item.title : null\"\r\n\r\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n            [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n            [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n            [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n            [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n            [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n            [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n            [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n            [attr.aria-checked]=\"item.active\"\r\n            [attr.aria-selected]=\"item.active\">\r\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ul>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 ListboxComponent.propDecorators = {
-    listboxButton: [{ type: ViewChild, args: ['button', { read: ElementRef },] }],
+    listboxButton: [{ type: ViewChild, args: ['button', { read: ElementRef, static: true },] }],
     listboxList: [{ type: ViewChild, args: ['list', { read: ElementRef },] }],
-    listboxContent: [{ type: ViewChild, args: ['tooltip', { read: ElementRef },] }],
+    listboxContent: [{ type: ViewChild, args: ['tooltip', { read: ElementRef, static: true },] }],
     listboxOptions: [{ type: ViewChildren, args: ['option', { read: ElementRef },] }],
     labelComponent: [{ type: ContentChildren, args: [ListboxLabelComponent,] }],
     itemComponentList: [{ type: ContentChildren, args: [ListboxItemComponent,] }],
@@ -4345,7 +4347,7 @@ class MenuVerticalComponent extends AccessibilityComponent {
 MenuVerticalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menu-vertical',
-                template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\" [routerLinkActive]=\"item.routerLinkActiveClasses\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
+                template: "<!--\r\n  Template para ser utilizado tanto por los items como por los subitems:\r\n  - item: Item que representa\r\n  - index: indice del item en la lista\r\n  - id: identificador del item\r\n  - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n  <ng-container *ngIf=\"item\">\r\n    <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n           (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{\r\n            'underline': hasUnderline,\r\n            'hover:text-primary-base hover:underline': !item.disabled,\r\n            'no-underline pointer-events-none': item.disabled,\r\n            'font-bold': item.active\r\n           }\"\r\n           [attr.title]=\"item.title\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-current]=\"item.active ? 'page' : null\"\r\n           [attr.aria-disabled]=\"item.disabled\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n           [attr.aria-label]=\"item.ariaLabel\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n           [attr.aria-hidden]=\"item.ariaHidden\"\r\n           [attr.aria-controls]=\"item.ariaControls\"\r\n           [attr.aria-live]=\"item.ariaLive\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n           [attr.disabled]=\"item.disabled\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n        </a>\r\n        <ng-template #hasRouterLink>\r\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n          <a [attr.id]=\"id\"\r\n             (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n             [ngClass]=\"{\r\n              'underline': hasUnderline,\r\n              'hover:text-primary-base hover:underline': !item.disabled,\r\n              'no-underline pointer-events-none': item.disabled,\r\n              'font-bold': item.active\r\n             }\"\r\n             [attr.title]=\"item.title\"\r\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n             [attr.target]=\"item.target ? item.target : null\"\r\n             [attr.aria-current]=\"item.active ? 'page' : null\"\r\n             [attr.aria-disabled]=\"item.disabled\"\r\n             [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n             [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n             [attr.aria-label]=\"item.ariaLabel\"\r\n             [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n             [attr.aria-hidden]=\"item.ariaHidden\"\r\n             [attr.aria-controls]=\"item.ariaControls\"\r\n             [attr.aria-live]=\"item.ariaLive\"\r\n             [attr.aria-expanded]=\"item.ariaExpanded\"\r\n             [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n             [attr.disabled]=\"item.disabled\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n          </a>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #notHref>\r\n            <span [attr.id]=\"id\"\r\n                  (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n                  [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n                  [attr.title]=\"item.title\"\r\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\r\n                  [attr.aria-disabled]=\"item.disabled\"\r\n                  [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n                  [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n                  [attr.aria-label]=\"item.ariaLabel\"\r\n                  [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n                  [attr.aria-hidden]=\"item.ariaHidden\"\r\n                  [attr.aria-controls]=\"item.ariaControls\"\r\n                  [attr.aria-live]=\"item.ariaLive\"\r\n                  [attr.aria-expanded]=\"item.ariaExpanded\"\r\n                  [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n                  [attr.disabled]=\"item.disabled\">\r\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n            </span>\r\n      </ng-template>\r\n      <ng-container *ngIf=\"isRoot && sub\">\r\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n            [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n            [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n            [attr.aria-label]=\"sub.ariaLabel\"\r\n            [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n            [attr.aria-hidden]=\"sub.ariaHidden\"\r\n            [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n            [attr.aria-controls]=\"sub.ariaControls\"\r\n            [attr.aria-current]=\"sub.ariaCurrent\"\r\n            [attr.aria-live]=\"sub.ariaLive\"\r\n            [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n            [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n            [attr.tabindex]=\"sub.tabindex\">\r\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                           item: subItem,\r\n                           id: getSubItemId(item, index, subIndex),\r\n                           index: subIndex,\r\n                           isRoot: false\r\n                          }\">\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n        <div *ngIf=\"!getSubItems(sub)\"\r\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n             [id]=\"'sub-' + id\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </li>\r\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n      <div class=\"sr-only\">Separador</div>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n     [attr.role]=\"(role ? role : null)\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n     [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n     [attr.aria-hidden]=\"ariaHidden\"\r\n     [attr.aria-disabled]=\"ariaDisabled\"\r\n     [attr.aria-controls]=\"ariaControls\"\r\n     [attr.aria-current]=\"ariaCurrent\"\r\n     [attr.aria-live]=\"ariaLive\"\r\n     [attr.aria-expanded]=\"ariaExpanded\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup\"\r\n     [attr.tabindex]=\"tabindex\">\r\n  <ul class=\"text-base\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n",
                 animations: [
                     trigger('displayMenuVertical', [
                         state('void', style({
@@ -5120,7 +5122,7 @@ class MenubarComponent extends AccessibilityComponent {
 MenubarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'desy-menubar',
-                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
+                template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n     [attr.role]=\"role ? role : null\"\r\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n     [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n  <ng-container *ngIf=\"getLabelRef()\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n      (focusin)=\"handleMenuFocusIn()\"\r\n      (focusout)=\"handleMenuFocusOut($event)\"\r\n      [ngClass]=\"{ 'focus': isFocused }\"\r\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n        <a *ngIf=\"item.sub\" #link\r\n           role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n                (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n          </span>\r\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n        </a>\r\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [routerLink]=\"item.routerLink\"\r\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n           [fragment]=\"item.fragment\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n           role=\"menuitem\"\r\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n           (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n           [id]=\"getItemId(item, itemIndex)\"\r\n           [href]=\"item.href | externalHref\"\r\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n           [attr.title]=\"item.title ? item.title : null\"\r\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n           [attr.target]=\"item.target ? item.target : null\"\r\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n        </a>\r\n\r\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n            [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n            <ng-container [ngSwitch]=\"subItem.role\">\r\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n                    <ng-container *ngIf=\"subsubitem\">\r\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\r\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n                          (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n                      </li>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ul>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n                  (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  [attr.aria-checked]=\"!!subItem.checked\"\r\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n              </li>\r\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n                  class=\"my-sm border-b border-neutral-base\">\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n"
             },] }
 ];
 MenubarComponent.ctorParameters = () => [