desy-angular 8.0.0 → 8.0.1

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

@@ -45,8 +45,8 @@ export class ItemComponent extends AccessibilityComponent {
     checkClasses() {
         this.hostClasses = new MakeHtmlListPipe().transform([this.classes, 'flex flex-wrap p-base bg-white border border-neutral-base rounded'], null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItemComponent, selector: "desy-item", inputs: { title: "title", description: "description", headingLevel: "headingLevel", items: "items", content: "content", icon: "icon", isDraggable: "isDraggable", isLocked: "isLocked", caller: "caller", classes: "classes", id: "id" }, host: { properties: { "attr.id": "this.id", "class": "this.hostClasses" } }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "contentBottomComponent", predicate: ItemContentBottomComponent }, { propertyName: "contentRightComponent", predicate: ItemContentRightComponent }, { propertyName: "itemComponents", predicate: ItemItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\n  <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\n  <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\n</div>\n<div *ngIf=\"getIcon() !== null\" [class]=\"getIcon().containerClasses ? getIcon().containerClasses : 'self-center h-full mr-base'\">\n  <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n  <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\n    <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de datos\" focusable=\"false\" role=\"img\"><path d=\"M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de enlace\" focusable=\"false\" role=\"img\"><path d=\"M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de documento\" focusable=\"false\" role=\"img\"><path d=\"m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n  </ng-container>\n</div>\n<div class=\"lg:flex flex-1 self-center\">\n  <div class=\"lg:flex-1 lg:self-center\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h1>\n      <h2 *ngSwitchCase=\"2\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h2>\n      <h3 *ngSwitchCase=\"3\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h3>\n      <h4 *ngSwitchCase=\"4\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h4>\n      <h5 *ngSwitchCase=\"5\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h5>\n      <p *ngSwitchDefault\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </p>\n    </ng-container>\n\n    <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\n        [attr.role]=\"role\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-disabled]=\"ariaDisabled\"\n        [attr.aria-controls]=\"ariaControls\"\n        [attr.aria-current]=\"ariaCurrent\"\n        [attr.aria-live]=\"ariaLive\"\n        [attr.aria-expanded]=\"ariaExpanded\"\n        [attr.aria-haspopup]=\"ariaHasPopup\"\n        [attr.tabindex]=\"tabindex\">\n      <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\n    </p>\n    <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\n      <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\n      </li>\n    </ul>\n    <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\n    </p>\n  </div>\n  <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: ItemComponent, selector: "desy-item", inputs: { title: "title", description: "description", headingLevel: "headingLevel", items: "items", content: "content", icon: "icon", isDraggable: "isDraggable", isLocked: "isLocked", caller: "caller", classes: "classes", id: "id" }, host: { properties: { "attr.id": "this.id", "class": "this.hostClasses" } }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "descriptionComponent", predicate: DescriptionComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "contentBottomComponent", predicate: ItemContentBottomComponent }, { propertyName: "contentRightComponent", predicate: ItemContentRightComponent }, { propertyName: "itemComponents", predicate: ItemItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\n  <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\n  <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\n</div>\n<div *ngIf=\"getIcon() !== null\" [class]=\"getIcon().containerClasses ? getIcon().containerClasses : 'self-center h-full mr-base'\">\n  <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n  <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\n    <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de datos\" focusable=\"false\" role=\"img\"><path d=\"M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de enlace\" focusable=\"false\" role=\"img\"><path d=\"M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de documento\" focusable=\"false\" role=\"img\"><path d=\"m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n  </ng-container>\n</div>\n<div class=\"lg:flex flex-1 self-center\">\n  <div class=\"lg:flex-1 lg:self-center\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h1>\n      <h2 *ngSwitchCase=\"2\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h2>\n      <h3 *ngSwitchCase=\"3\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h3>\n      <h4 *ngSwitchCase=\"4\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h4>\n      <h5 *ngSwitchCase=\"5\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h5>\n      <p *ngSwitchDefault\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </p>\n    </ng-container>\n\n    <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\n        [attr.role]=\"role\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-disabled]=\"ariaDisabled\"\n        [attr.aria-controls]=\"ariaControls\"\n        [attr.aria-current]=\"ariaCurrent\"\n        [attr.aria-live]=\"ariaLive\"\n        [attr.aria-expanded]=\"ariaExpanded\"\n        [attr.aria-haspopup]=\"ariaHasPopup\"\n        [attr.tabindex]=\"tabindex\">\n      <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\n    </p>\n    <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\n      <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\n      </li>\n    </ul>\n    <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\n    </p>\n  </div>\n  <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -68,7 +68,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", ItemContentRightComponent)
 ], ItemComponent.prototype, "contentRightComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-item', template: "<div class=\"self-center h-full mr-lg\" *ngIf=\"isDraggable || isLocked\">\n  <svg *ngIf=\"isDraggable && !isLocked\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-neutral-base\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M41 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M41 112a10 10 0 1010-10 10 10 0 00-10 10z\"/><path d=\"M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z\"/></g></svg>\n  <svg *ngIf=\"isLocked && !isDraggable\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-base h-base text-neutral-dark\" aria-label=\"Item Bloqueado\" focusable=\"false\"><path d=\"M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z\" fill=\"currentColor\"/></svg>\n</div>\n<div *ngIf=\"getIcon() !== null\" [class]=\"getIcon().containerClasses ? getIcon().containerClasses : 'self-center h-full mr-base'\">\n  <ng-container *desyCustomInnerContent=\"{ component: iconComponent, html: icon ? icon.html : null }\"></ng-container>\n  <ng-container [ngSwitch]=\"iconComponent ? iconComponent.type : icon.type\">\n    <svg *ngSwitchCase=\"'clipboard'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de datos\" focusable=\"false\" role=\"img\"><path d=\"M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'link'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de enlace\" focusable=\"false\" role=\"img\"><path d=\"M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n    <svg *ngSwitchCase=\"'document'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Icono de documento\" focusable=\"false\" role=\"img\"><path d=\"m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg>\n  </ng-container>\n</div>\n<div class=\"lg:flex flex-1 self-center\">\n  <div class=\"lg:flex-1 lg:self-center\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h1>\n      <h2 *ngSwitchCase=\"2\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h2>\n      <h3 *ngSwitchCase=\"3\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h3>\n      <h4 *ngSwitchCase=\"4\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h4>\n      <h5 *ngSwitchCase=\"5\"\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </h5>\n      <p *ngSwitchDefault\n          [class]=\"getTitle().classes\"\n          [attr.role]=\"getTitle().role\" [attr.aria-describedby]=\"getTitle().ariaDescribedBy\" [attr.aria-errormessage]=\"getTitle().ariaErrorMessage\" [attr.aria-label]=\"getTitle().ariaLabel\" [attr.aria-labelledby]=\"getTitle().ariaLabelledBy\" [attr.aria-hidden]=\"getTitle().ariaHidden\" [attr.aria-disabled]=\"getTitle().ariaDisabled\" [attr.aria-controls]=\"getTitle().ariaControls\" [attr.aria-current]=\"getTitle().ariaCurrent\" [attr.aria-live]=\"getTitle().ariaLive\" [attr.aria-expanded]=\"getTitle().ariaExpanded\" [attr.aria-haspopup]=\"getTitle().ariaHasPopup\" [attr.tabindex]=\"getTitle().tabindex\">\n        <ng-container *desyCustomInnerContent=\"{ component: titleComponent, html: getTitle().html, text: getTitle().text }\"></ng-container>\n      </p>\n    </ng-container>\n\n    <p *ngIf=\"descriptionComponent || description\" [class]=\"descriptionComponent ? descriptionComponent.classes : description.classes\"\n        [attr.role]=\"role\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-errormessage]=\"ariaErrorMessage\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-disabled]=\"ariaDisabled\"\n        [attr.aria-controls]=\"ariaControls\"\n        [attr.aria-current]=\"ariaCurrent\"\n        [attr.aria-live]=\"ariaLive\"\n        [attr.aria-expanded]=\"ariaExpanded\"\n        [attr.aria-haspopup]=\"ariaHasPopup\"\n        [attr.tabindex]=\"tabindex\">\n      <ng-container *desyCustomInnerContent=\"{ component: descriptionComponent, html: description ? description.html : null, text: description ? description.text : null }\"></ng-container>\n    </p>\n    <ul class=\"-ml-sm lg:divide-x lg:divide-neutral-base\" *ngIf=\"itemComponents.length > 0 || items\">\n      <li class=\"lg:inline-block px-sm text-sm text-neutral-dark\" *ngFor=\"let item of getItems(); index as index\">\n        <ng-container *desyCustomInnerContent=\"{ component: item, text: item }\"></ng-container>\n      </li>\n    </ul>\n    <p *ngIf=\"contentBottomComponent || content\" [class]=\"contentBottomComponent ? contentBottomComponent.classes : content.classes\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentBottomComponent, html: content ? content.html : null, text: content ? content.text : null }\"></ng-container>\n    </p>\n  </div>\n  <div class=\"w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base\" *ngIf=\"contentRightComponent || caller\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentRightComponent, template: caller }\"></ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{

package/esm2022/lib/desy-views/components/media-object/media-object-figure/media-object-figure.component.mjs

@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import { ContentBaseComponent } from '../../../../shared/components';
 import * as i0 from "@angular/core";
 export class MediaObjectFigureComponent extends ContentBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MediaObjectFigureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MediaObjectFigureComponent, selector: "desy-media-object-figure", 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: MediaObjectFigureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: MediaObjectFigureComponent, selector: "desy-media-object-figure", 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: MediaObjectFigureComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: MediaObjectFigureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-media-object-figure', template: "<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n  " }]
         }] });

