desy-angular 8.0.0 → 8.0.1

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: "16.2.7", ngImport: i0, type: MenubaritemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", 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: "16.2.8", ngImport: i0, type: MenubaritemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", 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: "16.2.7", ngImport: i0, type: MenubaritemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: MenubaritemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[desyMenubaritem]'

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

@@ -619,14 +619,14 @@ export class MenubarComponent extends AccessibilityComponent {
         }
         return ariaChecked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MenubarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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.roleData", "attr.aria-label": "this.ariaLabelData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.aria-modal": "this.ariaModalData" } }, 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\" aria-expanded=\"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--primary': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\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", "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.MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: i6.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i7.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: MenubarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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.roleData", "attr.aria-label": "this.ariaLabelData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.aria-modal": "this.ariaModalData" } }, 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\" aria-expanded=\"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--primary': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\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", "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.MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: i6.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i7.ExternalHrefPipe, name: "externalHref" }] }); }
 }
 __decorate([
     DesyContentChild(),
     __metadata("design:type", MenubarLabelComponent)
 ], MenubarComponent.prototype, "labelComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MenubarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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\" aria-expanded=\"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--primary': item.active}\"           \n           [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\n           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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--primary': item.active}\"\n           [attr.title]=\"item.title ? item.title : null\"\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           [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n           [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n           [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n           [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n           [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n           [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n           [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n           [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n           [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n           [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\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            [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\n            [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\n            [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\n            [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n            [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\n            [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\n            [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\n            [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\n            [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\n            [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\n            [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\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: function () { return [{ 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: "16.2.7", ngImport: i0, type: NavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: NavItemComponent, selector: "desy-nav-item", inputs: { id: "id", active: "active", classes: "classes", title: "title", href: "href", routerLink: "routerLink", 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: "16.2.8", ngImport: i0, type: NavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: NavItemComponent, selector: "desy-nav-item", inputs: { id: "id", active: "active", classes: "classes", title: "title", href: "href", routerLink: "routerLink", 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: "16.2.7", ngImport: i0, type: NavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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

@@ -92,10 +92,10 @@ export class NavComponent extends AccessibilityComponent {
     isFocusableItem(item) {
         return !item.active && !item.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: NavComponent, selector: "desy-nav", inputs: { hasNav: "hasNav", 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    <li>\n        <span *ngIf=\"item.active\"\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\n               [attr.id]=\"getItemId(item, i)\"\n               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n               [attr.tabindex]=\"item.tabindex\"\n               (click)=\"onClick($event, item)\">\n              <strong>\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n          </span>\n          <a *ngIf=\"!item.active && 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             [attr.title]=\"item.title ? item.title : null\"\n             [attr.role]=\"item.role ? item.role : null\"\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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.active && !item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\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               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [attr.role]=\"role ? role : null\"\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: NavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: NavComponent, selector: "desy-nav", inputs: { hasNav: "hasNav", 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    <li>\n        <span *ngIf=\"item.active\"\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\n               [attr.id]=\"getItemId(item, i)\"\n               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n               [attr.tabindex]=\"item.tabindex\"\n               (click)=\"onClick($event, item)\">\n              <strong>\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n          </span>\n          <a *ngIf=\"!item.active && 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             [attr.title]=\"item.title ? item.title : null\"\n             [attr.role]=\"item.role ? item.role : null\"\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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.active && !item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\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               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [attr.role]=\"role ? role : null\"\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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    <li>\n        <span *ngIf=\"item.active\"\n               [class]=\"['flex items-center px-base py-sm font-semibold', item.classes] | makeHtmlList\"\n               [attr.id]=\"getItemId(item, i)\"\n               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-disabled]=\"item.disabled ? item.disabled : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"hasNav ? 'true' : 'page'\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\n               [attr.tabindex]=\"item.tabindex\"\n               (click)=\"onClick($event, item)\">\n              <strong>\n                  <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n              </strong>\n          </span>\n          <a *ngIf=\"!item.active && 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             [attr.title]=\"item.title ? item.title : null\"\n             [attr.role]=\"item.role ? item.role : null\"\n             [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n             [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n             [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n             [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n             [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n             [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n             [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n             [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n             [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n             [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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.active && !item.href\"\n               [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment\"\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               [attr.title]=\"item.title ? item.title : null\"\n               [attr.role]=\"item.role ? item.role : null\"\n               [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : null\"\n               [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\n               [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\n               [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\n               [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\n               [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\n               [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\n               [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\n               [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\n               [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : 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            <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\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 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    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n    [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n    [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n    [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n    [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n    [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n    [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n    [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n    [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n    [attr.tabindex]=\"tabindex ? tabindex : null\">\n  <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n  <nav [class]=\"['text-sm', classes] | makeHtmlList\"\n     [attr.role]=\"role ? role : null\"\n     [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n     [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n     [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n     [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n     [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n     [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n     [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n     [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n     [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n     [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n     [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n     [attr.tabindex]=\"tabindex ? tabindex : null\">\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: "16.2.7", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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: "16.2.8", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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: "16.2.7", ngImport: i0, type: NotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'desy-notification-item',

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

@@ -44,8 +44,8 @@ export class NotificationComponent extends AccessibilityComponent {
         this.displayDefaultIcon = empty;
         this.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", title: "title", 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--' + type : type==='alert' ? 'c-notification c-notification--' + type : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\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=\"displayDefaultIcon && type\">\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 || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\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               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\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               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\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      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: NotificationComponent, selector: "desy-notification", inputs: { id: "id", classes: "classes", isOpen: "isOpen", title: "title", 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--' + type : type==='alert' ? 'c-notification c-notification--' + type : 'c-notification c-notification--primary') \"\n     *ngIf=\"isOpen && !isDismissing\"\n     @displayNotification\n     [attr.role]=\"role\"\n     [attr.aria-describedby]=\"ariaDescribedBy\"\n     [attr.aria-errormessage]=\"ariaErrorMessage\"\n     [attr.aria-label]=\"ariaLabel\"\n     [attr.aria-labelledby]=\"ariaLabelledBy\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-disabled]=\"ariaDisabled\"\n     [attr.aria-controls]=\"ariaControls\"\n     [attr.aria-current]=\"ariaCurrent\"\n     [attr.aria-live]=\"ariaLive\"\n     [attr.aria-expanded]=\"ariaExpanded\"\n     [attr.aria-haspopup]=\"ariaHasPopup\"\n     [attr.tabindex]=\"tabindex\">\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=\"displayDefaultIcon && type\">\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 || title\" [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h1>\n        <h2 *ngSwitchCase=\"2\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h2>\n        <h3 *ngSwitchCase=\"3\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h3>\n        <h4 *ngSwitchCase=\"4\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h4>\n        <h5 *ngSwitchCase=\"5\" [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n            [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </h5>\n        <p *ngSwitchDefault [id]=\"id ? id + '-title' : null\" tabindex=\"-1\"\n           [class]=\"['font-bold pr-base focus:outline-none focus:underline', titleComponent ? titleComponent.classes : title.classes] | makeHtmlList\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: titleComponent,\n            html: title ? title.html : null,\n            text: title ? title.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"descriptionComponent || description\">\n        <p [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\">\n          <ng-container *desyCustomInnerContent=\"{\n            component: descriptionComponent,\n            html: description ? description.html : null,\n            text: description ? description.text : null\n          }\"></ng-container>\n        </p>\n      </ng-container>\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               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\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               [attr.role]=\"item.role\"\n               [attr.ariaLabel]=\"item.ariaLabel\"\n               [attr.ariaDescribedBy]=\"item.ariaDescribedBy\"\n               [attr.ariaLabelledBy]=\"item.ariaLabelledBy\"\n               [attr.ariaHidden]=\"item.ariaHidden\"\n               [attr.ariaDisabled]=\"item.ariaDisabled\"\n               [attr.ariaControls]=\"item.ariaControls\"\n               [attr.ariaCurrent]=\"item.ariaCurrent\"\n               [attr.ariaLive]=\"item.ariaLive\"\n               [attr.ariaExpanded]=\"item.ariaExpanded\"\n               [attr.ariaErrorMessage]=\"item.ariaErrorMessage\"\n               [attr.ariaHasPopup]=\"item.ariaHasPopup\"\n               [attr.tabindex]=\"item.tabindex\">\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      <p *ngIf=\"contentComponent || content\" [class]=\"['text-sm', contentComponent ? contentComponent.classes : content.classes] | makeHtmlList\">\n        <ng-container *desyCustomInnerContent=\"{\n          component: contentComponent,\n          html: content ? content.html : null,\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\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }], animations: [
             trigger('displayNotification', [
                 state('void', style({
                     opacity: '0.0',
@@ -80,7 +80,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", IconComponent)
 ], NotificationComponent.prototype, "iconComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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

@@ -5,6 +5,20 @@ import * as i1 from "@angular/common";
 import * as i2 from "@angular/router";
 import * as i3 from "../../../shared/directives/custom-inner-content.directive";
 export class SkipLinkComponent extends AccessibilityComponent {
+    set html(value) {
+        this._html = value;
+        this.hasContent = value ? false : this.text ? false : true;
+    }
+    get html() {
+        return this._html;
+    }
+    set text(value) {
+        this._text = value;
+        this.hasContent = value ? false : true;
+    }
+    get text() {
+        return this._text;
+    }
     constructor(changeDetectorRef) {
         super();
         this.changeDetectorRef = changeDetectorRef;
@@ -23,10 +37,10 @@ export class SkipLinkComponent extends AccessibilityComponent {
             elem.scrollIntoView({ behavior: 'smooth' });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SkipLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SkipLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SkipLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\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   [attr.role]=\"role ? role : null\"\n   [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n   [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n   [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n   [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n   [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n   [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n   [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n   [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n   [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n   [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n   [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n   [attr.tabindex]=\"tabindex ? tabindex : null\"\n   (click)=\"scrollTo(fragment ? fragment : 'content')\">\n  <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n</a>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { html: [{
@@ -40,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], id: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tpcC1saW5rLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc3ktYW5ndWxhci9zcmMvbGliL2Rlc3ktbmF2L2NvbXBvbmVudHMvc2tpcC1saW5rL3NraXAtbGluay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXN5LWFuZ3VsYXIvc3JjL2xpYi9kZXN5LW5hdi9jb21wb25lbnRzL3NraXAtbGluay9za2lwLWxpbmsuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sNEJBQTRCLENBQUM7Ozs7O0FBTWxFLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxzQkFBc0I7SUFVM0QsWUFBb0IsaUJBQW9DO1FBQ3RELEtBQUssRUFBRSxDQUFDO1FBRFUsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUZ4RCxlQUFVLEdBQUcsSUFBSSxDQUFDO0lBSWxCLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxVQUFVLEdBQUcsc0tBQXNLLENBQUM7UUFDeEwsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2hCLFVBQVUsSUFBSSxHQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztTQUNsQztRQUNELE9BQU8sVUFBVSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxRQUFRLENBQUMsUUFBZ0I7UUFDdkIsTUFBTSxJQUFJLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxHQUFHLEdBQUcsUUFBUSxDQUFDLENBQUM7UUFDcEQsSUFBSSxJQUFJLEVBQUU7WUFDUixJQUFJLENBQUMsY0FBYyxDQUFDLEVBQUMsUUFBUSxFQUFFLFFBQVEsRUFBQyxDQUFDLENBQUM7U0FDM0M7SUFDSCxDQUFDOzhHQTNCVSxpQkFBaUI7a0dBQWpCLGlCQUFpQix5S0NQOUIsNG1FQXlDQTs7MkZEbENhLGlCQUFpQjtrQkFKN0IsU0FBUzsrQkFDRSxnQkFBZ0I7d0dBS2pCLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0FjY2Vzc2liaWxpdHlDb21wb25lbnR9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9jb21wb25lbnRzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZGVzeS1za2lwLWxpbmsnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tpcC1saW5rLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBTa2lwTGlua0NvbXBvbmVudCBleHRlbmRzIEFjY2Vzc2liaWxpdHlDb21wb25lbnR7XG5cbiAgQElucHV0KCkgaHRtbDogc3RyaW5nO1xuICBASW5wdXQoKSB0ZXh0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGZyYWdtZW50OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNsYXNzZXM6IHN0cmluZztcbiAgQElucHV0KCkgaWQ6IHN0cmluZztcblxuICBoYXNDb250ZW50ID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBnZXRDbGFzc05hbWVzKCk6IHN0cmluZyB7XG4gICAgbGV0IGNsYXNzTmFtZXMgPSAnYy1za2lwLWxpbmsgc3Itb25seSBhY3RpdmU6bm90LXNyLW9ubHkgZm9jdXM6bm90LXNyLW9ubHkgZm9jdXM6b3V0bGluZS1ub25lIGZvY3VzOnNoYWRvdy1vdXRsaW5lLWZvY3VzIGJsb2NrIHAtYmFzZSBiZy13YXJuaW5nLWJhc2UgdGV4dC1jZW50ZXIgdGV4dC1ibGFjayB1bmRlcmxpbmUnO1xuICAgIGlmICh0aGlzLmNsYXNzZXMpIHtcbiAgICAgIGNsYXNzTmFtZXMgKz0gJyAnICsgdGhpcy5jbGFzc2VzO1xuICAgIH1cbiAgICByZXR1cm4gY2xhc3NOYW1lcztcbiAgfVxuXG4gIHNjcm9sbFRvKGZyYWdtZW50OiBzdHJpbmcpe1xuICAgIGNvbnN0IGVsZW0gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjJyArIGZyYWdtZW50KTtcbiAgICBpZiAoZWxlbSkge1xuICAgICAgZWxlbS5zY3JvbGxJbnRvVmlldyh7YmVoYXZpb3I6ICdzbW9vdGgnfSk7XG4gICAgfVxuICB9XG5cbn1cbiIsIjxhICpuZ0lmPVwiaGFzQ29udGVudFwiXG4gICBbcm91dGVyTGlua109XCJbXVwiIFtmcmFnbWVudF09XCJmcmFnbWVudCA/IGZyYWdtZW50IDogJ2NvbnRlbnQnXCJcbiAgIFtjbGFzc109XCJnZXRDbGFzc05hbWVzKClcIlxuICAgW2F0dHIuaWRdPVwiaWQgPyBpZCA6IG51bGxcIlxuICAgW2F0dHIucm9sZV09XCJyb2xlID8gcm9sZSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWwgPyBhcmlhTGFiZWwgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiYXJpYURlc2NyaWJlZEJ5ID8gYXJpYURlc2NyaWJlZEJ5IDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiYXJpYUxhYmVsbGVkQnkgPyBhcmlhTGFiZWxsZWRCeSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1oaWRkZW5dPVwiYXJpYUhpZGRlbiA/IGFyaWFIaWRkZW4gOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtZGlzYWJsZWRdPVwiYXJpYURpc2FibGVkID8gYXJpYURpc2FibGVkIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWNvbnRyb2xzXT1cImFyaWFDb250cm9scyA/IGFyaWFDb250cm9scyA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1jdXJyZW50XT1cImFyaWFDdXJyZW50ID8gYXJpYUN1cnJlbnQgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtbGl2ZV09XCJhcmlhTGl2ZSA/IGFyaWFMaXZlIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImFyaWFFeHBhbmRlZCA/IGFyaWFFeHBhbmRlZCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1lcnJvcm1lc3NhZ2VdPVwiYXJpYUVycm9yTWVzc2FnZSA/IGFyaWFFcnJvck1lc3NhZ2UgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtaGFzcG9wdXBdPVwiYXJpYUhhc1BvcHVwID8gYXJpYUhhc1BvcHVwIDogbnVsbFwiXG4gICBbYXR0ci50YWJpbmRleF09XCJ0YWJpbmRleCA/IHRhYmluZGV4IDogbnVsbFwiXG4gICAoY2xpY2spPVwic2Nyb2xsVG8oZnJhZ21lbnQgPyBmcmFnbWVudCA6ICdjb250ZW50JylcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9hPlxuXG48YSAqbmdJZj1cIiFoYXNDb250ZW50XCJcbiAgIFtyb3V0ZXJMaW5rXT1cIltdXCIgW2ZyYWdtZW50XT1cImZyYWdtZW50ID8gZnJhZ21lbnQgOiAnY29udGVudCdcIlxuICAgW2NsYXNzXT1cImdldENsYXNzTmFtZXMoKVwiXG4gICBbYXR0ci5pZF09XCJpZCA/IGlkIDogbnVsbFwiXG4gICBbYXR0ci5yb2xlXT1cInJvbGUgPyByb2xlIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbCA/IGFyaWFMYWJlbCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJhcmlhRGVzY3JpYmVkQnkgPyBhcmlhRGVzY3JpYmVkQnkgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRCeSA/IGFyaWFMYWJlbGxlZEJ5IDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWhpZGRlbl09XCJhcmlhSGlkZGVuID8gYXJpYUhpZGRlbiA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1kaXNhYmxlZF09XCJhcmlhRGlzYWJsZWQgPyBhcmlhRGlzYWJsZWQgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiYXJpYUNvbnRyb2xzID8gYXJpYUNvbnRyb2xzIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWN1cnJlbnRdPVwiYXJpYUN1cnJlbnQgPyBhcmlhQ3VycmVudCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1saXZlXT1cImFyaWFMaXZlID8gYXJpYUxpdmUgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiYXJpYUV4cGFuZGVkID8gYXJpYUV4cGFuZGVkIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWVycm9ybWVzc2FnZV09XCJhcmlhRXJyb3JNZXNzYWdlID8gYXJpYUVycm9yTWVzc2FnZSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1oYXNwb3B1cF09XCJhcmlhSGFzUG9wdXAgPyBhcmlhSGFzUG9wdXAgOiBudWxsXCJcbiAgIFthdHRyLnRhYmluZGV4XT1cInRhYmluZGV4ID8gdGFiaW5kZXggOiBudWxsXCJcbiAgIChjbGljayk9XCJzY3JvbGxUbyhmcmFnbWVudCA/IGZyYWdtZW50IDogJ2NvbnRlbnQnKVwiPlxuICA8bmctY29udGFpbmVyICpkZXN5Q3VzdG9tSW5uZXJDb250ZW50PVwieyBodG1sOiBodG1sLCB0ZXh0OiB0ZXh0IH1cIj48L25nLWNvbnRhaW5lcj5cbjwvYT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tpcC1saW5rLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc3ktYW5ndWxhci9zcmMvbGliL2Rlc3ktbmF2L2NvbXBvbmVudHMvc2tpcC1saW5rL3NraXAtbGluay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXN5LWFuZ3VsYXIvc3JjL2xpYi9kZXN5LW5hdi9jb21wb25lbnRzL3NraXAtbGluay9za2lwLWxpbmsuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7O0FBTXBFLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxzQkFBc0I7SUFLM0QsSUFDSSxJQUFJLENBQUMsS0FBYTtRQUNwQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQTtRQUNsQixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQTtJQUM1RCxDQUFDO0lBQ0QsSUFBSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFDRCxJQUNJLElBQUksQ0FBQyxLQUFhO1FBQ3BCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO1FBQ2xCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQTtJQUN4QyxDQUFDO0lBQ0QsSUFBSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFRRCxZQUFvQixpQkFBb0M7UUFDdEQsS0FBSyxFQUFFLENBQUM7UUFEVSxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBRnhELGVBQVUsR0FBRyxJQUFJLENBQUE7SUFJakIsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLFVBQVUsR0FBRyxzS0FBc0ssQ0FBQztRQUN4TCxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsVUFBVSxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1NBQ2xDO1FBQ0QsT0FBTyxVQUFVLENBQUM7SUFDcEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxRQUFnQjtRQUN2QixNQUFNLElBQUksR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEdBQUcsR0FBRyxRQUFRLENBQUMsQ0FBQztRQUNwRCxJQUFJLElBQUksRUFBRTtZQUNSLElBQUksQ0FBQyxjQUFjLENBQUMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQztTQUM3QztJQUNILENBQUM7OEdBN0NVLGlCQUFpQjtrR0FBakIsaUJBQWlCLHlLQ1A5Qiw0bUVBeUNBOzsyRkRsQ2EsaUJBQWlCO2tCQUo3QixTQUFTOytCQUNFLGdCQUFnQjt3R0FTdEIsSUFBSTtzQkFEUCxLQUFLO2dCQVNGLElBQUk7c0JBRFAsS0FBSztnQkFTRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWNjZXNzaWJpbGl0eUNvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9jb21wb25lbnRzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZGVzeS1za2lwLWxpbmsnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2tpcC1saW5rLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBTa2lwTGlua0NvbXBvbmVudCBleHRlbmRzIEFjY2Vzc2liaWxpdHlDb21wb25lbnQge1xuXG4gIF9odG1sOiBzdHJpbmc7XG4gIF90ZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgc2V0IGh0bWwodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2h0bWwgPSB2YWx1ZVxuICAgIHRoaXMuaGFzQ29udGVudCA9IHZhbHVlID8gZmFsc2UgOiB0aGlzLnRleHQgPyBmYWxzZSA6IHRydWVcbiAgfVxuICBnZXQgaHRtbCgpIHtcbiAgICByZXR1cm4gdGhpcy5faHRtbDtcbiAgfVxuICBASW5wdXQoKVxuICBzZXQgdGV4dCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fdGV4dCA9IHZhbHVlXG4gICAgdGhpcy5oYXNDb250ZW50ID0gdmFsdWUgPyBmYWxzZSA6IHRydWVcbiAgfVxuICBnZXQgdGV4dCgpIHtcbiAgICByZXR1cm4gdGhpcy5fdGV4dDtcbiAgfVxuXG4gIEBJbnB1dCgpIGZyYWdtZW50OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNsYXNzZXM6IHN0cmluZztcbiAgQElucHV0KCkgaWQ6IHN0cmluZztcblxuICBoYXNDb250ZW50ID0gdHJ1ZVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGdldENsYXNzTmFtZXMoKTogc3RyaW5nIHtcbiAgICBsZXQgY2xhc3NOYW1lcyA9ICdjLXNraXAtbGluayBzci1vbmx5IGFjdGl2ZTpub3Qtc3Itb25seSBmb2N1czpub3Qtc3Itb25seSBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6c2hhZG93LW91dGxpbmUtZm9jdXMgYmxvY2sgcC1iYXNlIGJnLXdhcm5pbmctYmFzZSB0ZXh0LWNlbnRlciB0ZXh0LWJsYWNrIHVuZGVybGluZSc7XG4gICAgaWYgKHRoaXMuY2xhc3Nlcykge1xuICAgICAgY2xhc3NOYW1lcyArPSAnICcgKyB0aGlzLmNsYXNzZXM7XG4gICAgfVxuICAgIHJldHVybiBjbGFzc05hbWVzO1xuICB9XG5cbiAgc2Nyb2xsVG8oZnJhZ21lbnQ6IHN0cmluZykge1xuICAgIGNvbnN0IGVsZW0gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjJyArIGZyYWdtZW50KTtcbiAgICBpZiAoZWxlbSkge1xuICAgICAgZWxlbS5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICB9XG4gIH1cblxufVxuIiwiPGEgKm5nSWY9XCJoYXNDb250ZW50XCJcbiAgIFtyb3V0ZXJMaW5rXT1cIltdXCIgW2ZyYWdtZW50XT1cImZyYWdtZW50ID8gZnJhZ21lbnQgOiAnY29udGVudCdcIlxuICAgW2NsYXNzXT1cImdldENsYXNzTmFtZXMoKVwiXG4gICBbYXR0ci5pZF09XCJpZCA/IGlkIDogbnVsbFwiXG4gICBbYXR0ci5yb2xlXT1cInJvbGUgPyByb2xlIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbCA/IGFyaWFMYWJlbCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJhcmlhRGVzY3JpYmVkQnkgPyBhcmlhRGVzY3JpYmVkQnkgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRCeSA/IGFyaWFMYWJlbGxlZEJ5IDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWhpZGRlbl09XCJhcmlhSGlkZGVuID8gYXJpYUhpZGRlbiA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1kaXNhYmxlZF09XCJhcmlhRGlzYWJsZWQgPyBhcmlhRGlzYWJsZWQgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiYXJpYUNvbnRyb2xzID8gYXJpYUNvbnRyb2xzIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWN1cnJlbnRdPVwiYXJpYUN1cnJlbnQgPyBhcmlhQ3VycmVudCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1saXZlXT1cImFyaWFMaXZlID8gYXJpYUxpdmUgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiYXJpYUV4cGFuZGVkID8gYXJpYUV4cGFuZGVkIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWVycm9ybWVzc2FnZV09XCJhcmlhRXJyb3JNZXNzYWdlID8gYXJpYUVycm9yTWVzc2FnZSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1oYXNwb3B1cF09XCJhcmlhSGFzUG9wdXAgPyBhcmlhSGFzUG9wdXAgOiBudWxsXCJcbiAgIFthdHRyLnRhYmluZGV4XT1cInRhYmluZGV4ID8gdGFiaW5kZXggOiBudWxsXCJcbiAgIChjbGljayk9XCJzY3JvbGxUbyhmcmFnbWVudCA/IGZyYWdtZW50IDogJ2NvbnRlbnQnKVwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2E+XG5cbjxhICpuZ0lmPVwiIWhhc0NvbnRlbnRcIlxuICAgW3JvdXRlckxpbmtdPVwiW11cIiBbZnJhZ21lbnRdPVwiZnJhZ21lbnQgPyBmcmFnbWVudCA6ICdjb250ZW50J1wiXG4gICBbY2xhc3NdPVwiZ2V0Q2xhc3NOYW1lcygpXCJcbiAgIFthdHRyLmlkXT1cImlkID8gaWQgOiBudWxsXCJcbiAgIFthdHRyLnJvbGVdPVwicm9sZSA/IHJvbGUgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsID8gYXJpYUxhYmVsIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cImFyaWFEZXNjcmliZWRCeSA/IGFyaWFEZXNjcmliZWRCeSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZEJ5ID8gYXJpYUxhYmVsbGVkQnkgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtaGlkZGVuXT1cImFyaWFIaWRkZW4gPyBhcmlhSGlkZGVuIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cImFyaWFEaXNhYmxlZCA/IGFyaWFEaXNhYmxlZCA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1jb250cm9sc109XCJhcmlhQ29udHJvbHMgPyBhcmlhQ29udHJvbHMgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtY3VycmVudF09XCJhcmlhQ3VycmVudCA/IGFyaWFDdXJyZW50IDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWxpdmVdPVwiYXJpYUxpdmUgPyBhcmlhTGl2ZSA6IG51bGxcIlxuICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJhcmlhRXhwYW5kZWQgPyBhcmlhRXhwYW5kZWQgOiBudWxsXCJcbiAgIFthdHRyLmFyaWEtZXJyb3JtZXNzYWdlXT1cImFyaWFFcnJvck1lc3NhZ2UgPyBhcmlhRXJyb3JNZXNzYWdlIDogbnVsbFwiXG4gICBbYXR0ci5hcmlhLWhhc3BvcHVwXT1cImFyaWFIYXNQb3B1cCA/IGFyaWFIYXNQb3B1cCA6IG51bGxcIlxuICAgW2F0dHIudGFiaW5kZXhdPVwidGFiaW5kZXggPyB0YWJpbmRleCA6IG51bGxcIlxuICAgKGNsaWNrKT1cInNjcm9sbFRvKGZyYWdtZW50ID8gZnJhZ21lbnQgOiAnY29udGVudCcpXCI+XG4gIDxuZy1jb250YWluZXIgKmRlc3lDdXN0b21Jbm5lckNvbnRlbnQ9XCJ7IGh0bWw6IGh0bWwsIHRleHQ6IHRleHQgfVwiPjwvbmctY29udGFpbmVyPlxuPC9hPlxuIl19

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

@@ -46,8 +46,8 @@ import { MenuNavigationSubitemComponent } from './components/menu-navigation/com
 import { HeaderCustomNavigationComponent } from './components/header/header-custom-navigation/header-custom-navigation.component';
 import * as i0 from "@angular/core";
 export class DesyNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: DesyNavModule, declarations: [BreadcrumbsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: DesyNavModule, declarations: [BreadcrumbsComponent,
             BreadcrumbsItemComponent,
             ErrorSummaryComponent,
             ErrorSummaryItemComponent,
@@ -133,12 +133,12 @@ export class DesyNavModule {
             MenuNavigationItemComponent,
             MenuNavigationSubitemComponent,
             HeaderCustomNavigationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyNavModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyNavModule, imports: [CommonModule,
             SharedModule,
             DesyCommonsModule,
             DesyButtonsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyNavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

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

@@ -135,14 +135,14 @@ export class PaginationComponent extends AccessibilityComponent {
             this.changeDetector.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PaginationComponent, selector: "desy-pagination", inputs: { hasSelect: "hasSelect", idPrefix: "idPrefix", totalItems: "totalItems", hasPrevious: "hasPrevious", hasNext: "hasNext", previousText: "previousText", nextText: "nextText", hasSelectItemsPerPage: "hasSelectItemsPerPage", classes: "classes", classesContainer: "classesContainer", id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage" }, outputs: { currentPageChange: "currentPageChange", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.classesContainer", "attr.id": "this.id" } }, queries: [{ propertyName: "listboxLabel", predicate: PaginationListboxLabelComponent }, { propertyName: "listboxItemsPerPage", predicate: PaginationItemPerPageComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasSelect\">\n  <p class=\"w-full mb-xs text-sm text-neutral-dark\">\n    Selecciona una p\u00E1gina para cargar datos\n  </p>\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\n                  [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n      <desy-listbox *ngIf=\"items && items.length > 0\" [id]=\"id + '-listbox'\"\n                    [idPrefix]=\"idPrefix\"\n                    [text]=\"getActiveItemText()\"\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\n                    [doesChangeButtonText]=\"true\"\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\n                    [(items)]=\"items\"\n                    (activeItemChange)=\"handleActiveItemChange($event)\"></desy-listbox>\n    <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\n                  [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n  </nav>\n</ng-container>\n<ng-container *ngIf=\"!hasSelect\">\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.role]=\"role ? role : null\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ul class=\"flex flex-wrap\">\n      <li *ngFor=\"let item of items; index as i\">\n        <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\n                      classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\n                      [disabled]=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\n        <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"prefix + (i + 1) + getSuffix(i)\"\n                      (clickEvent)=\"changePage(i + 1)\"\n                      classes=\"mb-sm mr-sm\"></desy-button>\n      </li>\n    </ul>\n  </nav>\n</ng-container>\n  \n<div *ngIf=\"hasSelectItemsPerPage\" class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\">\n  <desy-listbox [classes]=\"'c-listbox--sm c-listbox--transparent'\" \n                [classesContainer]=\"'flex flex-wrap items-center gap-xs'\" \n                [id]=\"'items-listbox-' + getIdPrefix()\"\n                [doesChangeButtonText]=\"true\"\n                [items]=\"itemsPerPageList\"\n                (activeItemChange)=\"changeItemsPerPage($event)\">\n    <desy-listbox-label [classes]=\"listboxLabel && listboxLabel.classes ? listboxLabel.classes : 'inline-block align-middle mb-0'\">\n        <ng-container *ngIf=\"listboxLabel\">\n          <ng-container *desyCustomInnerContent=\"{ component: listboxLabel }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!listboxLabel\">\n          Items por p\u00E1gina\n        </ng-container>\n    </desy-listbox-label>\n  </desy-listbox>\n</div>\n\n\n<p class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\" *ngIf=\"totalItems && itemsPerPage\">\n  <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\n</p>\n", dependencies: [{ 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: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: i3.ButtonComponent, selector: "desy-button", inputs: ["id", "classes", "html", "text", "element", "name", "type", "value", "disabled", "href", "target", "preventDoubleClick", "routerLink", "routerLinkActiveClasses"], outputs: ["clickEvent"] }, { kind: "component", type: i4.ListboxComponent, selector: "desy-listbox", inputs: ["id", "isMultiselectable", "doesChangeButtonText", "label", "classes", "classesContainer", "classesTooltip", "idPrefix", "disabled", "items"], outputs: ["itemsChange", "activeItemChange"] }, { kind: "component", type: i5.ListboxLabelComponent, selector: "desy-listbox-label", inputs: ["classes"] }, { kind: "pipe", type: i6.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: PaginationComponent, selector: "desy-pagination", inputs: { hasSelect: "hasSelect", idPrefix: "idPrefix", totalItems: "totalItems", hasPrevious: "hasPrevious", hasNext: "hasNext", previousText: "previousText", nextText: "nextText", hasSelectItemsPerPage: "hasSelectItemsPerPage", classes: "classes", classesContainer: "classesContainer", id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage" }, outputs: { currentPageChange: "currentPageChange", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.classesContainer", "attr.id": "this.id" } }, queries: [{ propertyName: "listboxLabel", predicate: PaginationListboxLabelComponent }, { propertyName: "listboxItemsPerPage", predicate: PaginationItemPerPageComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasSelect\">\n  <p class=\"w-full mb-xs text-sm text-neutral-dark\">\n    Selecciona una p\u00E1gina para cargar datos\n  </p>\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\n                  [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n      <desy-listbox *ngIf=\"items && items.length > 0\" [id]=\"id + '-listbox'\"\n                    [idPrefix]=\"idPrefix\"\n                    [text]=\"getActiveItemText()\"\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\n                    [doesChangeButtonText]=\"true\"\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\n                    [(items)]=\"items\"\n                    (activeItemChange)=\"handleActiveItemChange($event)\"></desy-listbox>\n    <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\n                  [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n  </nav>\n</ng-container>\n<ng-container *ngIf=\"!hasSelect\">\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.role]=\"role ? role : null\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ul class=\"flex flex-wrap\">\n      <li *ngFor=\"let item of items; index as i\">\n        <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\n                      classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\n                      [disabled]=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\n        <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"prefix + (i + 1) + getSuffix(i)\"\n                      (clickEvent)=\"changePage(i + 1)\"\n                      classes=\"mb-sm mr-sm\"></desy-button>\n      </li>\n    </ul>\n  </nav>\n</ng-container>\n  \n<div *ngIf=\"hasSelectItemsPerPage\" class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\">\n  <desy-listbox [classes]=\"'c-listbox--sm c-listbox--transparent'\" \n                [classesContainer]=\"'flex flex-wrap items-center gap-xs'\" \n                [id]=\"'items-listbox-' + getIdPrefix()\"\n                [doesChangeButtonText]=\"true\"\n                [items]=\"itemsPerPageList\"\n                (activeItemChange)=\"changeItemsPerPage($event)\">\n    <desy-listbox-label [classes]=\"listboxLabel && listboxLabel.classes ? listboxLabel.classes : 'inline-block align-middle mb-0'\">\n        <ng-container *ngIf=\"listboxLabel\">\n          <ng-container *desyCustomInnerContent=\"{ component: listboxLabel }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!listboxLabel\">\n          Items por p\u00E1gina\n        </ng-container>\n    </desy-listbox-label>\n  </desy-listbox>\n</div>\n\n\n<p class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\" *ngIf=\"totalItems && itemsPerPage\">\n  <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\n</p>\n", dependencies: [{ 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: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: i3.ButtonComponent, selector: "desy-button", inputs: ["id", "classes", "html", "text", "element", "name", "type", "value", "disabled", "href", "target", "preventDoubleClick", "routerLink", "routerLinkActiveClasses"], outputs: ["clickEvent"] }, { kind: "component", type: i4.ListboxComponent, selector: "desy-listbox", inputs: ["id", "isMultiselectable", "doesChangeButtonText", "label", "classes", "classesContainer", "classesTooltip", "idPrefix", "disabled", "items"], outputs: ["itemsChange", "activeItemChange"] }, { kind: "component", type: i5.ListboxLabelComponent, selector: "desy-listbox-label", inputs: ["classes"] }, { kind: "pipe", type: i6.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 __decorate([
     DesyContentChild(),
     __metadata("design:type", PaginationListboxLabelComponent)
 ], PaginationComponent.prototype, "listboxLabel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-pagination', template: "<ng-container *ngIf=\"hasSelect\">\n  <p class=\"w-full mb-xs text-sm text-neutral-dark\">\n    Selecciona una p\u00E1gina para cargar datos\n  </p>\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <desy-button (clickEvent)=\"previous()\" [id]=\"getIdPrefix() + '-previous'\"\n                  [html]=\"previousIcon + prefix + previousText + getSuffix(currentPage - 2)\" [disabled]=\"currentPage === 1 || !hasPrevious\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n      <desy-listbox *ngIf=\"items && items.length > 0\" [id]=\"id + '-listbox'\"\n                    [idPrefix]=\"idPrefix\"\n                    [text]=\"getActiveItemText()\"\n                    [classes]=\"'c-listbox--sm c-listbox--transparent mr-xs'\"\n                    [classesTooltip]=\"'max-h-52 overflow-y-auto'\"\n                    [doesChangeButtonText]=\"true\"\n                    [label]=\"{ text: 'Selecciona una p\u00E1gina para cargar datos', classes: 'sr-only' }\"\n                    [(items)]=\"items\"\n                    (activeItemChange)=\"handleActiveItemChange($event)\"></desy-listbox>\n    <desy-button (clickEvent)=\"next()\" [id]=\"getIdPrefix() + '-next'\"\n                  [html]=\"prefix + nextText + getSuffix(currentPage) + nextIcon\" [disabled]=\"currentPage === nPages || !hasNext\"\n                  classes=\"c-button--sm c-button--transparent mr-xs\"></desy-button>\n  </nav>\n</ng-container>\n<ng-container *ngIf=\"!hasSelect\">\n  <nav [class]=\"['flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm', classes] | makeHtmlList\"\n        [attr.role]=\"role ? role : null\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n        [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\n        [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\n        [attr.aria-live]=\"ariaLive ? ariaLive : null\"\n        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\n        [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n        [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ul class=\"flex flex-wrap\">\n      <li *ngFor=\"let item of items; index as i\">\n        <desy-button *ngIf=\"item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"'<strong>' + prefix + (i + 1) + getSuffix(i) + '</strong>'\"\n                      classes=\"c-button--primary c-button--disabled mb-sm mr-sm\"\n                      [disabled]=\"true\" ariaCurrent=\"page\" tabindex=\"-1\" ></desy-button>\n        <desy-button *ngIf=\"!item.active\" [id]=\"getButtonId(i)\"\n                      [html]=\"prefix + (i + 1) + getSuffix(i)\"\n                      (clickEvent)=\"changePage(i + 1)\"\n                      classes=\"mb-sm mr-sm\"></desy-button>\n      </li>\n    </ul>\n  </nav>\n</ng-container>\n  \n<div *ngIf=\"hasSelectItemsPerPage\" class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\">\n  <desy-listbox [classes]=\"'c-listbox--sm c-listbox--transparent'\" \n                [classesContainer]=\"'flex flex-wrap items-center gap-xs'\" \n                [id]=\"'items-listbox-' + getIdPrefix()\"\n                [doesChangeButtonText]=\"true\"\n                [items]=\"itemsPerPageList\"\n                (activeItemChange)=\"changeItemsPerPage($event)\">\n    <desy-listbox-label [classes]=\"listboxLabel && listboxLabel.classes ? listboxLabel.classes : 'inline-block align-middle mb-0'\">\n        <ng-container *ngIf=\"listboxLabel\">\n          <ng-container *desyCustomInnerContent=\"{ component: listboxLabel }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!listboxLabel\">\n          Items por p\u00E1gina\n        </ng-container>\n    </desy-listbox-label>\n  </desy-listbox>\n</div>\n\n\n<p class=\"block relative -top-xs lg:ml-auto text-sm text-neutral-dark\" *ngIf=\"totalItems && itemsPerPage\">\n  <span class=\"sr-only\">Posici\u00F3n de paginaci\u00F3n: </span>{{(currentPage - 1) * itemsPerPage + 1}} - {{getLastItemNumber(currentPage - 1)}} de {{totalItems}}\n</p>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hasSelect: [{