desy-angular 14.0.0 → 14.0.1

package/esm2022/lib/desy-nav/components/menu-vertical/menu-vertical.component.mjs

@@ -51,8 +51,8 @@ export class MenuVerticalComponent extends AccessibilityComponent {
         const subItems = sub instanceof MenuVerticalItemSubComponent ? sub.itemComponents.toArray() : sub.items;
         return subItems && subItems.length > 0 ? subItems : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenuVerticalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenuVerticalComponent, selector: "desy-menu-vertical", inputs: { id: "id", idPrefix: "idPrefix", items: "items", hasUnderline: "hasUnderline", classes: "classes" }, queries: [{ propertyName: "itemComponents", predicate: MenuVerticalItemComponent }], usesInheritance: true, ngImport: i0, template: "<!--\n  Template para ser utilizado tanto por los items como por los subitems:\n  - item: Item que representa\n  - index: indice del item en la lista\n  - id: identificador del item\n  - isRoot: si pertenece al nivel raiz\n-->\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\n  <ng-template #noActiveTemplate><ng-container  *desyCustomInnerContent=\"{component: item, html: getItemHtml(item), text: item.text }\"></ng-container></ng-template>\n  <ng-container *ngIf=\"item\">\n    <li class=\"my-base break-inside-avoid-column\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\n           [href]=\"item.href | externalHref\"\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n           [ngClass]=\"{\n            'underline': hasUnderline,\n            'hover:text-primary-base hover:underline': !item.disabled,\n            'no-underline pointer-events-none': item.disabled\n           }\"\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [attr.aria-current]=\"item.active ? 'page' : null\"\n           [attr.aria-disabled]=\"item.disabled\"\n           [desyAppAccessibility]=\"item\"\n           [attr.disabled]=\"item.disabled\">\n           <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n            <strong class=\"font-bold\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n           </strong>\n          </ng-container>\n        </a>\n        <ng-template #hasRouterLink>\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\n          <a [attr.id]=\"id\"\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n             [ngClass]=\"{\n              'underline': hasUnderline,\n              'hover:text-primary-base hover:underline': !item.disabled,\n              'no-underline pointer-events-none': item.disabled\n             }\"\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\n             [attr.target]=\"item.target ? item.target : null\"\n             [attr.aria-current]=\"item.active ? 'page' : null\"\n             [attr.aria-disabled]=\"item.disabled\"\n             [desyAppAccessibility]=\"item\"\n             [attr.disabled]=\"item.disabled\">\n             <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n              <strong class=\"font-bold\">\n                <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n             </strong>\n            </ng-container>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-template #notHref>\n            <span [attr.id]=\"id\"\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\n                  [attr.aria-disabled]=\"item.disabled\"\n                  [desyAppAccessibility]=\"item\"\n                  [attr.disabled]=\"item.disabled\">\n                  <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n                    <strong class=\"font-bold\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n                    </strong>\n                  </ng-container>\n                </span>\n      </ng-template>\n      <ng-container *ngIf=\"isRoot && sub\">\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\n            [desyAppAccessibility]=\"sub\">\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                           item: subItem,\n                           id: getSubItemId(item, index, subIndex),\n                           index: subIndex,\n                           isRoot: false\n                          }\">\n            </ng-container>\n          </ng-container>\n        </ul>\n        <div *ngIf=\"!getSubItems(sub)\"\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\n             [id]=\"'sub-' + id\">\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\n        </div>\n      </ng-container>\n    </li>\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\n      <div class=\"sr-only\">Separador</div>\n    </li>\n  </ng-container>\n</ng-template>\n\n<nav [ngClass]=\"classes\"\n     [attr.role]=\"(role ? role : null)\"\n     [desyAppAccessibility]=\"this\">\n  <ul class=\"text-base\">\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\n      </ng-container>\n    </ng-container>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuVerticalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuVerticalComponent, selector: "desy-menu-vertical", inputs: { id: "id", idPrefix: "idPrefix", items: "items", hasUnderline: "hasUnderline", classes: "classes" }, queries: [{ propertyName: "itemComponents", predicate: MenuVerticalItemComponent }], usesInheritance: true, ngImport: i0, template: "<!--\n  Template para ser utilizado tanto por los items como por los subitems:\n  - item: Item que representa\n  - index: indice del item en la lista\n  - id: identificador del item\n  - isRoot: si pertenece al nivel raiz\n-->\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\n  <ng-template #noActiveTemplate><ng-container  *desyCustomInnerContent=\"{component: item, html: getItemHtml(item), text: item.text }\"></ng-container></ng-template>\n  <ng-container *ngIf=\"item\">\n    <li class=\"my-base break-inside-avoid-column\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\n      <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\n        <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\n           [href]=\"item.href | externalHref\"\n           [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n           [ngClass]=\"{\n            'underline': hasUnderline,\n            'hover:text-primary-base hover:underline': !item.disabled,\n            'no-underline pointer-events-none': item.disabled\n           }\"\n           [attr.tabindex]=\"item.disabled ? -1 : null\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [attr.aria-current]=\"item.active ? 'page' : null\"\n           [attr.aria-disabled]=\"item.disabled\"\n           [desyAppAccessibility]=\"item\"\n           [attr.disabled]=\"item.disabled\">\n           <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n            <strong class=\"font-bold\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n           </strong>\n          </ng-container>\n        </a>\n        <ng-template #hasRouterLink>\n          <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\n                Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\n                Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\n                https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\n          <a [attr.id]=\"id\"\n             [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\n             [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n             [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n             [ngClass]=\"{\n              'underline': hasUnderline,\n              'hover:text-primary-base hover:underline': !item.disabled,\n              'no-underline pointer-events-none': item.disabled\n             }\"\n             [attr.tabindex]=\"item.disabled ? -1 : null\"\n             [attr.target]=\"item.target ? item.target : null\"\n             [attr.aria-current]=\"item.active ? 'page' : null\"\n             [attr.aria-disabled]=\"item.disabled\"\n             [desyAppAccessibility]=\"item\"\n             [attr.disabled]=\"item.disabled\">\n             <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n              <strong class=\"font-bold\">\n                <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n             </strong>\n            </ng-container>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-template #notHref>\n            <span [attr.id]=\"id\"\n                  [class]=\"['block px-xs', item.classes] | makeHtmlList\"\n                  [attr.tabindex]=\"item.disabled ? -1 : null\"\n                  [attr.aria-current]=\"item.active ? 'page' : null\"\n                  [attr.aria-disabled]=\"item.disabled\"\n                  [desyAppAccessibility]=\"item\"\n                  [attr.disabled]=\"item.disabled\">\n                  <ng-container *ngIf=\"item.active; else noActiveTemplate\">\n                    <strong class=\"font-bold\">\n                      <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\n                    </strong>\n                  </ng-container>\n                </span>\n      </ng-template>\n      <ng-container *ngIf=\"isRoot && sub\">\n        <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\n            [desyAppAccessibility]=\"sub\">\n          <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                           item: subItem,\n                           id: getSubItemId(item, index, subIndex),\n                           index: subIndex,\n                           isRoot: false\n                          }\">\n            </ng-container>\n          </ng-container>\n        </ul>\n        <div *ngIf=\"!getSubItems(sub)\"\n             [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\n             [id]=\"'sub-' + id\">\n          <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\n        </div>\n      </ng-container>\n    </li>\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\n      <div class=\"sr-only\">Separador</div>\n    </li>\n  </ng-container>\n</ng-template>\n\n<nav [ngClass]=\"classes\"\n     [attr.role]=\"(role ? role : null)\"\n     [desyAppAccessibility]=\"this\">\n  <ul class=\"text-base\">\n    <ng-container *ngFor=\"let item of getItems(); index as index\">\n      <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                    [ngTemplateOutletContext]=\"{  item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\n      </ng-container>\n    </ng-container>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }], animations: [
             trigger('displayMenuVertical', [
                 state('void', style({
                     opacity: '0.0',
@@ -68,7 +68,7 @@ export class MenuVerticalComponent extends AccessibilityComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenuVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuVerticalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menu-vertical', animations: [
                         trigger('displayMenuVertical', [

package/esm2022/lib/desy-nav/components/menubar/components/menubar-item/menubar-item.component.mjs

@@ -10,10 +10,10 @@ export class MenubarItemComponent extends ContentBaseComponent {
     getSubItems() {
         return this.subItems.toArray();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenubarItemComponent, selector: "desy-menubar-item", inputs: { href: "href", target: "target", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", fragment: "fragment", text: "text", html: "html", id: "id", sub: "sub", classes: "classes", titleModal: "titleModal", disabled: "disabled", active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "subItems", predicate: MenubarSubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenubarItemComponent, selector: "desy-menubar-item", inputs: { href: "href", target: "target", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", fragment: "fragment", text: "text", html: "html", id: "id", sub: "sub", classes: "classes", titleModal: "titleModal", disabled: "disabled", active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "subItems", predicate: MenubarSubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menubar-item', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { href: [{

package/esm2022/lib/desy-nav/components/menubar/components/menubar-label/menubar-label.component.mjs

@@ -2,10 +2,10 @@ import { Component, Input } from '@angular/core';
 import { ContentBaseComponent } from '../../../../../shared/components';
 import * as i0 from "@angular/core";
 export class MenubarLabelComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenubarLabelComponent, selector: "desy-menubar-label", inputs: { classes: "classes" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenubarLabelComponent, selector: "desy-menubar-label", inputs: { classes: "classes" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menubar-label', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { classes: [{

package/esm2022/lib/desy-nav/components/menubar/components/menubar-subitem/menubar-subitem.component.mjs

@@ -11,10 +11,10 @@ export class MenubarSubitemComponent extends ContentBaseComponent {
     getSubItems() {
         return this.subItems.toArray();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarSubitemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenubarSubitemComponent, selector: "desy-menubar-subitem", inputs: { text: "text", html: "html", checked: "checked", items: "items" }, outputs: { selected: "selected", checkedChange: "checkedChange" }, queries: [{ propertyName: "subItems", predicate: MenubarSubsubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarSubitemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenubarSubitemComponent, selector: "desy-menubar-subitem", inputs: { text: "text", html: "html", checked: "checked", items: "items" }, outputs: { selected: "selected", checkedChange: "checkedChange" }, queries: [{ propertyName: "subItems", predicate: MenubarSubsubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarSubitemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarSubitemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menubar-subitem', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { text: [{

package/esm2022/lib/desy-nav/components/menubar/components/menubar-subsubitem/menubar-subsubitem.component.mjs

@@ -7,10 +7,10 @@ export class MenubarSubsubitemComponent extends ContentBaseComponent {
         this.selected = new EventEmitter();
         this.checkedChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarSubsubitemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenubarSubsubitemComponent, selector: "desy-menubar-subsubitem", inputs: { html: "html", text: "text", checked: "checked" }, outputs: { selected: "selected", checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarSubsubitemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenubarSubsubitemComponent, selector: "desy-menubar-subsubitem", inputs: { html: "html", text: "text", checked: "checked" }, outputs: { selected: "selected", checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarSubsubitemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarSubsubitemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menubar-subsubitem', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { html: [{

package/esm2022/lib/desy-nav/components/menubar/directives/menubaritem.directive.mjs

@@ -19,10 +19,10 @@ export class MenubaritemDirective {
             setTimeout(() => this.contentHasBeenChecked = true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubaritemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: MenubaritemDirective, selector: "[desyMenubaritem]", outputs: { contentChanged: "contentChanged" }, queries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true, read: ElementRef }, { propertyName: "itemContentWrapper", first: true, predicate: ["itemContentWrapper"], descendants: true, read: ElementRef }, { propertyName: "popupMenu", first: true, predicate: ["popupMenu"], descendants: true, read: ElementRef }, { propertyName: "popupMenuItems", predicate: ["popupMenuItem"], descendants: true, read: ElementRef }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubaritemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MenubaritemDirective, selector: "[desyMenubaritem]", outputs: { contentChanged: "contentChanged" }, queries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true, read: ElementRef }, { propertyName: "itemContentWrapper", first: true, predicate: ["itemContentWrapper"], descendants: true, read: ElementRef }, { propertyName: "popupMenu", first: true, predicate: ["popupMenu"], descendants: true, read: ElementRef }, { propertyName: "popupMenuItems", predicate: ["popupMenuItem"], descendants: true, read: ElementRef }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubaritemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubaritemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[desyMenubaritem]'

package/esm2022/lib/desy-nav/components/menubar/menubar.component.mjs

@@ -682,14 +682,14 @@ export class MenubarComponent extends AccessibilityComponent {
         }
         return ariaChecked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MenubarComponent, selector: "desy-menubar", inputs: { idPrefix: "idPrefix", items: "items", labelRef: "labelRef", labelData: "labelData", labelText: "labelText", classes: "classes", id: "id" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange", activeSubItemChange: "activeSubItemChange" }, host: { properties: { "class": "this.classes", "class.c-menubar": "this.cfg", "attr.id": "this.id", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-hidden": "this.ariaHidden", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-controls": "this.ariaControls", "attr.aria-current": "this.ariaCurrent", "attr.aria-live": "this.ariaLive", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-errormessage": "this.ariaErrorMessage", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-modal": "this.ariaModal", "attr.aria-checked": "this.ariaChecked", "attr.aria-pressed": "this.ariaPressed", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-required": "this.ariaRequired", "attr.aria-selected": "this.ariaSelected", "attr.aria-valuemin": "this.ariaValuemin", "attr.aria-valuemax": "this.ariaValuemax", "attr.aria-valuenow": "this.ariaValuenow", "attr.aria-valuetext": "this.ariaValuetext", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-level": "this.ariaLevel", "attr.aria-multiselectable": "this.ariaMultiselectable", "attr.aria-placeholder": "this.ariaPlaceholder", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-sort": "this.ariaSort", "attr.aria-busy": "this.ariaBusy", "attr.aria-dropeffect": "this.ariaDropeffect", "attr.aria-grabbed": "this.ariaGrabbed", "attr.aria-activedescendant": "this.ariaActivedescendant", "attr.aria-atomic": "this.ariaAtomic", "attr.aria-autocomplete": "this.ariaAutocomplete", "attr.aria-braillelabel": "this.ariaBraillelabel", "attr.aria-brailleroledescription": "this.ariaBrailleroledescription", "attr.aria-colcount": "this.ariaColcount", "attr.aria-colindex": "this.ariaColindex", "attr.aria-colindextext": "this.ariaColindextext", "attr.aria-colspan": "this.ariaColspan", "attr.aria-description": "this.ariaDescription", "attr.aria-details": "this.ariaDetails", "attr.aria-flowto": "this.ariaFlowto", "attr.aria-invalid": "this.ariaInvalid", "attr.aria-keyshortcuts": "this.ariaKeyshortcuts", "attr.aria-owns": "this.ariaOwns", "attr.aria-relevant": "this.ariaRelevant", "attr.aria-roledescription": "this.ariaRoledescription", "attr.aria-rowcount": "this.ariaRowcount", "attr.aria-rowindex": "this.ariaRowindex", "attr.aria-rowindextext": "this.ariaRowindextext", "attr.aria-rowspan": "this.ariaRowspan", "attr.tabindex": "this.tabindex", "attr.title": "this.title", "attr.alt": "this.alt", "attr.lang": "this.lang", "attr.accesskey": "this.accesskey", "attr.autocomplete": "this.autocomplete", "attr.autofocus": "this.autofocus", "attr.contenteditable": "this.contenteditable", "attr.dir": "this.dir", "attr.draggable": "this.draggable", "attr.enterkeyhint": "this.enterkeyhint", "attr.hidden": "this.hidden", "attr.inputmode": "this.inputmode", "attr.spellcheck": "this.spellcheck", "attr.translate": "this.translate", "attr.aria-multiline": "this.ariaMultiline", "attr.for": "this.for", "attr.form": "this.form", "attr.headers": "this.headers", "attr.placeholder": "this.placeholder", "attr.readonly": "this.readonly", "attr.required": "this.required" } }, queries: [{ propertyName: "labelComponent", predicate: MenubarLabelComponent }, { propertyName: "itemComponentList", predicate: MenubarItemComponent }], viewQueries: [{ propertyName: "menubar", first: true, predicate: ["menubar"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: MenubaritemDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "  <ng-container *ngIf=\"getLabelRef()\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\n    </div>\n  </ng-container>\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\n      (focusin)=\"handleMenuFocusIn()\"\n      (focusout)=\"handleMenuFocusOut($event)\"\n      [ngClass]=\"{ 'focus': isFocused }\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\n        <a *ngIf=\"item.sub\" #link\n           role=\"menuitem\" aria-haspopup=\"true\" \n           [attr.aria-expanded]=\"menuData && menuData[itemIndex] ? menuData[itemIndex].open ? 'true' : 'false' : 'false'\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [desyAppAccessibility]=\"item\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper>\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n          </span>\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\n        </a>\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [routerLink]=\"item.routerLink\"\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n           [fragment]=\"item.fragment\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [href]=\"item.href | externalHref\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\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\"\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\n            [desyAppAccessibility]=\"item.sub\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\">\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n            <ng-container [ngSwitch]=\"subItem.role\">\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\n                    <ng-container *ngIf=\"subsubitem\">\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\n                      </li>\n                    </ng-container>\n                  </ng-container>\n                </ul>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\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\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  [attr.aria-checked]=\"!!subItem.checked\"\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  class=\"my-sm border-b border-neutral-base\">\n              </li>\n            </ng-container>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: i4.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i5.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "directive", type: i6.MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: i7.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i8.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenubarComponent, selector: "desy-menubar", inputs: { idPrefix: "idPrefix", items: "items", labelRef: "labelRef", labelData: "labelData", labelText: "labelText", classes: "classes", id: "id" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange", activeSubItemChange: "activeSubItemChange" }, host: { properties: { "class": "this.classes", "class.c-menubar": "this.cfg", "attr.id": "this.id", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-hidden": "this.ariaHidden", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-controls": "this.ariaControls", "attr.aria-current": "this.ariaCurrent", "attr.aria-live": "this.ariaLive", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-errormessage": "this.ariaErrorMessage", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-modal": "this.ariaModal", "attr.aria-checked": "this.ariaChecked", "attr.aria-pressed": "this.ariaPressed", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-required": "this.ariaRequired", "attr.aria-selected": "this.ariaSelected", "attr.aria-valuemin": "this.ariaValuemin", "attr.aria-valuemax": "this.ariaValuemax", "attr.aria-valuenow": "this.ariaValuenow", "attr.aria-valuetext": "this.ariaValuetext", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-level": "this.ariaLevel", "attr.aria-multiselectable": "this.ariaMultiselectable", "attr.aria-placeholder": "this.ariaPlaceholder", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-sort": "this.ariaSort", "attr.aria-busy": "this.ariaBusy", "attr.aria-dropeffect": "this.ariaDropeffect", "attr.aria-grabbed": "this.ariaGrabbed", "attr.aria-activedescendant": "this.ariaActivedescendant", "attr.aria-atomic": "this.ariaAtomic", "attr.aria-autocomplete": "this.ariaAutocomplete", "attr.aria-braillelabel": "this.ariaBraillelabel", "attr.aria-brailleroledescription": "this.ariaBrailleroledescription", "attr.aria-colcount": "this.ariaColcount", "attr.aria-colindex": "this.ariaColindex", "attr.aria-colindextext": "this.ariaColindextext", "attr.aria-colspan": "this.ariaColspan", "attr.aria-description": "this.ariaDescription", "attr.aria-details": "this.ariaDetails", "attr.aria-flowto": "this.ariaFlowto", "attr.aria-invalid": "this.ariaInvalid", "attr.aria-keyshortcuts": "this.ariaKeyshortcuts", "attr.aria-owns": "this.ariaOwns", "attr.aria-relevant": "this.ariaRelevant", "attr.aria-roledescription": "this.ariaRoledescription", "attr.aria-rowcount": "this.ariaRowcount", "attr.aria-rowindex": "this.ariaRowindex", "attr.aria-rowindextext": "this.ariaRowindextext", "attr.aria-rowspan": "this.ariaRowspan", "attr.tabindex": "this.tabindex", "attr.title": "this.title", "attr.alt": "this.alt", "attr.lang": "this.lang", "attr.accesskey": "this.accesskey", "attr.autocomplete": "this.autocomplete", "attr.autofocus": "this.autofocus", "attr.contenteditable": "this.contenteditable", "attr.dir": "this.dir", "attr.draggable": "this.draggable", "attr.enterkeyhint": "this.enterkeyhint", "attr.hidden": "this.hidden", "attr.inputmode": "this.inputmode", "attr.spellcheck": "this.spellcheck", "attr.translate": "this.translate", "attr.aria-multiline": "this.ariaMultiline", "attr.for": "this.for", "attr.form": "this.form", "attr.headers": "this.headers", "attr.placeholder": "this.placeholder", "attr.readonly": "this.readonly", "attr.required": "this.required" } }, queries: [{ propertyName: "labelComponent", predicate: MenubarLabelComponent }, { propertyName: "itemComponentList", predicate: MenubarItemComponent }], viewQueries: [{ propertyName: "menubar", first: true, predicate: ["menubar"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: MenubaritemDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "  <ng-container *ngIf=\"getLabelRef()\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\n    </div>\n  </ng-container>\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\n      (focusin)=\"handleMenuFocusIn()\"\n      (focusout)=\"handleMenuFocusOut($event)\"\n      [ngClass]=\"{ 'focus': isFocused }\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\n        <a *ngIf=\"item.sub\" #link\n           role=\"menuitem\" aria-haspopup=\"true\" \n           [attr.aria-expanded]=\"menuData && menuData[itemIndex] ? menuData[itemIndex].open ? 'true' : 'false' : 'false'\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [desyAppAccessibility]=\"item\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper>\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n          </span>\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\n        </a>\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [routerLink]=\"item.routerLink\"\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n           [fragment]=\"item.fragment\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [href]=\"item.href | externalHref\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\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\"\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\n            [desyAppAccessibility]=\"item.sub\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\">\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n            <ng-container [ngSwitch]=\"subItem.role\">\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\n                    <ng-container *ngIf=\"subsubitem\">\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\n                      </li>\n                    </ng-container>\n                  </ng-container>\n                </ul>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\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\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  [attr.aria-checked]=\"!!subItem.checked\"\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  class=\"my-sm border-b border-neutral-base\">\n              </li>\n            </ng-container>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: i4.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i5.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "directive", type: i6.MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: i7.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i8.ExternalHrefPipe, name: "externalHref" }] }); }
 }
 __decorate([
     DesyContentChild(),
     __metadata("design:type", MenubarLabelComponent)
 ], MenubarComponent.prototype, "labelComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MenubarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenubarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-menubar', template: "  <ng-container *ngIf=\"getLabelRef()\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\n      <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\n    <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\n      <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\n    </div>\n  </ng-container>\n  <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\n      (focusin)=\"handleMenuFocusIn()\"\n      (focusout)=\"handleMenuFocusOut($event)\"\n      [ngClass]=\"{ 'focus': isFocused }\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\n    <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n      <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\n        <a *ngIf=\"item.sub\" #link\n           role=\"menuitem\" aria-haspopup=\"true\" \n           [attr.aria-expanded]=\"menuData && menuData[itemIndex] ? menuData[itemIndex].open ? 'true' : 'false' : 'false'\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [desyAppAccessibility]=\"item\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\n          <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper>\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n          </span>\n          <svg class=\"inline-block -mr-2  align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\n        </a>\n        <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [routerLink]=\"item.routerLink\"\n           [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n           [fragment]=\"item.fragment\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n        <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\n           role=\"menuitem\"\n           (click)=\"handleMenuItemClick($event, itemIndex)\"\n           (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n           (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n           (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\n           [id]=\"getItemId(item, itemIndex)\"\n           [href]=\"item.href | externalHref\"\n           [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\n           [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--has-selection': item.active}\"\n           [attr.disabled]=\"item.disabled ? item.disabled : null\"\n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\n           [attr.target]=\"item.target ? item.target : null\"\n           [desyAppAccessibility]=\"item\">\n          <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\n        </a>\n\n        <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\n            [ngStyle]=\"getPopupStyle(itemIndex)\"\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\"\n            [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\n            [desyAppAccessibility]=\"item.sub\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\">\n          <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n            <ng-container [ngSwitch]=\"subItem.role\">\n              <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li *ngSwitchCase=\"'group'\" role=\"none\">\n                <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                    [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\n                  <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\n                    <ng-container *ngIf=\"subsubitem\">\n                      <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\"  tabindex=\"-1\"\n                          [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\n                          (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\n                          (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\n                          (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\n                          [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\n                          class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                        <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\n                      </li>\n                    </ng-container>\n                  </ng-container>\n                </ul>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\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\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\n                  (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n                  (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n                  (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  [attr.aria-checked]=\"!!subItem.checked\"\n                  class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\n                <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\n              </li>\n              <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\n                  [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n                  class=\"my-sm border-b border-neutral-base\">\n              </li>\n            </ng-container>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { idPrefix: [{

package/esm2022/lib/desy-nav/components/nav/nav-item/nav-item.component.mjs

@@ -7,10 +7,10 @@ export class NavItemComponent extends ContentBaseComponent {
         this.clickEvent = new EventEmitter();
         this.activeChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavItemComponent, selector: "desy-nav-item", inputs: { id: "id", active: "active", classes: "classes", titleModal: "titleModal", href: "href", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", fragment: "fragment", target: "target", disabled: "disabled", divider: "divider" }, outputs: { clickEvent: "clickEvent", activeChange: "activeChange" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavItemComponent, selector: "desy-nav-item", inputs: { id: "id", active: "active", classes: "classes", titleModal: "titleModal", href: "href", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", fragment: "fragment", target: "target", disabled: "disabled", divider: "divider" }, outputs: { clickEvent: "clickEvent", activeChange: "activeChange" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-nav-item', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { id: [{

package/esm2022/lib/desy-nav/components/nav/nav.component.mjs

@@ -90,10 +90,10 @@ export class NavComponent extends AccessibilityComponent {
     isFocusableItem(item) {
         return !item.active && !item.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavComponent, selector: "desy-nav", inputs: { hasNav: "hasNav", id: "id", idPrefix: "idPrefix", items: "items", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, queries: [{ propertyName: "itemComponentList", predicate: NavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #innerHtml>\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\n    <ng-template #noStrong>\n      <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n    </ng-template>\n    <li>\n          <a *ngIf=\"item.href\"\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\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\"\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n             [attr.id]=\"getItemId(item, i)\"\n             [desyAppAccessibility]=\"item\"\n             [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\n             (keydown.arrowDown)=\"moveNext($event, i)\"\n             (click)=\"onClick($event, item)\"\n             (keydown.space)=\"simulateClick($event, item, i)\"\n             (keydown.enter)=\"simulateClick($event, item, i)\">\n             <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n          <a *ngIf=\"!item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\" [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\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\"\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n               [attr.id]=\"getItemId(item, i)\"\n               [desyAppAccessibility]=\"item\"\n               [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\n               (keydown.arrowDown)=\"moveNext($event, i)\"\n               (click)=\"onClick($event, item)\"\n               (keydown.space)=\"simulateClick($event, item, i)\"\n               (keydown.enter)=\"simulateClick($event, item, i)\">\n               <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n                <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n    </li>\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\n        <div class=\"sr-only\">Separador</div>\n    </li>\n  </ng-container>\n</ng-template>\n\n\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\n    [class]=\"['text-sm', classes] | makeHtmlList\"\n    [desyAppAccessibility]=\"this\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [id]=\"id\"\n     [desyAppAccessibility]=\"this\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n    </ul>\n  </nav>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavComponent, selector: "desy-nav", inputs: { hasNav: "hasNav", id: "id", idPrefix: "idPrefix", items: "items", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, queries: [{ propertyName: "itemComponentList", predicate: NavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #innerHtml>\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\n    <ng-template #noStrong>\n      <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n    </ng-template>\n    <li>\n          <a *ngIf=\"item.href\"\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\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\"\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n             [attr.id]=\"getItemId(item, i)\"\n             [desyAppAccessibility]=\"item\"\n             [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\n             (keydown.arrowDown)=\"moveNext($event, i)\"\n             (click)=\"onClick($event, item)\"\n             (keydown.space)=\"simulateClick($event, item, i)\"\n             (keydown.enter)=\"simulateClick($event, item, i)\">\n             <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n          <a *ngIf=\"!item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\" [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\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\"\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n               [attr.id]=\"getItemId(item, i)\"\n               [desyAppAccessibility]=\"item\"\n               [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\n               (keydown.arrowDown)=\"moveNext($event, i)\"\n               (click)=\"onClick($event, item)\"\n               (keydown.space)=\"simulateClick($event, item, i)\"\n               (keydown.enter)=\"simulateClick($event, item, i)\">\n               <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n                <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n    </li>\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\n        <div class=\"sr-only\">Separador</div>\n    </li>\n  </ng-container>\n</ng-template>\n\n\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\n    [class]=\"['text-sm', classes] | makeHtmlList\"\n    [desyAppAccessibility]=\"this\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [id]=\"id\"\n     [desyAppAccessibility]=\"this\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n    </ul>\n  </nav>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-nav', template: "<ng-template #innerHtml>\n  <ng-container *ngFor=\"let item of getItemList(); index as i\">\n    <ng-template #noStrong>\n      <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n    </ng-template>\n    <li>\n          <a *ngIf=\"item.href\"\n             [href]=\"item.href | externalHref\" [target]=\"item.target\"\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\"\n             [ngClass]=\"{'pointer-events-none': item.disabled}\"\n             [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n             [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n             [attr.id]=\"getItemId(item, i)\"\n             [desyAppAccessibility]=\"item\"\n             [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n             (keydown.arrowUp)=\"movePrevious($event, i)\"\n             (keydown.arrowDown)=\"moveNext($event, i)\"\n             (click)=\"onClick($event, item)\"\n             (keydown.space)=\"simulateClick($event, item, i)\"\n             (keydown.enter)=\"simulateClick($event, item, i)\">\n             <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n          <a *ngIf=\"!item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\" [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\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\"\n               [ngClass]=\"{'pointer-events-none': item.disabled}\"\n               [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n               [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n               [attr.id]=\"getItemId(item, i)\"\n               [desyAppAccessibility]=\"item\"\n               [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n               (keydown.arrowUp)=\"movePrevious($event, i)\"\n               (keydown.arrowDown)=\"moveNext($event, i)\"\n               (click)=\"onClick($event, item)\"\n               (keydown.space)=\"simulateClick($event, item, i)\"\n               (keydown.enter)=\"simulateClick($event, item, i)\">\n               <strong class=\"font-bold\" *ngIf=\"item.active; else noStrong\">\n                <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n            <svg *ngIf=\"item.disabled\" viewBox=\"0 0 140 140\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"inline-block align-middle flex-initial 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>\n          </a>\n    </li>\n    <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\n        <div class=\"sr-only\">Separador</div>\n    </li>\n  </ng-container>\n</ng-template>\n\n\n<ul *ngIf=\"!hasNav; else wrapIntoNav\"\n    [class]=\"['text-sm', classes] | makeHtmlList\"\n    [desyAppAccessibility]=\"this\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [id]=\"id\"\n     [desyAppAccessibility]=\"this\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n    </ul>\n  </nav>\n</ng-template>\n" }]
         }], propDecorators: { hasNav: [{

package/esm2022/lib/desy-nav/components/notification/notification-item/notification-item.component.mjs

@@ -2,10 +2,10 @@ import { Component, Input } from '@angular/core';
 import { ContentBaseComponent } from '../../../../shared/components';
 import * as i0 from "@angular/core";
 export class NotificationItemComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NotificationItemComponent, selector: "desy-notification-item", inputs: { href: "href", target: "target", routerLink: "routerLink", fragment: "fragment", id: "id" }, usesInheritance: true, ngImport: i0, template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotificationItemComponent, selector: "desy-notification-item", inputs: { href: "href", target: "target", routerLink: "routerLink", fragment: "fragment", id: "id" }, usesInheritance: true, ngImport: i0, template: '<ng-template #contentTemplate><ng-content></ng-content></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'desy-notification-item',

package/esm2022/lib/desy-nav/components/notification/notification.component.mjs

@@ -40,8 +40,8 @@ export class NotificationComponent extends AccessibilityComponent {
     getItems() {
         return this.itemCompontents && this.itemCompontents.length > 0 ? this.itemCompontents.toArray() : this.items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", titleNotification: "titleNotification", description: "description", content: "content", items: "items", icon: "icon", type: "type", isDismissible: "isDismissible", headingLevel: "headingLevel" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "itemCompontents", predicate: NotificationItemComponent }], usesInheritance: true, ngImport: i0, template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type==='success' ? 'c-notification c-notification--success' : type==='alert' ? 'c-notification c-notification--alert' : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [desyAppAccessibility]=\"this\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"type && !iconComponent && !icon\">\n      <ng-container [ngSwitch]=\"getType()\">\n        <svg *ngSwitchCase=\"'success'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-success-dark\" aria-label=\"\u00C9xito\" focusable=\"false\" role=\"img\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-alert-base\" aria-label=\"Error\" focusable=\"false\" role=\"img\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-primary-base\" aria-label=\"Informaci\u00F3n\" focusable=\"false\" role=\"img\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || titleNotification\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <div *ngIf=\"descriptionComponent || description && description.html\" [ngClass]=\"descriptionComponent?.classes || description?.classes\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: descriptionComponent,\n          html: description ? description.html : null\n        }\"></ng-container>\n      </div>\n      <p *ngIf=\"description && description.text && !description.html && !descriptionComponent\" [ngClass]=\"description?.classes\">\n        <ng-container *desyCustomInnerContent=\"{\n          text: description ? description.text : null\n        }\"></ng-container>\n      </p>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [desyAppAccessibility]=\"item\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [desyAppAccessibility]=\"item\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <div *ngIf=\"contentComponent || content && content.html\" [ngClass]=\"contentComponent?.classes || content?.classes || 'text-sm'\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null\n        }\"></ng-container>\n      </div>\n      <p *ngIf=\"content && content.text && !content.html && !contentComponent\" [ngClass]=\"content?.classes || 'text-sm'\">\n        <ng-container *desyCustomInnerContent=\"{\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\n        <button (click)=\"dismiss()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar notificaci\u00F3n\" type=\"button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", titleNotification: "titleNotification", description: "description", content: "content", items: "items", icon: "icon", type: "type", isDismissible: "isDismissible", headingLevel: "headingLevel" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "itemCompontents", predicate: NotificationItemComponent }], usesInheritance: true, ngImport: i0, template: "<div [attr.id]=\"id ? id : null\" [class]=\"(classes ? 'c-notification ' + classes : type==='success' ? 'c-notification c-notification--success' : type==='alert' ? 'c-notification c-notification--alert' : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [desyAppAccessibility]=\"this\">\n  <div *ngIf=\"iconComponent || icon || type\" class=\"h-full mr-base\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n    <ng-container *ngIf=\"type && !iconComponent && !icon\">\n      <ng-container [ngSwitch]=\"getType()\">\n        <svg *ngSwitchCase=\"'success'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-success-dark\" aria-label=\"\u00C9xito\" focusable=\"false\" role=\"img\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-alert-base\" aria-label=\"Error\" focusable=\"false\" role=\"img\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-primary-base\" aria-label=\"Informaci\u00F3n\" focusable=\"false\" role=\"img\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n      <ng-container *ngIf=\"titleComponent || titleNotification\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-titleNotification' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : titleNotification.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: titleNotification ? titleNotification.html : null,\n            text: titleNotification ? titleNotification.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <div *ngIf=\"descriptionComponent || description && description.html\" [ngClass]=\"descriptionComponent?.classes || description?.classes\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: descriptionComponent,\n          html: description ? description.html : null\n        }\"></ng-container>\n      </div>\n      <p *ngIf=\"description && description.text && !description.html && !descriptionComponent\" [ngClass]=\"description?.classes\">\n        <ng-container *desyCustomInnerContent=\"{\n          text: description ? description.text : null\n        }\"></ng-container>\n      </p>\n      <ul *ngIf=\"(itemCompontents && itemCompontents.length > 0) || items\">\n        <ng-container *ngFor=\"let item of getItems(); index as i\">\n          <li *ngIf=\"item.routerLink || item.href\">\n            <a *ngIf=\"item.routerLink\" class=\"c-link\"\n               [routerLink]=\"item.routerLink\"\n               [fragment]=\"item.fragment\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [desyAppAccessibility]=\"item\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n            <a *ngIf=\"!item.routerLink && item.href\" class=\"c-link\"\n               [href]=\"item.href | externalHref\"\n               [target]=\"item.target\"\n               [ngClass]=\"{'c-link--alert': type==='alert'}\"\n               [attr.id]=\"item.id ? item.id : null\"\n               [desyAppAccessibility]=\"item\">\n              <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n            </a>\n          </li>\n          <li *ngIf=\"!item.routerLink && !item.href\">\n            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n          </li>\n        </ng-container>\n      </ul>\n      <div *ngIf=\"contentComponent || content && content.html\" [ngClass]=\"contentComponent?.classes || content?.classes || 'text-sm'\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null\n        }\"></ng-container>\n      </div>\n      <p *ngIf=\"content && content.text && !content.html && !contentComponent\" [ngClass]=\"content?.classes || 'text-sm'\">\n        <ng-container *desyCustomInnerContent=\"{\n          text: content ? content.text : null\n        }\"></ng-container>\n      </p>\n    </div>\n    <ng-container *ngIf=\"isDismissible\">\n      <div class=\"absolute top-0 right-0 p-sm\">\n        <button (click)=\"dismiss()\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar notificaci\u00F3n\" type=\"button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 pointer-events-none\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\n        </button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i6.ExternalHrefPipe, name: "externalHref" }], animations: [
             trigger('displayNotification', [
                 state('void', style({
                     opacity: '0.0',
@@ -74,7 +74,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", IconComponent)
 ], NotificationComponent.prototype, "iconComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-notification', animations: [
                         trigger('displayNotification', [

package/esm2022/lib/desy-nav/components/skip-link/skip-link.component.mjs

@@ -42,10 +42,10 @@ export class SkipLinkComponent extends AccessibilityComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SkipLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SkipLinkComponent, selector: "desy-skip-link", inputs: { html: "html", text: "text", fragment: "fragment", classes: "classes", id: "id" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-content></ng-content>\n</a>\n\n<a *ngIf=\"!hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkipLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkipLinkComponent, selector: "desy-skip-link", inputs: { html: "html", text: "text", fragment: "fragment", classes: "classes", id: "id" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-content></ng-content>\n</a>\n\n<a *ngIf=\"!hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SkipLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkipLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-skip-link', template: "<a *ngIf=\"hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-content></ng-content>\n</a>\n\n<a *ngIf=\"!hasContent\"\n   [routerLink]=\"[]\" [fragment]=\"fragment ? fragment : 'content'\"\n   [class]=\"getClassNames()\"\n   [attr.id]=\"id ? id : null\"\n   [desyAppAccessibility]=\"this\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n</a>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { html: [{

package/esm2022/lib/desy-nav/desy-nav.module.mjs

@@ -59,8 +59,8 @@ import { SkipLinkComponent } from './components/skip-link/skip-link.component';
 import { DynamicHeadingDirective } from './directives/dynamic-heading.directive';
 import * as i0 from "@angular/core";
 export class DesyNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DesyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: DesyNavModule, declarations: [BreadcrumbsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DesyNavModule, declarations: [BreadcrumbsComponent,
             BreadcrumbsItemComponent,
             ErrorSummaryComponent,
             ErrorSummaryItemComponent,
@@ -170,12 +170,12 @@ export class DesyNavModule {
             HeaderAdvancedDropdownComponent,
             HeaderAdvancedSubComponent,
             DynamicHeadingDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DesyNavModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesyNavModule, imports: [CommonModule,
             SharedModule,
             DesyCommonsModule,
             DesyButtonsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DesyNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesyNavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/desy-nav/directives/dynamic-heading.directive.mjs

@@ -24,10 +24,10 @@ export class DynamicHeadingDirective {
             this.renderer.appendChild(this.el.nativeElement.parentElement, this.currentElement);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DynamicHeadingDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: DynamicHeadingDirective, selector: "[desyDynamicHeading]", inputs: { classes: "classes", desyDynamicHeading: "desyDynamicHeading" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicHeadingDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DynamicHeadingDirective, selector: "[desyDynamicHeading]", inputs: { classes: "classes", desyDynamicHeading: "desyDynamicHeading" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DynamicHeadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicHeadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[desyDynamicHeading]'