desy-angular 8.0.0 → 8.0.1

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

@@ -9,8 +9,8 @@ import { DesyPaginationModule } from './desy-pagination/desy-pagination.module';
 import { DesyCommonsModule } from './desy-commons/desy-commons.module';
 import * as i0 from "@angular/core";
 export class DesyAngularModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: DesyAngularModule, imports: [DesyButtonsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: DesyAngularModule, imports: [DesyButtonsModule,
             DesyCommonsModule,
             DesyFormsModule,
             DesyModalsModule,
@@ -27,7 +27,7 @@ export class DesyAngularModule {
             DesyViewsModule,
             DesyPaginationModule,
             DesyCommonsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyAngularModule, imports: [DesyButtonsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyAngularModule, imports: [DesyButtonsModule,
             DesyCommonsModule,
             DesyFormsModule,
             DesyModalsModule,
@@ -45,7 +45,7 @@ export class DesyAngularModule {
             DesyPaginationModule,
             DesyCommonsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyAngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyAngularModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/desy-buttons/components/button/button.component.mjs

@@ -72,10 +72,10 @@ export class ButtonComponent extends ContentBaseComponent {
     get staticElementTypeInput() {
         return ButtonComponent.ELEMENT_INPUT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ButtonComponent, selector: "desy-button", inputs: { id: "id", classes: "classes", html: "html", text: "text", element: "element", name: "name", type: "type", value: "value", disabled: "disabled", href: "href", target: "target", preventDoubleClick: "preventDoubleClick", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n     <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [href]=\"href | externalHref\"\n        [attr.target]=\"target ? target : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.type]=\"type ? type : null\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n          [class]=\"getClassNames()\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </button>\n\n  <input *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n         [attr.name]=\"name ? name : null\"\n         [value]=\"text ? text : null\"\n         [attr.disabled]=\"isDisabled()\"\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n         [attr.role]=\"role ? role : null\"\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n         [attr.type]=\"type ? type : 'submit'\"\n         [class]=\"getClassNames()\"\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "pipe", type: i4.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ButtonComponent, selector: "desy-button", inputs: { id: "id", classes: "classes", html: "html", text: "text", element: "element", name: "name", type: "type", value: "value", disabled: "disabled", href: "href", target: "target", preventDoubleClick: "preventDoubleClick", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n     <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [href]=\"href | externalHref\"\n        [attr.target]=\"target ? target : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.type]=\"type ? type : null\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n          [class]=\"getClassNames()\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </button>\n\n  <input *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n         [attr.name]=\"name ? name : null\"\n         [value]=\"text ? text : null\"\n         [attr.disabled]=\"isDisabled()\"\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n         [attr.role]=\"role ? role : null\"\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n         [attr.type]=\"type ? type : 'submit'\"\n         [class]=\"getClassNames()\"\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "pipe", type: i4.ExternalHrefPipe, name: "externalHref" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-button', template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n  <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n     <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n     <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n        [href]=\"href | externalHref\"\n        [attr.target]=\"target ? target : null\"\n        [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n        [attr.role]=\"href ? null : (role ? role : 'button')\"\n        [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n        [class]=\"getClassNames()\"\n        [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\"        [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\">\n       <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n     </a>\n\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"role ? role : null\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.type]=\"type ? type : null\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n          [class]=\"getClassNames()\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </button>\n\n  <input *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n         [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n         [attr.name]=\"name ? name : null\"\n         [value]=\"text ? text : null\"\n         [attr.disabled]=\"isDisabled()\"\n         [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n         [attr.role]=\"role ? role : null\"\n         [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n         [attr.type]=\"type ? type : 'submit'\"\n         [class]=\"getClassNames()\"\n         [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\">\n</ng-container>\n" }]
         }], propDecorators: { hostTabIndex: [{

package/esm2022/lib/desy-buttons/components/button-loader/button-loader.component.mjs

@@ -42,10 +42,10 @@ export class ButtonLoaderComponent extends ButtonComponent {
         }
         return successText;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ButtonLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ButtonLoaderComponent, selector: "desy-button-loader", inputs: { loaderText: "loaderText", loaderClasses: "loaderClasses", state: "state", successText: "successText" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #spinnerTemplate>\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\n    <desy-spinner [text]=\"getSpinnerText() ? getSpinnerText() : 'Acci\u00F3n en curso'\" [classes]=\"loaderClasses\" ></desy-spinner>\n  </span>\n</ng-template>\n\n<ng-template #successTemplate>\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\n    <span class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</span>\n    <span aria-hidden=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"  aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"></path></svg></span>\n  </span>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n    <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n\n    <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\n       [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"(role ? role : null)\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n          [attr.type]=\"type ? type : null\"\n          [class]=\"getClassNames()\">\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n  </button>\n\n  <div *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n       [attr.role]=\"(role ? role : null)\"\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n       [class]=\"getClassNames()\">\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" \n      class=\"bg-transparent font-semibold\" \n      [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\" \n      [attr.disabled]=\"isDisabled()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.name]=\"name ? name : null\">\n    </span> \n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n  </div>\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "component", type: i4.SpinnerComponent, selector: "desy-spinner", inputs: ["text", "classes", "id"] }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ButtonLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ButtonLoaderComponent, selector: "desy-button-loader", inputs: { loaderText: "loaderText", loaderClasses: "loaderClasses", state: "state", successText: "successText" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #spinnerTemplate>\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\n    <desy-spinner [text]=\"getSpinnerText() ? getSpinnerText() : 'Acci\u00F3n en curso'\" [classes]=\"loaderClasses\" ></desy-spinner>\n  </span>\n</ng-template>\n\n<ng-template #successTemplate>\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\n    <span class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</span>\n    <span aria-hidden=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"  aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"></path></svg></span>\n  </span>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n    <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n\n    <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\n       [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"(role ? role : null)\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n          [attr.type]=\"type ? type : null\"\n          [class]=\"getClassNames()\">\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n  </button>\n\n  <div *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n       [attr.role]=\"(role ? role : null)\"\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n       [class]=\"getClassNames()\">\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" \n      class=\"bg-transparent font-semibold\" \n      [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\" \n      [attr.disabled]=\"isDisabled()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.name]=\"name ? name : null\">\n    </span> \n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n  </div>\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "component", type: i4.SpinnerComponent, selector: "desy-spinner", inputs: ["text", "classes", "id"] }, { kind: "pipe", type: i5.ExternalHrefPipe, name: "externalHref" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ButtonLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ButtonLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-button-loader', template: "<ng-template #spinnerTemplate>\n  <span class=\"c-button-loader__spinner flex items-center justify-center absolute inset-0\">\n    <desy-spinner [text]=\"getSpinnerText() ? getSpinnerText() : 'Acci\u00F3n en curso'\" [classes]=\"loaderClasses\" ></desy-spinner>\n  </span>\n</ng-template>\n\n<ng-template #successTemplate>\n  <span class=\"c-button-loader__success flex items-center justify-center absolute inset-0\">\n    <span class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{ getSuccessText() }}</span>\n    <span aria-hidden=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"  aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"></path></svg></span>\n  </span>\n</ng-template>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getElement()\">\n  <ng-container *ngSwitchCase=\"staticElementTypeA\">\n    <a *ngIf=\"routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n\n    <a *ngIf=\"!routerLink\" draggable=\"false\" (click)=\"onClick($event)\"\n      [href]=\"href | externalHref\" [attr.target]=\"target ? target : null\"\n       [attr.tabindex]=\"tabindex ? tabindex : (isDisabled() ? -1 : null)\"\n      role=\"button\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"  [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\n      [class]=\"getClassNames()\">\n      <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n      <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n    </a>\n  </ng-container>\n\n  <button *ngSwitchCase=\"staticElementTypeButton\" (click)=\"onClick($event)\"\n          [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n          [attr.name]=\"name ? name : null\"\n          [attr.value]=\"value ? value : null\"\n          [attr.disabled]=\"isDisabled()\"\n          [attr.role]=\"(role ? role : null)\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\"\n          [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n          [attr.type]=\"type ? type : null\"\n          [class]=\"getClassNames()\">\n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n    <span class=\"c-button-loader__content inline-flex align-baseline\" [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"> <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n  </button>\n\n  <div *ngSwitchCase=\"staticElementTypeInput\" (click)=\"onClick($event)\"\n       [routerLink]=\"routerLink ? routerLink : null\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n       [attr.role]=\"(role ? role : null)\"\n       [attr.id]=\"id ? id : null\" [attr.aria-label]=\"ariaLabel ? ariaLabel : null\" [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\" [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\" [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\" [attr.aria-controls]=\"ariaControls ? ariaControls : null\" [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\" [attr.aria-live]=\"ariaLive ? ariaLive : null\" [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\" [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" [attr.tabindex]=\"tabindex ? tabindex : null\"\n       [class]=\"getClassNames()\">\n    <span class=\"c-button-loader__content inline-flex align-baseline\">\n      <input [value]=\"text ? text : null\" [type]=\"type ? type : 'submit'\" \n      class=\"bg-transparent font-semibold\" \n      [attr.data-prevent-double-click]=\"preventDoubleClick ? 'true' : null\" \n      [attr.disabled]=\"isDisabled()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.name]=\"name ? name : null\">\n    </span> \n    <ng-container *ngTemplateOutlet=\"spinnerTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"successTemplate\"></ng-container>\n  </div>\n</ng-container>\n" }]
         }], propDecorators: { hostTabIndex: [{

package/esm2022/lib/desy-buttons/components/dropdown/dropdown.component.mjs

@@ -95,10 +95,10 @@ export class DropdownComponent extends AccessibilityAndContentRequiredComponent
     isDisabled() {
         return this.disabled ? true : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DropdownComponent, selector: "desy-dropdown", inputs: { id: "id", disabled: "disabled", hiddenText: "hiddenText", classesContainer: "classesContainer", classesTooltip: "classesTooltip", caller: "caller", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "class": "this.classesContainer" } }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : 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-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\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</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>", dependencies: [{ 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.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i3.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: DropdownComponent, selector: "desy-dropdown", inputs: { id: "id", disabled: "disabled", hiddenText: "hiddenText", classesContainer: "classesContainer", classesTooltip: "classesTooltip", caller: "caller", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "class": "this.classesContainer" } }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : 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-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\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</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>", dependencies: [{ 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.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i3.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-dropdown', template: "<button (click)=\"onClick($event)\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      [class]=\"['c-dropdown', classes] | makeHtmlList\"\n      [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\n      aria-haspopup=\"true\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\n      [attr.id]=\"id ? id : null\"\n      [attr.role]=\"role ? role : null\"\n      [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\n      [attr.aria-hidden]=\"ariaHidden ? ariaHidden : 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-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\n      [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\n  <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n    <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\n    <ng-content></ng-content>\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</button>\n<span *ngIf=\"hiddenText\" class=\"sr-only\">{{ hiddenText }}</span>\n<div #dropdownContent [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n  <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\n</div>" }]
         }], propDecorators: { dropdownContent: [{

package/esm2022/lib/desy-buttons/components/listbox/listbox-item/listbox-item.component.mjs

@@ -14,10 +14,10 @@ export class ListboxItemComponent extends AccessibilityComponent {
         this.active = value;
         this.activeChange.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ListboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ListboxItemComponent, selector: "desy-listbox-item", inputs: { id: "id", active: "active", classes: "classes", title: "title" }, outputs: { itemChange: "itemChange", activeChange: "activeChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["childComponentTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #childComponentTemplate>\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: ListboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ListboxItemComponent, selector: "desy-listbox-item", inputs: { id: "id", active: "active", classes: "classes", title: "title" }, outputs: { itemChange: "itemChange", activeChange: "activeChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["childComponentTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #childComponentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ListboxItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ListboxItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-listbox-item', template: "<ng-template #childComponentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { content: [{

package/esm2022/lib/desy-buttons/components/listbox/listbox-label/listbox-label.component.mjs

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

package/esm2022/lib/desy-buttons/components/listbox/listbox.component.mjs

@@ -278,14 +278,14 @@ export class ListboxComponent extends AccessibilityAndTextOrHtmlRequiredComponen
             onHidden: this.onListClose.bind(this)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ListboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ListboxComponent, selector: "desy-listbox", inputs: { id: "id", isMultiselectable: "isMultiselectable", doesChangeButtonText: "doesChangeButtonText", label: "label", classes: "classes", classesContainer: "classesContainer", classesTooltip: "classesTooltip", idPrefix: "idPrefix", disabled: "disabled", items: "items" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange" }, queries: [{ propertyName: "labelComponent", predicate: ListboxLabelComponent }, { propertyName: "itemComponentList", predicate: ListboxItemComponent }], viewQueries: [{ propertyName: "listboxButton", first: true, predicate: ["button"], descendants: true, read: ElementRef, static: true }, { propertyName: "listboxList", first: true, predicate: ["list"], descendants: true, read: ElementRef }, { propertyName: "listboxContent", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef, static: true }, { propertyName: "listboxOptions", predicate: ["option"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\n  </div>\n  <button #button [id]=\"id + '-button'\"\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\n          ngxTippy [tippyProps]=\"tippyProperties\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.aria-role] = \"role ? role : null\"\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: 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  </button>\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n    <ul *ngIf=\"itemList\"\n        #list [id]=\"id\"\n        (focus)=\"onListFocus()\"\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\n        (keydown.home)=\"moveFocus(0, $event)\"\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\n        (keydown.space)=\"onSpace($event)\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"text-sm outline-none\"\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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.aria-activedescendant] = \"lastActiveItems && lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\n      <ng-container *ngFor=\"let item of itemList; index as index\">\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\n            [id]=\"getItemId(item, index)\"\n            [attr.title]=\"item.title ? item.title : null\"\n            (desyAttributeChange)=\"onChangeItemChecked()\" [attributesToCheck]=\"'aria-selected'\" [desyAttributeChangeEnabled]=\"items && items.length > 0\"\n\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : 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-tabindex] = \"item.tabindex ? item.tabindex : null\"\n\n            [attr.aria-checked]=\"item.active\"\n            [attr.aria-selected]=\"item.active\">\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n</div>", 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: i2.AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ListboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ListboxComponent, selector: "desy-listbox", inputs: { id: "id", isMultiselectable: "isMultiselectable", doesChangeButtonText: "doesChangeButtonText", label: "label", classes: "classes", classesContainer: "classesContainer", classesTooltip: "classesTooltip", idPrefix: "idPrefix", disabled: "disabled", items: "items" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange" }, queries: [{ propertyName: "labelComponent", predicate: ListboxLabelComponent }, { propertyName: "itemComponentList", predicate: ListboxItemComponent }], viewQueries: [{ propertyName: "listboxButton", first: true, predicate: ["button"], descendants: true, read: ElementRef, static: true }, { propertyName: "listboxList", first: true, predicate: ["list"], descendants: true, read: ElementRef }, { propertyName: "listboxContent", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef, static: true }, { propertyName: "listboxOptions", predicate: ["option"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\n  </div>\n  <button #button [id]=\"id + '-button'\"\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\n          ngxTippy [tippyProps]=\"tippyProperties\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.aria-role] = \"role ? role : null\"\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: 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  </button>\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n    <ul *ngIf=\"itemList\"\n        #list [id]=\"id\"\n        (focus)=\"onListFocus()\"\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\n        (keydown.home)=\"moveFocus(0, $event)\"\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\n        (keydown.space)=\"onSpace($event)\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"text-sm outline-none\"\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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.aria-activedescendant] = \"lastActiveItems && lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\n      <ng-container *ngFor=\"let item of itemList; index as index\">\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\n            [id]=\"getItemId(item, index)\"\n            [attr.title]=\"item.title ? item.title : null\"\n            (desyAttributeChange)=\"onChangeItemChecked()\" [attributesToCheck]=\"'aria-selected'\" [desyAttributeChangeEnabled]=\"items && items.length > 0\"\n\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : 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-tabindex] = \"item.tabindex ? item.tabindex : null\"\n\n            [attr.aria-checked]=\"item.active\"\n            [attr.aria-selected]=\"item.active\">\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n</div>", 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: i2.AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i4.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: i5.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 __decorate([
     DesyContentChild(),
     __metadata("design:type", ListboxLabelComponent)
 ], ListboxComponent.prototype, "labelComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ListboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ListboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-listbox', template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\n  <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\n    <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\n  </div>\n  <button #button [id]=\"id + '-button'\"\n          [class]=\"['c-listbox', classes] | makeHtmlList\"\n          ngxTippy [tippyProps]=\"tippyProperties\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\n          [attr.disabled]=\"disabled ? 'disabled' : null\"\n          [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\n          [attr.aria-role] = \"role ? role : null\"\n          [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n          [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n          [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\n          [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\n        <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\n          <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: 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  </button>\n  <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\n    <ul *ngIf=\"itemList\"\n        #list [id]=\"id\"\n        (focus)=\"onListFocus()\"\n        (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\n        (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\n        (keydown.home)=\"moveFocus(0, $event)\"\n        (keydown.end)=\"moveFocus(items.length - 1, $event)\"\n        (keydown.space)=\"onSpace($event)\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        class=\"text-sm outline-none\"\n        [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\n        [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\n        [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\n        [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\n        [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\n        [attr.aria-hidden] = \"ariaHidden ? ariaHidden : 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.aria-activedescendant] = \"lastActiveItems && lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\n      <ng-container *ngFor=\"let item of itemList; index as index\">\n        <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\n            [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\n            [ngClass]=\"{'focused': index === currentFocusIndex}\"\n            [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\n            [id]=\"getItemId(item, index)\"\n            [attr.title]=\"item.title ? item.title : null\"\n            (desyAttributeChange)=\"onChangeItemChecked()\" [attributesToCheck]=\"'aria-selected'\" [desyAttributeChangeEnabled]=\"items && items.length > 0\"\n\n            [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : 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-tabindex] = \"item.tabindex ? item.tabindex : null\"\n\n            [attr.aria-checked]=\"item.active\"\n            [attr.aria-selected]=\"item.active\">\n          <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxButton: [{

package/esm2022/lib/desy-buttons/components/pill/pill.component.mjs

@@ -51,10 +51,10 @@ export class PillComponent extends AccessibilityAndContentRequiredComponent {
     get staticElementTypeSpan() {
         return PillComponent.TYPE_SPAN;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: PillComponent, selector: "desy-pill", inputs: { type: "type", href: "href", target: "target", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", classes: "classes", id: "id" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getType()\">\n    <ng-container *ngSwitchCase=\"staticElementTypeA\">\n      <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n      <a *ngIf=\"routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n\n      <a *ngIf=\"!routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [href]=\"href | externalHref\"\n         [class]=\"getClassNames()\"\n         [attr.target]=\"target ? target : null\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n    </ng-container>\n\n    <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n            [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </button>\n\n    <span *ngSwitchCase=\"staticElementTypeSpan\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </span>\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "pipe", type: i4.ExternalHrefPipe, name: "externalHref" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: PillComponent, selector: "desy-pill", inputs: { type: "type", href: "href", target: "target", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", classes: "classes", id: "id" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.tabindex": "this.hostTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getType()\">\n    <ng-container *ngSwitchCase=\"staticElementTypeA\">\n      <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n      <a *ngIf=\"routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n\n      <a *ngIf=\"!routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [href]=\"href | externalHref\"\n         [class]=\"getClassNames()\"\n         [attr.target]=\"target ? target : null\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n    </ng-container>\n\n    <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n            [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </button>\n\n    <span *ngSwitchCase=\"staticElementTypeSpan\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </span>\n</ng-container>\n", dependencies: [{ 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.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.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }, { kind: "pipe", type: i4.ExternalHrefPipe, name: "externalHref" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PillComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-pill', template: "<ng-template #contentTemplate>\n   <ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"getType()\">\n    <ng-container *ngSwitchCase=\"staticElementTypeA\">\n      <!-- routerLink modifica href, por eso se duplica para que no convivan en un mismo html -->\n      <a *ngIf=\"routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [routerLink]=\"routerLink\" [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n\n      <a *ngIf=\"!routerLink\" data-module=\"c-pill\"  (click)=\"onClick($event)\"\n         [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\n         [href]=\"href | externalHref\"\n         [class]=\"getClassNames()\"\n         [attr.target]=\"target ? target : null\"\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         <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </a>\n    </ng-container>\n\n    <button *ngSwitchCase=\"staticElementTypeButton\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n            [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </button>\n\n    <span *ngSwitchCase=\"staticElementTypeSpan\" data-module=\"c-pill\" (click)=\"onClick($event)\"\n          [desyInnerContent]=\"html ? html : text\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"\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          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n         </span>\n</ng-container>\n" }]
         }], propDecorators: { type: [{

package/esm2022/lib/desy-buttons/components/toggle/toggle-off-state/toggle-off-state.component.mjs

@@ -2,10 +2,10 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { AccessibilityComponent } from '../../../../shared/components';
 import * as i0 from "@angular/core";
 export class ToggleOffStateComponent extends AccessibilityComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleOffStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToggleOffStateComponent, selector: "desy-toggle-off-state", inputs: { classes: "classes" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplateOffState"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplateOffState>\n   <ng-content></ng-content>\n</ng-template>" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleOffStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ToggleOffStateComponent, selector: "desy-toggle-off-state", inputs: { classes: "classes" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplateOffState"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplateOffState>\n   <ng-content></ng-content>\n</ng-template>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleOffStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleOffStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-toggle-off-state', template: "<ng-template #contentTemplateOffState>\n   <ng-content></ng-content>\n</ng-template>" }]
         }], propDecorators: { content: [{

package/esm2022/lib/desy-buttons/components/toggle/toggle-on-state/toggle-on-state.component.mjs

@@ -2,10 +2,10 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { AccessibilityComponent } from '../../../../shared/components';
 import * as i0 from "@angular/core";
 export class ToggleOnStateComponent extends AccessibilityComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleOnStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToggleOnStateComponent, selector: "desy-toggle-on-state", inputs: { classes: "classes" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplateOnState"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplateOnState>\n   <ng-content></ng-content>\n</ng-template>" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleOnStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ToggleOnStateComponent, selector: "desy-toggle-on-state", inputs: { classes: "classes" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplateOnState"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplateOnState>\n   <ng-content></ng-content>\n</ng-template>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleOnStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleOnStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-toggle-on-state', template: "<ng-template #contentTemplateOnState>\n   <ng-content></ng-content>\n</ng-template>" }]
         }], propDecorators: { content: [{

package/esm2022/lib/desy-buttons/components/toggle/toggle.component.mjs

@@ -18,8 +18,8 @@ export class ToggleComponent extends AccessibilityComponent {
         this.pressedChange.emit(this.pressed);
         this.clickEvent.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToggleComponent, selector: "desy-toggle", inputs: { id: "id", isSwitch: "isSwitch", pressed: "pressed", classes: "classes", isExpandible: "isExpandible", cfg: "cfg" }, outputs: { clickEvent: "clickEvent", pressedChange: "pressedChange" }, host: { properties: { "class.relative": "this.cfg" } }, queries: [{ propertyName: "contentTemplateOnState", predicate: ToggleOnStateComponent }, { propertyName: "contentTemplateOffState", predicate: ToggleOffStateComponent }], usesInheritance: true, ngImport: i0, template: "<!-- toggle -->\n  <button *ngIf=\"isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\n          [attr.aria-pressed]=\"!isExpandible ? (pressed ? 'true' : 'false') : null\"\n          [attr.id]=\"id ? id : null\" \n          [attr.role]=\"'switch'\"\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]=\"isExpandible ? (pressed ? 'true' : 'false') : null\" \n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n\n  <button *ngIf=\"!isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\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    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n<!-- /toggle -->", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ToggleComponent, selector: "desy-toggle", inputs: { id: "id", isSwitch: "isSwitch", pressed: "pressed", classes: "classes", isExpandible: "isExpandible", cfg: "cfg" }, outputs: { clickEvent: "clickEvent", pressedChange: "pressedChange" }, host: { properties: { "class.relative": "this.cfg" } }, queries: [{ propertyName: "contentTemplateOnState", predicate: ToggleOnStateComponent }, { propertyName: "contentTemplateOffState", predicate: ToggleOffStateComponent }], usesInheritance: true, ngImport: i0, template: "<!-- toggle -->\n  <button *ngIf=\"isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\n          [attr.aria-pressed]=\"!isExpandible ? (pressed ? 'true' : 'false') : null\"\n          [attr.id]=\"id ? id : null\" \n          [attr.role]=\"'switch'\"\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]=\"isExpandible ? (pressed ? 'true' : 'false') : null\" \n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n\n  <button *ngIf=\"!isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\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    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n<!-- /toggle -->", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -29,7 +29,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", ToggleOffStateComponent)
 ], ToggleComponent.prototype, "contentTemplateOffState", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-toggle', template: "<!-- toggle -->\n  <button *ngIf=\"isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-checked]=\"pressed ? 'true' : 'false'\"\n          [attr.aria-pressed]=\"!isExpandible ? (pressed ? 'true' : 'false') : null\"\n          [attr.id]=\"id ? id : null\" \n          [attr.role]=\"'switch'\"\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]=\"isExpandible ? (pressed ? 'true' : 'false') : null\" \n          [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\" \n          [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\" \n          [attr.tabindex]=\"tabindex ? tabindex : null\">\n    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n\n  <button *ngIf=\"!isSwitch\"\n          (click)=\"onClick($event)\"\n          [type]=\"'button'\"\n          [class]=\"pressed ? (classes + ' ' + contentTemplateOnState?.classes) : (classes + ' ' + contentTemplateOffState?.classes)\"\n          [attr.aria-pressed]=\"pressed ? 'true' : 'false'\"\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    \n    <span [class]=\"pressed ? 'hidden' : ''\"><ng-container *ngTemplateOutlet=\"contentTemplateOffState?.content\"></ng-container></span>\n    <span [class]=\"pressed ? '' : 'hidden'\"><ng-container *ngTemplateOutlet=\"contentTemplateOnState?.content\"></ng-container></span>\n  </button>\n<!-- /toggle -->" }]
         }], propDecorators: { id: [{

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

@@ -15,8 +15,8 @@ import { ToggleOnStateComponent } from './components/toggle/toggle-on-state/togg
 import { ToggleOffStateComponent } from './components/toggle/toggle-off-state/toggle-off-state.component';
 import * as i0 from "@angular/core";
 export class DesyButtonsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: DesyButtonsModule, declarations: [ButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: DesyButtonsModule, declarations: [ButtonComponent,
             ButtonLoaderComponent,
             DropdownComponent,
             ListboxComponent,
@@ -38,12 +38,12 @@ export class DesyButtonsModule {
             ToggleComponent,
             ToggleOnStateComponent,
             ToggleOffStateComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyButtonsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyButtonsModule, imports: [CommonModule,
             SharedModule,
             DesyViewsModule,
             NgxTippyModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyButtonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/desy-commons/components/content/content.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 ContentComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ContentComponent, selector: "desy-content", inputs: { classes: "classes" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ContentComponent, selector: "desy-content", inputs: { classes: "classes" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-content', template: "<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { classes: [{

package/esm2022/lib/desy-commons/components/description/description.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 DescriptionComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DescriptionComponent, selector: "desy-description", inputs: { classes: "classes", visuallyHiddenTitle: "visuallyHiddenTitle" }, 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: DescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: DescriptionComponent, selector: "desy-description", inputs: { classes: "classes", visuallyHiddenTitle: "visuallyHiddenTitle" }, 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: DescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'desy-description',

package/esm2022/lib/desy-commons/components/divider/divider.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 DividerComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: DividerComponent, selector: "desy-divider", inputs: { text: "text", html: "html" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: DividerComponent, selector: "desy-divider", inputs: { text: "text", html: "html" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-divider', template: "<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>" }]
         }], propDecorators: { text: [{