@festo-ui/angular 3.1.0-pre-20220307.6 → 3.1.0-pre-20220321.4

package/fesm2015/festo-ui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChild, Directive, ViewChild, ContentChildren, TemplateRef, Injector, Injectable, HostListener, ChangeDetectionStrategy, Inject, Pipe, NgModule, forwardRef, HostBinding, Optional, SimpleChange, ViewContainerRef, LOCALE_ID, SecurityContext } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChild, Directive, ViewChild, ContentChildren, TemplateRef, Injector, Injectable, HostListener, ChangeDetectionStrategy, Inject, Pipe, SimpleChange, NgModule, forwardRef, HostBinding, Optional, ViewContainerRef, LOCALE_ID, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@angular/router';
@@ -1795,6 +1795,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: [MobileFlyoutPageComponent]
             }] } });
 
+class AccordionItemBodyComponent {
+    constructor() {
+        // parentId will be set by accordion item this body belongs to
+        this.id = '';
+    }
+}
+AccordionItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AccordionItemBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AccordionItemBodyComponent, selector: "fng-accordion-item-body", ngImport: i0, template: "<div\n  role=\"region\"\n  [attr.id]=\"id +  '-body'\"\n  [attr.aria-labelledby]=\"id + '-header'\"\n  class=\"fng-accordion-item-body\"\n>\n  <ng-content></ng-content>\n  <div class=\"fng-accordion-item-body-spacer-bottom\"></div>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-accordion-item-body{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1);height:0px}.fng-accordion-item-body>:first-child:not(.fng-accordion-item-body-spacer-bottom):not(.fng-accordion){margin-top:0!important;padding-top:0!important}.fng-accordion-item-body>:not(.fng-accordion){margin-right:0}.fng-accordion-item-body-content{margin-right:64px}.fng-accordion-item-body-spacer-bottom{margin-top:24px;height:0;width:0}.fng-accordion-item-body .fng-accordion{margin-top:64px;margin-bottom:24px}.fng-accordion-item-body .fng-accordion-item-link{display:block;top:8px}.fng-accordion-item-body .fng-accordion-item-header{padding-top:32px;padding-right:32px}.fng-accordion-item-body .fng-accordion-item:after{top:8px;right:0px;color:var(--fwe-caerul);font-family:festo_icons-16;font-size:24px;content:\"\\e900\";height:24px;line-height:24px}.fng-accordion-item-body .fng-accordion-item--expanded:before{background-color:transparent}@media (min-width: 600px){.fng-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fng-accordion-item-body .fng-accordion-item-header{padding-top:24px;padding-right:168px}.fng-accordion-item-body .fng-accordion-item-link{font-size:16px;top:24px;max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fng-accordion-item-body .fng-accordion-item:after{top:27px}}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fng-accordion-item-body', encapsulation: ViewEncapsulation.None, template: "<div\n  role=\"region\"\n  [attr.id]=\"id +  '-body'\"\n  [attr.aria-labelledby]=\"id + '-header'\"\n  class=\"fng-accordion-item-body\"\n>\n  <ng-content></ng-content>\n  <div class=\"fng-accordion-item-body-spacer-bottom\"></div>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-accordion-item-body{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1);height:0px}.fng-accordion-item-body>:first-child:not(.fng-accordion-item-body-spacer-bottom):not(.fng-accordion){margin-top:0!important;padding-top:0!important}.fng-accordion-item-body>:not(.fng-accordion){margin-right:0}.fng-accordion-item-body-content{margin-right:64px}.fng-accordion-item-body-spacer-bottom{margin-top:24px;height:0;width:0}.fng-accordion-item-body .fng-accordion{margin-top:64px;margin-bottom:24px}.fng-accordion-item-body .fng-accordion-item-link{display:block;top:8px}.fng-accordion-item-body .fng-accordion-item-header{padding-top:32px;padding-right:32px}.fng-accordion-item-body .fng-accordion-item:after{top:8px;right:0px;color:var(--fwe-caerul);font-family:festo_icons-16;font-size:24px;content:\"\\e900\";height:24px;line-height:24px}.fng-accordion-item-body .fng-accordion-item--expanded:before{background-color:transparent}@media (min-width: 600px){.fng-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fng-accordion-item-body .fng-accordion-item-header{padding-top:24px;padding-right:168px}.fng-accordion-item-body .fng-accordion-item-link{font-size:16px;top:24px;max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fng-accordion-item-body .fng-accordion-item:after{top:27px}}\n"] }]
+        }] });
+
+var AccordionHeaderActions;
+(function (AccordionHeaderActions) {
+    AccordionHeaderActions["Toggle"] = "toggle";
+})(AccordionHeaderActions || (AccordionHeaderActions = {}));
+class AccordionItemHeaderComponent {
+    constructor() {
+        // parentId will be set by accordion item this header belongs to
+        this.id = '';
+        this.actions = new Subject();
+        this.actions$ = this.actions.asObservable();
+    }
+    ngOnDestroy() {
+        this.actions.complete();
+    }
+    toggle() {
+        this.actions.next(AccordionHeaderActions.Toggle);
+    }
+}
+AccordionItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AccordionItemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AccordionItemHeaderComponent, selector: "fng-accordion-item-header", ngImport: i0, template: "<div\n  class=\"fng-accordion-item-header\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.id]=\"id + '-header'\"\n  [attr.aria-expanded]=\"\"\n  [attr.aria-controls]=\"id + '-body'\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion-item-header{display:flex;align-items:center;padding:24px 64px 24px 0;min-height:48px;cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fng-accordion-item-header', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fng-accordion-item-header\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.id]=\"id + '-header'\"\n  [attr.aria-expanded]=\"\"\n  [attr.aria-controls]=\"id + '-body'\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion-item-header{display:flex;align-items:center;padding:24px 64px 24px 0;min-height:48px;cursor:pointer}\n"] }]
+        }] });
+
+class AccordionItemComponent {
+    constructor(elementRef, renderer, cd) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.cd = cd;
+        this.componentId = `accordion-item-${++AccordionItemComponent.nextId}`;
+        this.expanded = false;
+        this._linkText = '';
+        // parentId will be set by accordion this item belongs to
+        this.parentId = '';
+        this.pristine = true;
+    }
+    get linkText() {
+        var _a, _b;
+        if (this.expanded === true) {
+            this._linkText = ((_a = this === null || this === void 0 ? void 0 : this.accordion) === null || _a === void 0 ? void 0 : _a.showLess) || '';
+        }
+        else {
+            this._linkText = ((_b = this === null || this === void 0 ? void 0 : this.accordion) === null || _b === void 0 ? void 0 : _b.showMore) || '';
+        }
+        return this._linkText;
+    }
+    ngAfterViewInit() {
+        const element = this.elementRef.nativeElement;
+        this.element = element.querySelector('.fng-accordion-item-body');
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (((_a = changes === null || changes === void 0 ? void 0 : changes.accordion) === null || _a === void 0 ? void 0 : _a.currentValue) != null) {
+            const accordion = changes.accordion.currentValue;
+            this.accordion = accordion;
+            if (this.accordion) {
+                this.subscribeToAccordionActions();
+                this.subscribeToAccordionItemHeaderActions();
+            }
+        }
+        if (((_b = changes === null || changes === void 0 ? void 0 : changes.parentId) === null || _b === void 0 ? void 0 : _b.currentValue) != null) {
+            const parentId = changes.parentId.currentValue;
+            this.id = `${parentId}-${this.componentId}`;
+            this.header.id = this.id;
+            this.body.id = this.id;
+        }
+    }
+    toggle() {
+        // save the new expanded state in another var, because it may be overwritten when closeAll is called
+        const newExpandedState = !this.expanded;
+        const changeExpandedState = () => {
+            this.expanded = newExpandedState;
+            if (this.expanded === true) {
+                this.expandItem();
+            }
+            else {
+                this.collapseItem();
+            }
+        };
+        // if the accordion allows only one expanded item at once we first have to close all items
+        if (this.accordion != null && this.accordion.multi === false) {
+            this.accordion.closeAll();
+            /// run in new macrotask to avoid render issues when transitioning to new expanded state
+            setTimeout(() => {
+                changeExpandedState();
+            });
+        }
+        else {
+            changeExpandedState();
+        }
+    }
+    collapseItem() {
+        // get the height of item body regardless of its actual size
+        const itemHeight = this.element.scrollHeight;
+        // set the actual item height as style to avoid transition from height: auto
+        this.renderer.setStyle(this.element, 'height', itemHeight + 'px');
+        setTimeout(() => {
+            this.renderer.setStyle(this.element, 'height', 0 + 'px');
+        });
+    }
+    expandItem() {
+        // if the item was expanded once, we have to rerun change detection before expanding again
+        // because the content inside may have changed
+        if (this.pristine === false) {
+            this.cd.detectChanges();
+        }
+        // get the height of item body regardless of its actual size
+        const itemHeight = this.element.scrollHeight;
+        this.renderer.setStyle(this.element, 'height', itemHeight + 'px');
+        setTimeout(() => {
+            this.renderer.setStyle(this.element, 'height', null);
+            this.pristine = false;
+        }, 300);
+    }
+    handleAction(action) {
+        switch (action) {
+            case AccordionActions.OpenAll:
+                this.expanded = true;
+                this.expandItem();
+                break;
+            case AccordionActions.CloseAll:
+                if (this.expanded === true) {
+                    this.expanded = false;
+                    this.collapseItem();
+                }
+                break;
+            case AccordionHeaderActions.Toggle:
+                this.toggle();
+                break;
+            default:
+                break;
+        }
+    }
+    subscribeToAccordionActions() {
+        if (this.accordionSubscription != null) {
+            this.accordionSubscription.unsubscribe();
+        }
+        this.accordionSubscription = this.accordion.actions$.subscribe(action => {
+            this.handleAction(action);
+        });
+    }
+    subscribeToAccordionItemHeaderActions() {
+        if (this.accordionItemHeaderSubscription != null) {
+            this.accordionItemHeaderSubscription.unsubscribe();
+        }
+        this.accordionItemHeaderSubscription = this.header.actions$.subscribe(action => {
+            this.handleAction(action);
+        });
+    }
+}
+AccordionItemComponent.nextId = 0;
+AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AccordionItemComponent, selector: "fng-accordion-item", queries: [{ propertyName: "header", first: true, predicate: AccordionItemHeaderComponent, descendants: true }, { propertyName: "body", first: true, predicate: AccordionItemBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"fng-accordion-item\"\n  [class.fng-accordion-item--collapsed]=\"!expanded\"\n  [class.fng-accordion-item--expanded]=\"expanded === true\"\n>\n  <ng-content></ng-content>\n  <div class=\"fng-accordion-item-link\">{{ linkText }}</div>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-accordion-item{position:relative;padding:0 16px 0 24px;border-top:1px solid var(--fwe-gray-100);border-bottom:1px solid var(--fwe-gray-100)}.fng-accordion-item-link{position:absolute;top:24px;right:32px;color:var(--fwe-caerul);font-size:14px;pointer-events:none;display:none}.fng-accordion-item:before{position:absolute;top:0;left:0;display:block;content:\"\";width:4px;height:0px;background-color:var(--fwe-caerul)}.fng-accordion-item:after{position:absolute;top:16px;right:16px;display:block;font-family:festo_icons-32;font-size:32px;content:\"\\e900\";height:32px;line-height:32px;transition:transform .2s ease;pointer-events:none}.fng-accordion-item--expanded .fng-accordion-item-header{font-weight:700}.fng-accordion-item--expanded .fng-accordion-item-body{height:auto}.fng-accordion-item--expanded:after{transform:rotate(-180deg)}.fng-accordion-item--expanded:before{height:100%}.fng-accordion-item--collapsed .fng-accordion-item-body{height:0px}.fng-accordion-item--collapsed .fng-accordion-item-header{font-weight:400}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fng-accordion-item', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fng-accordion-item\"\n  [class.fng-accordion-item--collapsed]=\"!expanded\"\n  [class.fng-accordion-item--expanded]=\"expanded === true\"\n>\n  <ng-content></ng-content>\n  <div class=\"fng-accordion-item-link\">{{ linkText }}</div>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-accordion-item{position:relative;padding:0 16px 0 24px;border-top:1px solid var(--fwe-gray-100);border-bottom:1px solid var(--fwe-gray-100)}.fng-accordion-item-link{position:absolute;top:24px;right:32px;color:var(--fwe-caerul);font-size:14px;pointer-events:none;display:none}.fng-accordion-item:before{position:absolute;top:0;left:0;display:block;content:\"\";width:4px;height:0px;background-color:var(--fwe-caerul)}.fng-accordion-item:after{position:absolute;top:16px;right:16px;display:block;font-family:festo_icons-32;font-size:32px;content:\"\\e900\";height:32px;line-height:32px;transition:transform .2s ease;pointer-events:none}.fng-accordion-item--expanded .fng-accordion-item-header{font-weight:700}.fng-accordion-item--expanded .fng-accordion-item-body{height:auto}.fng-accordion-item--expanded:after{transform:rotate(-180deg)}.fng-accordion-item--expanded:before{height:100%}.fng-accordion-item--collapsed .fng-accordion-item-body{height:0px}.fng-accordion-item--collapsed .fng-accordion-item-header{font-weight:400}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
+                type: ContentChild,
+                args: [AccordionItemHeaderComponent]
+            }], body: [{
+                type: ContentChild,
+                args: [AccordionItemBodyComponent]
+            }] } });
+
+var AccordionActions;
+(function (AccordionActions) {
+    AccordionActions["OpenAll"] = "openAll";
+    AccordionActions["CloseAll"] = "closeAll";
+})(AccordionActions || (AccordionActions = {}));
+class AccordionComponent {
+    constructor() {
+        this.componentId = `accordion-${++AccordionComponent.nextId}`;
+        this.actions = new Subject();
+        this.actions$ = this.actions.asObservable();
+        // if the accordion should only allow one expanded item at once this property can be set to false
+        this.multi = true;
+        this.showMore = 'Show more';
+        this.showLess = 'Show less';
+    }
+    ngAfterViewInit() {
+        this.items.forEach(item => {
+            item.ngOnChanges({
+                parentId: new SimpleChange(null, this.componentId, null),
+                accordion: new SimpleChange(null, this, null)
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.actions.complete();
+    }
+    openAll() {
+        if (this.multi) {
+            this.actions.next(AccordionActions.OpenAll);
+        }
+    }
+    closeAll() {
+        this.actions.next(AccordionActions.CloseAll);
+    }
+}
+AccordionComponent.nextId = 0;
+AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AccordionComponent, selector: "fng-accordion", inputs: { multi: ["fngAccordionKeepItemsOpen", "multi"], showMore: ["fngAccordionShowMoreText", "showMore"], showLess: ["fngAccordionShowLessText", "showLess"] }, queries: [{ propertyName: "items", predicate: AccordionItemComponent }], ngImport: i0, template: "<div class=\"fng-accordion\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion{background-color:var(--fwe-white);border-bottom:1px solid var(--fwe-gray-100)}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fng-accordion', encapsulation: ViewEncapsulation.None, template: "<div class=\"fng-accordion\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion{background-color:var(--fwe-white);border-bottom:1px solid var(--fwe-gray-100)}\n"] }]
+        }], propDecorators: { multi: [{
+                type: Input,
+                args: ['fngAccordionKeepItemsOpen']
+            }], showMore: [{
+                type: Input,
+                args: ['fngAccordionShowMoreText']
+            }], showLess: [{
+                type: Input,
+                args: ['fngAccordionShowLessText']
+            }], items: [{
+                type: ContentChildren,
+                args: [AccordionItemComponent]
+            }] } });
+
+class AccordionHeaderComponent {
+}
+AccordionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AccordionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AccordionHeaderComponent, selector: "fng-accordion-header", ngImport: i0, template: "<div class=\"fng-accordion-header\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion-header{display:flex;align-items:center;height:48px;padding:0 16px 0 24px;font-size:14px;font-weight:700;color:var(--fwe-text);border-bottom:1px solid var(--fwe-gray-100)}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fng-accordion-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"fng-accordion-header\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-accordion-header{display:flex;align-items:center;height:48px;padding:0 16px 0 24px;font-size:14px;font-weight:700;color:var(--fwe-text);border-bottom:1px solid var(--fwe-gray-100)}\n"] }]
+        }] });
+
 class FestoAngularComponentsModule {
 }
 FestoAngularComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1826,7 +2068,12 @@ FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         MobileFlyoutPageComponent,
         MobileFlyoutItemComponent,
         SafeHtmlPipe,
-        ClickOutsideDirective], imports: [RouterModule, CommonModule, OverlayModule, PortalModule], exports: [ButtonComponent,
+        ClickOutsideDirective,
+        AccordionComponent,
+        AccordionHeaderComponent,
+        AccordionItemComponent,
+        AccordionItemHeaderComponent,
+        AccordionItemBodyComponent], imports: [RouterModule, CommonModule, OverlayModule, PortalModule], exports: [ButtonComponent,
         LinkButtonComponent,
         BreadcrumbComponent,
         LoadingIndicatorComponent,
@@ -1854,7 +2101,12 @@ FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         ClickOutsideDirective,
         MobileFlyoutComponent,
         MobileFlyoutPageComponent,
-        MobileFlyoutItemComponent] });
+        MobileFlyoutItemComponent,
+        AccordionComponent,
+        AccordionHeaderComponent,
+        AccordionItemComponent,
+        AccordionItemHeaderComponent,
+        AccordionItemBodyComponent] });
 FestoAngularComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, providers: [], imports: [[RouterModule, CommonModule, OverlayModule, PortalModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, decorators: [{
             type: NgModule,
@@ -1888,7 +2140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MobileFlyoutPageComponent,
                         MobileFlyoutItemComponent,
                         SafeHtmlPipe,
-                        ClickOutsideDirective
+                        ClickOutsideDirective,
+                        AccordionComponent,
+                        AccordionHeaderComponent,
+                        AccordionItemComponent,
+                        AccordionItemHeaderComponent,
+                        AccordionItemBodyComponent
                     ],
                     imports: [RouterModule, CommonModule, OverlayModule, PortalModule],
                     exports: [
@@ -1920,7 +2177,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         ClickOutsideDirective,
                         MobileFlyoutComponent,
                         MobileFlyoutPageComponent,
-                        MobileFlyoutItemComponent
+                        MobileFlyoutItemComponent,
+                        AccordionComponent,
+                        AccordionHeaderComponent,
+                        AccordionItemComponent,
+                        AccordionItemHeaderComponent,
+                        AccordionItemBodyComponent
                     ],
                     providers: [],
                     bootstrap: [PopoverComponent]
@@ -5130,10 +5392,10 @@ class AlertComponent {
     }
 }
 AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AlertComponent, selector: "fng-alert", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [ngClass]=\"{ 'fwe-btn-link': data?.strong === true && (data?.alertType === 'warning' || data?.alertType === 'error') }\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AlertComponent, selector: "fng-alert", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [class.fwe-btn-link]=\"data?.strong\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button\n        *ngIf=\"data?.ok\"\n        type=\"button\"\n        aria-label=\"Ok\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [class.fwe-btn-hero]=\"!data?.strong\"\n        (click)=\"onOk()\"\n      >\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fng-alert', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [ngClass]=\"{ 'fwe-btn-link': data?.strong === true && (data?.alertType === 'warning' || data?.alertType === 'error') }\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'fng-alert', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [class.fwe-btn-link]=\"data?.strong\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button\n        *ngIf=\"data?.ok\"\n        type=\"button\"\n        aria-label=\"Ok\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [class.fwe-btn-hero]=\"!data?.strong\"\n        (click)=\"onOk()\"\n      >\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], propDecorators: { data: [{
                 type: Input
             }], close: [{
@@ -5710,5 +5972,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipContainerComponent, ChipTextPipe, ChipType, ClickOutsideDirective, ColorIndicatorComponent, ColorPickerComponent, ConfirmComponent, ContainerHostDirective as ContainerHost, DatePickerComponent, DateRangePickerComponent, FestoAngularComponentsModule, FestoAngularContentModule, FestoAngularFormsModule, FestoAngularLayoutModule, FestoAngularModalsModule, FestoAngularModule, FestoAngularSnackbarModule, IconComponent, LegendComponent, LegendDirective, LinkButtonComponent, LoadingIndicatorComponent, MobileFlyoutComponent, MobileFlyoutItemComponent, MobileFlyoutPageComponent, ModalService, PREDEFINED_COLORS, PaginationComponent, PaginationType, PopoverComponent, PopoverContentComponent, PopoverContentDirective, PopoverContentTypes, PopoverMenuComponent, PopoverPosition, PopoverTypes, ProgressComponent, PromptComponent, RadioChange, RadioComponent, RadioGroupDirective, SafeHtmlPipe, ScrollableDirective, SearchInputComponent, SearchSuggestion, SegmentComponent, SegmentControlComponent, SelectComponent, SelectOptionComponent, SliderComponent, SnackbarComponent, SnackbarContainerComponent, SnackbarContainerDirective, SnackbarService, StepHorizontalComponent, StepVerticalComponent, StepperHorizontalComponent, StepperVerticalComponent, SwitchComponent, TabPaneComponent, TableHeaderCellDirective, TabsComponent, TextAreaComponent, TextEditorComponent, TextInputComponent, TimePickerComponent, TimePickerDropdownComponent, TooltipDirective, ValueAccessorBaseDirective as ValueAccessorBase };
+export { AccordionActions, AccordionComponent, AccordionHeaderActions, AccordionHeaderComponent, AccordionItemBodyComponent, AccordionItemComponent, AccordionItemHeaderComponent, AlertComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipContainerComponent, ChipTextPipe, ChipType, ClickOutsideDirective, ColorIndicatorComponent, ColorPickerComponent, ConfirmComponent, ContainerHostDirective as ContainerHost, DatePickerComponent, DateRangePickerComponent, FestoAngularComponentsModule, FestoAngularContentModule, FestoAngularFormsModule, FestoAngularLayoutModule, FestoAngularModalsModule, FestoAngularModule, FestoAngularSnackbarModule, IconComponent, LegendComponent, LegendDirective, LinkButtonComponent, LoadingIndicatorComponent, MobileFlyoutComponent, MobileFlyoutItemComponent, MobileFlyoutPageComponent, ModalService, PREDEFINED_COLORS, PaginationComponent, PaginationType, PopoverComponent, PopoverContentComponent, PopoverContentDirective, PopoverContentTypes, PopoverMenuComponent, PopoverPosition, PopoverTypes, ProgressComponent, PromptComponent, RadioChange, RadioComponent, RadioGroupDirective, SafeHtmlPipe, ScrollableDirective, SearchInputComponent, SearchSuggestion, SegmentComponent, SegmentControlComponent, SelectComponent, SelectOptionComponent, SliderComponent, SnackbarComponent, SnackbarContainerComponent, SnackbarContainerDirective, SnackbarService, StepHorizontalComponent, StepVerticalComponent, StepperHorizontalComponent, StepperVerticalComponent, SwitchComponent, TabPaneComponent, TableHeaderCellDirective, TabsComponent, TextAreaComponent, TextEditorComponent, TextInputComponent, TimePickerComponent, TimePickerDropdownComponent, TooltipDirective, ValueAccessorBaseDirective as ValueAccessorBase };
 //# sourceMappingURL=festo-ui-angular.mjs.map