package/esm2022/lib/desy-views/components/media-object/media-object.component.mjs

@@ -26,8 +26,8 @@ export class MediaObjectComponent extends AccessibilityComponent {
         this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
         this.tabindexData = this.tabindex ? this.tabindex : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MediaObjectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MediaObjectComponent, selector: "desy-media-object", inputs: { figureHtml: "figureHtml", center: "center", reverse: "reverse", figureClasses: "figureClasses", contenClasses: "contenClasses", caller: "caller", id: "id", classes: "classes" }, host: { properties: { "class": "this.classes", "class.items-center": "this.cfgr", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "mediaObjectFigureComponent", predicate: MediaObjectFigureComponent }], viewQueries: [{ propertyName: "mediaFigureContent", first: true, predicate: ["mediaFigureContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\n\n<div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\n</div>\n\n<div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: MediaObjectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: MediaObjectComponent, selector: "desy-media-object", inputs: { figureHtml: "figureHtml", center: "center", reverse: "reverse", figureClasses: "figureClasses", contenClasses: "contenClasses", caller: "caller", id: "id", classes: "classes" }, host: { properties: { "class": "this.classes", "class.items-center": "this.cfgr", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "mediaObjectFigureComponent", predicate: MediaObjectFigureComponent }], viewQueries: [{ propertyName: "mediaFigureContent", first: true, predicate: ["mediaFigureContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\n\n<div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\n</div>\n\n<div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -37,7 +37,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", MediaObjectFigureComponent)
 ], MediaObjectComponent.prototype, "mediaObjectFigureComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MediaObjectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: MediaObjectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-media-object', template: "<div *ngIf=\"figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\" [attr.figureHtml]=\"figureHtml\" [innerHtml]=\"figureHtml\"></div>\n\n<div #mediaFigureContent *ngIf=\"!figureHtml\" [class]=\"(reverse===true ? ' ' + 'order-1' : '') + (figureClasses ? ' ' + figureClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: mediaObjectFigureComponent }\"></ng-container>\n</div>\n\n<div [class]=\"'flex-1' + (contenClasses ? ' ' + contenClasses : '')\">\n    <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n</div>" }]
         }], propDecorators: { figureHtml: [{

package/esm2022/lib/desy-views/components/spinner/spinner.component.mjs

@@ -19,10 +19,10 @@ export class SpinnerComponent extends AccessibilityComponent {
         this.ariaHaspopupData = this.ariaHasPopup ? this.ariaHasPopup : null;
         this.ariaModalData = this.ariaModal ? this.ariaModal : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SpinnerComponent, selector: "desy-spinner", inputs: { text: "text", classes: "classes", id: "id" }, host: { properties: { "class": "this.classes", "attr.role": "this.roleData", "attr.aria-label": "this.ariaLabelData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.aria-modal": "this.ariaModalData" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"text\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{text}}</span>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: SpinnerComponent, selector: "desy-spinner", inputs: { text: "text", classes: "classes", id: "id" }, host: { properties: { "class": "this.classes", "attr.role": "this.roleData", "attr.aria-label": "this.ariaLabelData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.aria-modal": "this.ariaModalData" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"text\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{text}}</span>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-spinner', template: "<span *ngIf=\"text\" class=\"sr-only\" role=\"alert\" aria-live=\"assertive\">{{text}}</span>" }]
         }], propDecorators: { text: [{

package/esm2022/lib/desy-views/components/status/status.component.mjs

@@ -37,14 +37,14 @@ export class StatusComponent extends AccessibilityComponent {
         }
         return type;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StatusComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: StatusComponent, selector: "desy-status", inputs: { text: "text", id: "id", icon: "icon", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "iconComponent", predicate: IconComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p class=\"inline-flex items-center\">\n  <span class=\"inline-block font-bold uppercase\">{{text}}</span>\n  <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \n    <ng-container [ngSwitch]=\"getType()\">\n      <ng-container *ngSwitchCase=\"'success'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'alert'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'loading'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'error'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <ng-template #elseBlock>\n    <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \n  </ng-template>\n</p>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: StatusComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: StatusComponent, selector: "desy-status", inputs: { text: "text", id: "id", icon: "icon", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "iconComponent", predicate: IconComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p class=\"inline-flex items-center\">\n  <span class=\"inline-block font-bold uppercase\">{{text}}</span>\n  <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \n    <ng-container [ngSwitch]=\"getType()\">\n      <ng-container *ngSwitchCase=\"'success'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'alert'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'loading'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'error'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <ng-template #elseBlock>\n    <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \n  </ng-template>\n</p>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.InnerContentDirective, selector: "[desyInnerContent]", inputs: ["desyInnerContent", "isHtml", "deleteContentIfEmpty"] }] }); }
 }
 __decorate([
     DesyContentChild(),
     __metadata("design:type", IconComponent)
 ], StatusComponent.prototype, "iconComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: StatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-status', template: "<p class=\"inline-flex items-center\">\n  <span class=\"inline-block font-bold uppercase\">{{text}}</span>\n  <span class=\"inline-block ml-sm\" *ngIf=\"!icon || !icon.html; else elseBlock\">                         \n    <ng-container [ngSwitch]=\"getType()\">\n      <ng-container *ngSwitchCase=\"'success'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-success-dark\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'alert'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'loading'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z\" fill=\"currentColor\"/><path d=\"M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'error'\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z\" fill=\"currentColor\"/><path d=\"M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <ng-template #elseBlock>\n    <span class=\"inline-block ml-sm\" [desyInnerContent]=\"icon.html\" [isHtml]=\"isHtml\" [deleteContentIfEmpty]=\"false\"><ng-content></ng-content></span>            \n  </ng-template>\n</p>\n" }]
         }], propDecorators: { text: [{

package/esm2022/lib/desy-views/components/status-item/status-item.component.mjs

@@ -35,8 +35,8 @@ export class StatusItemComponent extends AccessibilityComponent {
     getItems() {
         return (this.itemComponents.length > 0) ? this.itemComponents.toArray() : this.items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StatusItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: StatusItemComponent, selector: "desy-status-item", inputs: { id: "id", errorId: "errorId", describedBy: "describedBy", title: "title", hint: "hint", errorMessage: "errorMessage", items: "items", status: "status", classes: "classes", caller: "caller" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "hintComponent", predicate: HintComponent }, { propertyName: "errorMessageComponent", predicate: ErrorMessageComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "itemComponents", predicate: DescriptionItemComponent }, { propertyName: "statusComponent", predicate: StatusComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #commonHtml>\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\n     <ng-container *desyCustomInnerContent=\"{\n        component: titleComponent,\n        html: title ? title.html : null,\n        text: title ? title.text : null\n      }\"></ng-container>\n  </p>\n\n  <ng-container *ngIf=\"hintComponent\">\n      <ng-content select=\"desy-hint\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!hintComponent && hint\">\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\n               [role]=\"hint.role\"\n               [ariaLabel]=\"hint.ariaLabel\"\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\n               [ariaHidden]=\"hint.ariaHidden\"\n               [ariaDisabled]=\"hint.ariaDisabled\"\n               [ariaControls]=\"hint.ariaControls\"\n               [ariaCurrent]=\"hint.ariaCurrent\"\n               [ariaLive]=\"hint.ariaLive\"\n               [ariaExpanded]=\"hint.ariaExpanded\"\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\n               [tabindex]=\"hint.tabindex\"></desy-hint>\n  </ng-container>\n\n  <ng-container *ngIf=\"errorMessageComponent\">\n    <ng-content select=\"desy-error-message\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\n                        [role]=\"errorMessage.role\"\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\n                        [ariaControls]=\"errorMessage.ariaControls\"\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\n                        [ariaLive]=\"errorMessage.ariaLive\"\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\n  </ng-container>\n</ng-template>\n\n<div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\n  <ng-container *ngIf=\"getItems(); else noItems\">\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n      <dl>\n        <div *ngFor=\"let item of getItems()\"\n            [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\n            [attr.id]=\"item.id ? item.id : null\"\n            [attr.role]=\"item.role\"\n            [attr.aria-describedby]=\"item.ariaDescribedBy\"\n            [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n            [attr.aria-hidden]=\"item.ariaHidden\"\n            [attr.aria-disabled]=\"item.ariaDisabled\"\n            [attr.aria-controls]=\"item.ariaControls\"\n            [attr.aria-current]=\"item.ariaCurrent\"\n            [attr.aria-live]=\"item.ariaLive\"\n            [attr.aria-expanded]=\"item.ariaExpanded\"\n            [attr.aria-haspopup]=\"item.ariaHasPopup\">\n          <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\n              [attr.id]=\"item.term.id ? item.term.id : null\"\n              [attr.role]=\"item.term.role\"\n              [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\n              [attr.aria-label]=\"item.term.ariaLabel\"\n              [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.term.ariaHidden\"\n              [attr.aria-disabled]=\"item.term.ariaDisabled\"\n              [attr.aria-controls]=\"item.term.ariaControls\"\n              [attr.aria-current]=\"item.term.ariaCurrent\"\n              [attr.aria-live]=\"item.term.ariaLive\"\n              [attr.aria-expanded]=\"item.term.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\n          </dt>\n          <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\n              [attr.id]=\"item.definition.id ? item.definition.id : null\"\n              [attr.role]=\"item.definition.role\"\n              [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\n              [attr.aria-label]=\"item.definition.ariaLabel\"\n              [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.definition.ariaHidden\"\n              [attr.aria-disabled]=\"item.definition.ariaDisabled\"\n              [attr.aria-controls]=\"item.definition.ariaControls\"\n              [attr.aria-current]=\"item.definition.ariaCurrent\"\n              [attr.aria-live]=\"item.definition.ariaLive\"\n              [attr.aria-expanded]=\"item.definition.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </ng-container>\n  <ng-template #noItems>\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\n\n    <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\n          [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n    </div>\n\n    <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\n      <ng-container *ngIf=\"statusComponent\">\n        <ng-content select=\"desy-status\"></ng-content>\n      </ng-container>\n      <desy-status *ngIf=\"!statusComponent && status\"\n                    [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\n                    [role]=\"status.role\"\n                    [ariaLabel]=\"status.ariaLabel\"\n                    [ariaDescribedBy]=\"status.ariaDescribedBy\"\n                    [ariaLabelledBy]=\"status.ariaLabelledBy\"\n                    [ariaHidden]=\"status.ariaHidden\"\n                    [ariaDisabled]=\"status.ariaDisabled\"\n                    [ariaControls]=\"status.ariaControls\"\n                    [ariaCurrent]=\"status.ariaCurrent\"\n                    [ariaLive]=\"status.ariaLive\"\n                    [ariaExpanded]=\"status.ariaExpanded\"\n                    [ariaErrorMessage]=\"status.ariaErrorMessage\"\n                    [ariaHasPopup]=\"status.ariaHasPopup\"\n                    [tabindex]=\"status.tabindex\"></desy-status>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: i3.HintComponent, selector: "desy-hint", inputs: ["id", "classes", "html", "text"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "component", type: i5.StatusComponent, selector: "desy-status", inputs: ["text", "id", "icon", "classes"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: StatusItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: StatusItemComponent, selector: "desy-status-item", inputs: { id: "id", errorId: "errorId", describedBy: "describedBy", title: "title", hint: "hint", errorMessage: "errorMessage", items: "items", status: "status", classes: "classes", caller: "caller" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "titleComponent", predicate: TitleComponent }, { propertyName: "hintComponent", predicate: HintComponent }, { propertyName: "errorMessageComponent", predicate: ErrorMessageComponent }, { propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "itemComponents", predicate: DescriptionItemComponent }, { propertyName: "statusComponent", predicate: StatusComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #commonHtml>\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\n     <ng-container *desyCustomInnerContent=\"{\n        component: titleComponent,\n        html: title ? title.html : null,\n        text: title ? title.text : null\n      }\"></ng-container>\n  </p>\n\n  <ng-container *ngIf=\"hintComponent\">\n      <ng-content select=\"desy-hint\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!hintComponent && hint\">\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\n               [role]=\"hint.role\"\n               [ariaLabel]=\"hint.ariaLabel\"\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\n               [ariaHidden]=\"hint.ariaHidden\"\n               [ariaDisabled]=\"hint.ariaDisabled\"\n               [ariaControls]=\"hint.ariaControls\"\n               [ariaCurrent]=\"hint.ariaCurrent\"\n               [ariaLive]=\"hint.ariaLive\"\n               [ariaExpanded]=\"hint.ariaExpanded\"\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\n               [tabindex]=\"hint.tabindex\"></desy-hint>\n  </ng-container>\n\n  <ng-container *ngIf=\"errorMessageComponent\">\n    <ng-content select=\"desy-error-message\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\n                        [role]=\"errorMessage.role\"\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\n                        [ariaControls]=\"errorMessage.ariaControls\"\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\n                        [ariaLive]=\"errorMessage.ariaLive\"\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\n  </ng-container>\n</ng-template>\n\n<div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\n  <ng-container *ngIf=\"getItems(); else noItems\">\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n      <dl>\n        <div *ngFor=\"let item of getItems()\"\n            [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\n            [attr.id]=\"item.id ? item.id : null\"\n            [attr.role]=\"item.role\"\n            [attr.aria-describedby]=\"item.ariaDescribedBy\"\n            [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n            [attr.aria-hidden]=\"item.ariaHidden\"\n            [attr.aria-disabled]=\"item.ariaDisabled\"\n            [attr.aria-controls]=\"item.ariaControls\"\n            [attr.aria-current]=\"item.ariaCurrent\"\n            [attr.aria-live]=\"item.ariaLive\"\n            [attr.aria-expanded]=\"item.ariaExpanded\"\n            [attr.aria-haspopup]=\"item.ariaHasPopup\">\n          <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\n              [attr.id]=\"item.term.id ? item.term.id : null\"\n              [attr.role]=\"item.term.role\"\n              [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\n              [attr.aria-label]=\"item.term.ariaLabel\"\n              [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.term.ariaHidden\"\n              [attr.aria-disabled]=\"item.term.ariaDisabled\"\n              [attr.aria-controls]=\"item.term.ariaControls\"\n              [attr.aria-current]=\"item.term.ariaCurrent\"\n              [attr.aria-live]=\"item.term.ariaLive\"\n              [attr.aria-expanded]=\"item.term.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\n          </dt>\n          <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\n              [attr.id]=\"item.definition.id ? item.definition.id : null\"\n              [attr.role]=\"item.definition.role\"\n              [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\n              [attr.aria-label]=\"item.definition.ariaLabel\"\n              [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.definition.ariaHidden\"\n              [attr.aria-disabled]=\"item.definition.ariaDisabled\"\n              [attr.aria-controls]=\"item.definition.ariaControls\"\n              [attr.aria-current]=\"item.definition.ariaCurrent\"\n              [attr.aria-live]=\"item.definition.ariaLive\"\n              [attr.aria-expanded]=\"item.definition.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </ng-container>\n  <ng-template #noItems>\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\n\n    <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\n          [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n    </div>\n\n    <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\n      <ng-container *ngIf=\"statusComponent\">\n        <ng-content select=\"desy-status\"></ng-content>\n      </ng-container>\n      <desy-status *ngIf=\"!statusComponent && status\"\n                    [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\n                    [role]=\"status.role\"\n                    [ariaLabel]=\"status.ariaLabel\"\n                    [ariaDescribedBy]=\"status.ariaDescribedBy\"\n                    [ariaLabelledBy]=\"status.ariaLabelledBy\"\n                    [ariaHidden]=\"status.ariaHidden\"\n                    [ariaDisabled]=\"status.ariaDisabled\"\n                    [ariaControls]=\"status.ariaControls\"\n                    [ariaCurrent]=\"status.ariaCurrent\"\n                    [ariaLive]=\"status.ariaLive\"\n                    [ariaExpanded]=\"status.ariaExpanded\"\n                    [ariaErrorMessage]=\"status.ariaErrorMessage\"\n                    [ariaHasPopup]=\"status.ariaHasPopup\"\n                    [tabindex]=\"status.tabindex\"></desy-status>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "component", type: i3.HintComponent, selector: "desy-hint", inputs: ["id", "classes", "html", "text"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "component", type: i5.StatusComponent, selector: "desy-status", inputs: ["text", "id", "icon", "classes"] }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -58,7 +58,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", StatusComponent)
 ], StatusItemComponent.prototype, "statusComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: StatusItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: StatusItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-status-item', template: "<ng-template #commonHtml>\n  <p *ngIf=\"titleComponent || title\" [class]=\"title ?  title.classes : 'my-sm'\">\n     <ng-container *desyCustomInnerContent=\"{\n        component: titleComponent,\n        html: title ? title.html : null,\n        text: title ? title.text : null\n      }\"></ng-container>\n  </p>\n\n  <ng-container *ngIf=\"hintComponent\">\n      <ng-content select=\"desy-hint\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!hintComponent && hint\">\n    <desy-hint [text]=\"hint.text\" [html]=\"hint.html\" [classes]=\"hint.classes\" [id]=\"hint.id\"\n               [role]=\"hint.role\"\n               [ariaLabel]=\"hint.ariaLabel\"\n               [ariaDescribedBy]=\"(hint.ariaDescribedBy ? hint.ariaDescribedBy + '' + hint.id : hint.id)\"\n               [ariaLabelledBy]=\"hint.ariaLabelledBy\"\n               [ariaHidden]=\"hint.ariaHidden\"\n               [ariaDisabled]=\"hint.ariaDisabled\"\n               [ariaControls]=\"hint.ariaControls\"\n               [ariaCurrent]=\"hint.ariaCurrent\"\n               [ariaLive]=\"hint.ariaLive\"\n               [ariaExpanded]=\"hint.ariaExpanded\"\n               [ariaErrorMessage]=\"hint.ariaErrorMessage\"\n               [ariaHasPopup]=\"hint.ariaHasPopup\"\n               [tabindex]=\"hint.tabindex\"></desy-hint>\n  </ng-container>\n\n  <ng-container *ngIf=\"errorMessageComponent\">\n    <ng-content select=\"desy-error-message\"></ng-content>\n  </ng-container>\n  <ng-container *ngIf=\"!errorMessageComponent && errorMessage\">\n    <desy-error-message [text]=\"errorMessage.text\" [html]=\"errorMessage.html\"\n                        [visuallyHiddenText]=\"errorMessage.visuallyHiddenText\"\n                        [id]=\"(errorId ? errorId : id + '-error')\" [classes]=\"errorMessage.classes\"\n                        [role]=\"errorMessage.role\"\n                        [ariaLabel]=\"errorMessage.ariaLabel\"\n                        [ariaDescribedBy]=\"(errorMessage.ariaDescribedBy ? errorMessage.ariaDescribedBy + '' + errorId : errorId)\"\n                        [ariaLabelledBy]=\"errorMessage.ariaLabelledBy\"\n                        [ariaHidden]=\"errorMessage.ariaHidden\"\n                        [ariaDisabled]=\"errorMessage.ariaDisabled\"\n                        [ariaControls]=\"errorMessage.ariaControls\"\n                        [ariaCurrent]=\"errorMessage.ariaCurrent\"\n                        [ariaLive]=\"errorMessage.ariaLive\"\n                        [ariaExpanded]=\"errorMessage.ariaExpanded\"\n                        [ariaErrorMessage]=\"errorMessage.ariaErrorMessage\"\n                        [ariaHasPopup]=\"errorMessage.ariaHasPopup\"\n                        [tabindex]=\"errorMessage.tabindex\"></desy-error-message>\n  </ng-container>\n</ng-template>\n\n<div class=\"lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base\">\n  <ng-container *ngIf=\"getItems(); else noItems\">\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n      <dl>\n        <div *ngFor=\"let item of getItems()\"\n            [class]=\"(item.classes ? 'flex lg-flex-wrap ' + item.classes : 'flex lg-flex-wrap')\"\n            [attr.id]=\"item.id ? item.id : null\"\n            [attr.role]=\"item.role\"\n            [attr.aria-describedby]=\"item.ariaDescribedBy\"\n            [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n            [attr.aria-hidden]=\"item.ariaHidden\"\n            [attr.aria-disabled]=\"item.ariaDisabled\"\n            [attr.aria-controls]=\"item.ariaControls\"\n            [attr.aria-current]=\"item.ariaCurrent\"\n            [attr.aria-live]=\"item.ariaLive\"\n            [attr.aria-expanded]=\"item.ariaExpanded\"\n            [attr.aria-haspopup]=\"item.ariaHasPopup\">\n          <dt [class]=\"(item.term.classes ?  item.term.classes : 'w-1/2 my-sm')\"\n              [attr.id]=\"item.term.id ? item.term.id : null\"\n              [attr.role]=\"item.term.role\"\n              [attr.aria-describedby]=\"item.term.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.term.ariaErrorMessage\"\n              [attr.aria-label]=\"item.term.ariaLabel\"\n              [attr.aria-labelledby]=\"item.term.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.term.ariaHidden\"\n              [attr.aria-disabled]=\"item.term.ariaDisabled\"\n              [attr.aria-controls]=\"item.term.ariaControls\"\n              [attr.aria-current]=\"item.term.ariaCurrent\"\n              [attr.aria-live]=\"item.term.ariaLive\"\n              [attr.aria-expanded]=\"item.term.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.term.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.term, html: item.term.html, text: item.term.text}\"></ng-container>\n          </dt>\n          <dd [class]=\"(item.definition.classes ?  item.definition.classes : 'w-1/2 my-sm font-semibold')\"\n              [attr.id]=\"item.definition.id ? item.definition.id : null\"\n              [attr.role]=\"item.definition.role\"\n              [attr.aria-describedby]=\"item.definition.ariaDescribedBy\"\n              [attr.aria-errormessage]=\"item.definition.ariaErrorMessage\"\n              [attr.aria-label]=\"item.definition.ariaLabel\"\n              [attr.aria-labelledby]=\"item.definition.ariaLabelledBy\"\n              [attr.aria-hidden]=\"item.definition.ariaHidden\"\n              [attr.aria-disabled]=\"item.definition.ariaDisabled\"\n              [attr.aria-controls]=\"item.definition.ariaControls\"\n              [attr.aria-current]=\"item.definition.ariaCurrent\"\n              [attr.aria-live]=\"item.definition.ariaLive\"\n              [attr.aria-expanded]=\"item.definition.ariaExpanded\"\n              [attr.aria-haspopup]=\"item.definition.ariaHasPopup\">\n              <ng-container *desyCustomInnerContent=\"{ component: item.definition, html: item.definition.html, text: item.definition.text}\"></ng-container>\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </ng-container>\n  <ng-template #noItems>\n    <div class=\"lg:w-2/3\">\n      <ng-container *ngTemplateOutlet=\"commonHtml\"></ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"lg:flex lg:flex-wrap lg:items-center lg:1/3\">\n\n    <div *ngIf=\"contentComponent || caller\" [id]=\"id + '-status-item'\"\n          [class]=\"'w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0'\">\n      <ng-container *desyCustomInnerContent=\"{ component: contentComponent, template: caller }\"></ng-container>\n    </div>\n\n    <div *ngIf=\"statusComponent || status\" class=\"mb-base lg:mb-0 ml-base py-sm\">\n      <ng-container *ngIf=\"statusComponent\">\n        <ng-content select=\"desy-status\"></ng-content>\n      </ng-container>\n      <desy-status *ngIf=\"!statusComponent && status\"\n                    [text]=\"status.text\" [icon]=\"status.icon\" [classes]=\"status.classes\" [id]=\"status.id\"\n                    [role]=\"status.role\"\n                    [ariaLabel]=\"status.ariaLabel\"\n                    [ariaDescribedBy]=\"status.ariaDescribedBy\"\n                    [ariaLabelledBy]=\"status.ariaLabelledBy\"\n                    [ariaHidden]=\"status.ariaHidden\"\n                    [ariaDisabled]=\"status.ariaDisabled\"\n                    [ariaControls]=\"status.ariaControls\"\n                    [ariaCurrent]=\"status.ariaCurrent\"\n                    [ariaLive]=\"status.ariaLive\"\n                    [ariaExpanded]=\"status.ariaExpanded\"\n                    [ariaErrorMessage]=\"status.ariaErrorMessage\"\n                    [ariaHasPopup]=\"status.ariaHasPopup\"\n                    [tabindex]=\"status.tabindex\"></desy-status>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { id: [{

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

package/esm2022/lib/desy-views/components/tabs/tab-item/tab-item.component.mjs

@@ -6,8 +6,8 @@ import { PanelComponent } from '../panel/panel.component';
 import { AccessibilityComponent } from '../../../../shared/components';
 import * as i0 from "@angular/core";
 export class TabItemComponent extends AccessibilityComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TabItemComponent, selector: "desy-tab-item", inputs: { classes: "classes", disabled: "disabled", id: "id" }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "panelComponent", predicate: PanelComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: TabItemComponent, selector: "desy-tab-item", inputs: { classes: "classes", disabled: "disabled", id: "id" }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "panelComponent", predicate: PanelComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     DesyContentChild(),
@@ -17,7 +17,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", PanelComponent)
 ], TabItemComponent.prototype, "panelComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'desy-tab-item',

package/esm2022/lib/desy-views/components/tabs/tabs.component.mjs

@@ -119,10 +119,10 @@ export class TabsComponent extends AccessibilityComponent {
         const item = this.getItems();
         return item[tab].panel && item[tab].panel.text ? `<p>${StringUtils.escapeHtml(item[tab].panel.text)}</p>` : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MediaMatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TabsComponent, selector: "desy-tabs", inputs: { id: "id", idPrefix: "idPrefix", headingLevel: "headingLevel", title: "title", tablistAriaLabel: "tablistAriaLabel", items: "items", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "itemComponents", predicate: TabItemComponent }], viewQueries: [{ propertyName: "tabSrOnly", first: true, predicate: ["tabSrOnly"], descendants: true }, { propertyName: "tabSelectors", predicate: ["tabSelector"], descendants: true }, { propertyName: "tabSelectorContentWrapper", predicate: ["tabSelectorContentWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"title\">\n  <ng-container [ngSwitch]=\"headingLevel\">\n    <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\n    <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n    <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\n    <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\n    <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\n    <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"!title\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\n      <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n      <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\n      <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\n      <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\n      <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n    </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"getItems()\">\n  <div class=\"c-tabs lg:flex lg:flex-wrap mb-[-0.125rem]\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\n              <button #tabSelector\n                      (click)=\"selectTab(i)\"\n                      (keydown.home)=\"focusFirstTab($event)\"\n                      (keydown.end)=\"focusLastTab($event)\"\n                      (keydown.arrowleft)=\"focusPreviousTab(i)\"\n                      (keydown.arrowright)=\"focusNextTab(i)\"\n                      class=\"aria-selected:bg-white aria-selected:rounded-t-[0.1875rem] aria-selected:border-b-0 relative flex items-center text-black underline truncate border border-transparent aria-selected:no-underline py-sm lg:px-lg lg:py-base hover:text-primary-base focus:outline-none\"\n                      [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item), 'aria-selected:border-[rgb(146_148_155/1)]' : !this.mobileQuery.matches}\"\n                      [attr.id]=\"getItemId(i)\"\n                      [attr.role]=\"(item.role ? role : 'tab')\"\n                      [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-controls]=\"'tab-' + getItemId(i)\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\n                      [attr.disabled]=\"isDisabled(item)\"\n                      [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\n                  <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\n                    <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\n                  </span>\n              </button>\n      </ng-container>\n  </div>\n\n  <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\n        [attr.id]=\"'tab-' + getItemId(currentTab)\"\n        [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\n        [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\n        [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\n        [attr.aria-label]=\"currentPanel?.ariaLabel\"\n        [attr.aria-labelledby]=\"getItemId(currentTab)\"\n        [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\n        [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\n        [attr.aria-controls]=\"currentPanel?.ariaControls\"\n        [attr.aria-current]=\"currentPanel?.ariaCurrent\"\n        [attr.aria-live]=\"currentPanel?.ariaLive\"\n        [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\n        [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\n        [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\n      <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\n      <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n      <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\n      <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\n      <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n    </ng-container>\n    <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\n  </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MediaMatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: TabsComponent, selector: "desy-tabs", inputs: { id: "id", idPrefix: "idPrefix", headingLevel: "headingLevel", title: "title", tablistAriaLabel: "tablistAriaLabel", items: "items", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "itemComponents", predicate: TabItemComponent }], viewQueries: [{ propertyName: "tabSrOnly", first: true, predicate: ["tabSrOnly"], descendants: true }, { propertyName: "tabSelectors", predicate: ["tabSelector"], descendants: true }, { propertyName: "tabSelectorContentWrapper", predicate: ["tabSelectorContentWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"title\">\n  <ng-container [ngSwitch]=\"headingLevel\">\n    <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\n    <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n    <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\n    <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\n    <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\n    <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"!title\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\n      <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n      <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\n      <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\n      <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\n      <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n    </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"getItems()\">\n  <div class=\"c-tabs lg:flex lg:flex-wrap mb-[-0.125rem]\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\n              <button #tabSelector\n                      (click)=\"selectTab(i)\"\n                      (keydown.home)=\"focusFirstTab($event)\"\n                      (keydown.end)=\"focusLastTab($event)\"\n                      (keydown.arrowleft)=\"focusPreviousTab(i)\"\n                      (keydown.arrowright)=\"focusNextTab(i)\"\n                      class=\"aria-selected:bg-white aria-selected:rounded-t-[0.1875rem] aria-selected:border-b-0 relative flex items-center text-black underline truncate border border-transparent aria-selected:no-underline py-sm lg:px-lg lg:py-base hover:text-primary-base focus:outline-none\"\n                      [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item), 'aria-selected:border-[rgb(146_148_155/1)]' : !this.mobileQuery.matches}\"\n                      [attr.id]=\"getItemId(i)\"\n                      [attr.role]=\"(item.role ? role : 'tab')\"\n                      [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-controls]=\"'tab-' + getItemId(i)\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\n                      [attr.disabled]=\"isDisabled(item)\"\n                      [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\n                  <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\n                    <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\n                  </span>\n              </button>\n      </ng-container>\n  </div>\n\n  <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\n        [attr.id]=\"'tab-' + getItemId(currentTab)\"\n        [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\n        [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\n        [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\n        [attr.aria-label]=\"currentPanel?.ariaLabel\"\n        [attr.aria-labelledby]=\"getItemId(currentTab)\"\n        [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\n        [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\n        [attr.aria-controls]=\"currentPanel?.ariaControls\"\n        [attr.aria-current]=\"currentPanel?.ariaCurrent\"\n        [attr.aria-live]=\"currentPanel?.ariaLive\"\n        [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\n        [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\n        [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\n      <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\n      <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n      <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\n      <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\n      <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n    </ng-container>\n    <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\n  </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-tabs', template: "<ng-container *ngIf=\"title\">\n  <ng-container [ngSwitch]=\"headingLevel\">\n    <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h1>\n    <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n    <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h3>\n    <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h4>\n    <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">{{title}}</h5>\n    <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">{{title}}</h2>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"!title\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" class=\"lg:hidden mb-sm text-sm\">Contenido</h1>\n      <h2 *ngSwitchCase=\"2\" class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n      <h3 *ngSwitchCase=\"3\" class=\"lg:hidden mb-sm text-sm\">Contenido</h3>\n      <h4 *ngSwitchCase=\"4\" class=\"lg:hidden mb-sm text-sm\">Contenido</h4>\n      <h5 *ngSwitchCase=\"5\" class=\"lg:hidden mb-sm text-sm\">Contenido</h5>\n      <h2 *ngSwitchDefault class=\"lg:hidden mb-sm text-sm\">Contenido</h2>\n    </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"getItems()\">\n  <div class=\"c-tabs lg:flex lg:flex-wrap mb-[-0.125rem]\" role=\"tablist\" [attr.aria-label]=tablistAriaLabel>\n      <ng-container *ngFor=\"let item of getItems(); index as i\">\n              <button #tabSelector\n                      (click)=\"selectTab(i)\"\n                      (keydown.home)=\"focusFirstTab($event)\"\n                      (keydown.end)=\"focusLastTab($event)\"\n                      (keydown.arrowleft)=\"focusPreviousTab(i)\"\n                      (keydown.arrowright)=\"focusNextTab(i)\"\n                      class=\"aria-selected:bg-white aria-selected:rounded-t-[0.1875rem] aria-selected:border-b-0 relative flex items-center text-black underline truncate border border-transparent aria-selected:no-underline py-sm lg:px-lg lg:py-base hover:text-primary-base focus:outline-none\"\n                      [ngClass]=\"{'opacity-50 pointer-events-none': isDisabled(item), 'aria-selected:border-[rgb(146_148_155/1)]' : !this.mobileQuery.matches}\"\n                      [attr.id]=\"getItemId(i)\"\n                      [attr.role]=\"(item.role ? role : 'tab')\"\n                      [attr.aria-selected]=\"currentTab === i ? 'true' : 'false'\"\n                      [attr.aria-describedby]=\"item.ariaDescribedBy\"\n                      [attr.aria-errormessage]=\"item.ariaErrorMessage\"\n                      [attr.aria-label]=\"item.ariaLabel\"\n                      [attr.aria-labelledby]=\"item.ariaLabelledBy\"\n                      [attr.aria-hidden]=\"item.ariaHidden\"\n                      [attr.aria-controls]=\"'tab-' + getItemId(i)\"\n                      [attr.aria-current]=\"item.ariaCurrent\"\n                      [attr.aria-live]=\"item.ariaLive\"\n                      [attr.aria-expanded]=\"item.ariaExpanded\"\n                      [attr.aria-haspopup]=\"item.ariaHasPopup\"\n                      [attr.tabindex]=\"(currentTab !== i || item.disabled ? '-1' : null)\"\n                      [attr.disabled]=\"isDisabled(item)\"\n                      [attr.aria-disabled]=\"isDisabled(item) ? 'true' : (ariaDisabled ? ariaDisabled : null)\">\n                  <span #tabSelectorContentWrapper class=\"flex items-center pointer-events-none\">\n                    <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent, html: item.html, text: item.text}\"></ng-container>\n                  </span>\n              </button>\n      </ng-container>\n  </div>\n\n  <div [class]=\"['p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base', currentPanel?.classes] | makeHtmlList\"\n        [attr.id]=\"'tab-' + getItemId(currentTab)\"\n        [attr.role]=\"(currentPanel?.role ? currentPanel?.role : 'tabpanel')\"\n        [attr.aria-describedby]=\"currentPanel?.ariaDescribedBy\"\n        [attr.aria-errormessage]=\"currentPanel?.ariaErrorMessage\"\n        [attr.aria-label]=\"currentPanel?.ariaLabel\"\n        [attr.aria-labelledby]=\"getItemId(currentTab)\"\n        [attr.aria-hidden]=\"currentPanel?.ariaHidden\"\n        [attr.aria-disabled]=\"currentPanel?.ariaDisabled\"\n        [attr.aria-controls]=\"currentPanel?.ariaControls\"\n        [attr.aria-current]=\"currentPanel?.ariaCurrent\"\n        [attr.aria-live]=\"currentPanel?.ariaLive\"\n        [attr.aria-expanded]=\"currentPanel?.ariaExpanded\"\n        [attr.aria-haspopup]=\"currentPanel?.ariaHasPopup\"\n        [attr.tabindex]=\"(currentPanel?.tabindex ? currentPanel?.tabindex : '0')\">\n    <ng-container [ngSwitch]=\"headingLevel\">\n      <h1 *ngSwitchCase=\"1\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h1>\n      <h2 *ngSwitchCase=\"2\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h2>\n      <h3 *ngSwitchCase=\"3\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n      <h4 *ngSwitchCase=\"4\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h4>\n      <h5 *ngSwitchCase=\"5\" #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h5>\n      <h3 *ngSwitchDefault #tabSrOnly class=\"lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold\"></h3>\n    </ng-container>\n    <ng-container *desyCustomInnerContent=\"{ component: getItemPanel(currentTab), template: currentPanel?.html, html: getPanelContent(currentTab) }\"></ng-container>\n  </div>\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.MediaMatcher }]; }, propDecorators: { itemComponents: [{

package/esm2022/lib/desy-views/components/tooltip/tooltip-content/tooltip-content.component.mjs

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

package/esm2022/lib/desy-views/components/tooltip/tooltip.component.mjs

@@ -111,8 +111,8 @@ export class TooltipComponent extends AccessibilityComponent {
         }
         return iconContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TooltipComponent, selector: "desy-tooltip", inputs: { id: "id", text: "text", html: "html", complex: "complex", classesTooltip: "classesTooltip", icon: "icon", caller: "caller", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "tooltipContentComponent", predicate: TooltipContentComponent }], viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n      tabindex=\"0\" role=\"button\"\n      [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\n  <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\n  <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\n  <span *ngIf=\"iconComponent\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\n\n    <ng-container *ngIf=\"!hasIconComponentContent\">\n      <ng-container [ngSwitch]=\"iconComponent.type\">\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\n  </span>\n</div>\n\n<div #tooltipContent [attr.id]=\"getIdTooltip()\"\n      [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\n  <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.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: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: TooltipComponent, selector: "desy-tooltip", inputs: { id: "id", text: "text", html: "html", complex: "complex", classesTooltip: "classesTooltip", icon: "icon", caller: "caller", classes: "classes" }, host: { properties: { "class": "this.classes", "attr.id": "this.idData", "attr.role": "this.roleData", "attr.aria-describedby": "this.ariaDescribedbyData", "attr.aria-errormessage": "this.ariaErrormessageData", "attr.aria-label": "this.ariaLabelData", "attr.aria-labelledby": "this.ariaLabelledbyData", "attr.aria-hidden": "this.ariaHiddenData", "attr.aria-disabled": "this.ariaDisabledData", "attr.aria-controls": "this.ariaControlsData", "attr.aria-current": "this.ariaCurrentData", "attr.aria-live": "this.ariaLiveData", "attr.aria-expanded": "this.ariaExpandedData", "attr.aria-haspopup": "this.ariaHaspopupData", "attr.tabindex": "this.tabindexData" } }, queries: [{ propertyName: "contentComponent", predicate: ContentComponent }, { propertyName: "iconComponent", predicate: IconComponent }, { propertyName: "tooltipContentComponent", predicate: TooltipContentComponent }], viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n      tabindex=\"0\" role=\"button\"\n      [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\n  <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\n  <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\n  <span *ngIf=\"iconComponent\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\n\n    <ng-container *ngIf=\"!hasIconComponentContent\">\n      <ng-container [ngSwitch]=\"iconComponent.type\">\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\n  </span>\n</div>\n\n<div #tooltipContent [attr.id]=\"getIdTooltip()\"\n      [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\n  <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: i3.NgxTippyDirective, selector: "[ngxTippy]", inputs: ["ngxTippy", "tippyProps", "tippyName", "tippyClassName"] }, { kind: "pipe", type: i4.MakeHtmlListPipe, name: "makeHtmlList" }] }); }
 }
 __decorate([
     DesyContentChild(),
@@ -126,7 +126,7 @@ __decorate([
     DesyContentChild(),
     __metadata("design:type", TooltipContentComponent)
 ], TooltipComponent.prototype, "tooltipContentComponent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'desy-tooltip', template: "<div *ngIf=\"tippyProperties\" [attr.id]=\"getIdButton()\"\n      ngxTippy [tippyProps]=\"tippyProperties\"\n      class=\"inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n      tabindex=\"0\" role=\"button\"\n      [attr.aria-labelledby]=\"getIdButton() + ' ' + getIdTooltip()\">\n  <ng-container *desyCustomInnerContent=\"{ component: contentComponent, html: getMainContent() }\"></ng-container>\n  <span *ngIf=\"hasContent && ( (iconComponent) || (icon) )\" class=\"inline-block w-1.5\"></span>\n  <span *ngIf=\"iconComponent\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ component: iconComponent }\"></ng-container>\n\n    <ng-container *ngIf=\"!hasIconComponentContent\">\n      <ng-container [ngSwitch]=\"iconComponent.type\">\n        <svg *ngSwitchCase=\"'info'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Informaci\u00F3n\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchCase=\"'alert'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-alert-base\" role=\"img\" aria-label=\"Alerta\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n        <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" role=\"img\" aria-label=\"Ayuda\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>\n      </ng-container>\n    </ng-container>\n  </span>\n  <span *ngIf=\"!iconComponent && icon\" class=\"inline-block\">\n    <ng-container *desyCustomInnerContent=\"{ html: getIconContent(icon) }\"></ng-container>\n  </span>\n</div>\n\n<div #tooltipContent [attr.id]=\"getIdTooltip()\"\n      [class]=\"['-my-xs p-sm shadow-md bg-black rounded text-white', classesTooltip] | makeHtmlList\">\n  <ng-container *desyCustomInnerContent=\"{ component: tooltipContentComponent, template: caller }\"></ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { contentComponent: [{

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

@@ -34,8 +34,8 @@ import { AccordionItemShowButtonComponent } from './components/accordion-history
 import { AccordionItemHideButtonComponent } from './components/accordion-history/accordion-item-hide-button/accordion-item-hide-button.component';
 import * as i0 from "@angular/core";
 export class DesyViewsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyViewsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: DesyViewsModule, declarations: [AlertComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyViewsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: DesyViewsModule, declarations: [AlertComponent,
             AccordionComponent,
             AccordionHeaderComponent,
             AccordionHistoryComponent,
@@ -94,13 +94,13 @@ export class DesyViewsModule {
             PanelComponent,
             TabItemComponent,
             MediaObjectFigureComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyViewsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyViewsModule, imports: [CommonModule,
             SharedModule,
             DesyFormsModule,
             DesyCommonsModule,
             NgxTippyModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: DesyViewsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DesyViewsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [