@festo-ui/angular 3.1.0-pre-20220321.2 → 3.1.0-pre-20220323.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/esm2020/lib/components/accordion/accordion-header/accordion-header.component.mjs +11 -0
  2. package/esm2020/lib/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.mjs +15 -0
  3. package/esm2020/lib/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.mjs +28 -0
  4. package/esm2020/lib/components/accordion/accordion-item/accordion-item.component.mjs +143 -0
  5. package/esm2020/lib/components/accordion/accordion.component.mjs +59 -0
  6. package/esm2020/lib/components/accordion/index.mjs +6 -0
  7. package/esm2020/lib/components/components.module.mjs +31 -5
  8. package/esm2020/lib/components/stepper-horizontal/step-horizontal/step-horizontal.component.mjs +5 -2
  9. package/fesm2015/festo-ui-angular.mjs +272 -7
  10. package/fesm2015/festo-ui-angular.mjs.map +1 -1
  11. package/fesm2020/festo-ui-angular.mjs +270 -7
  12. package/fesm2020/festo-ui-angular.mjs.map +1 -1
  13. package/lib/components/accordion/accordion-header/accordion-header.component.d.ts +5 -0
  14. package/lib/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.d.ts +6 -0
  15. package/lib/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.d.ts +15 -0
  16. package/lib/components/accordion/accordion-item/accordion-item.component.d.ts +34 -0
  17. package/lib/components/accordion/accordion.component.d.ts +24 -0
  18. package/lib/components/accordion/index.d.ts +5 -0
  19. package/lib/components/components.module.d.ts +11 -5
  20. package/lib/components/stepper-horizontal/step-horizontal/step-horizontal.component.d.ts +2 -1
  21. package/package.json +1 -1
  22. package/scss/base/components/accordion/accordion-header/accordion-header.component.scss +12 -0
  23. package/scss/base/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.scss +109 -0
  24. package/scss/base/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.scss +9 -0
  25. package/scss/base/components/accordion/accordion-item/accordion-item.component.scss +71 -0
  26. package/scss/base/components/accordion/accordion.component.scss +6 -0
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i1 from '@angular/common';
4
4
  import { DOCUMENT, CommonModule, formatDate } from '@angular/common';
5
5
  import * as i2 from '@angular/router';
@@ -335,15 +335,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
335
335
  class StepHorizontalComponent {
336
336
  constructor() {
337
337
  this.isActive = false;
338
+ this.title = '';
338
339
  }
339
340
  }
340
341
  StepHorizontalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: StepHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
341
- StepHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: StepHorizontalComponent, selector: "fng-step-horizontal", inputs: { isActive: "isActive" }, ngImport: i0, template: "<div class=\"overflow-hidden\" [class.hidden]=\"!isActive\">\n <div class=\"fng-moving-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translate(100%)}to{transform:translate(0)}}.fng-moving-container{animation-name:stepperAnimation;animation-duration:.3s;animation-timing-function:ease}.hidden{display:none}\n"] });
342
+ StepHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: StepHorizontalComponent, selector: "fng-step-horizontal", inputs: { isActive: "isActive", title: "title" }, ngImport: i0, template: "<div class=\"overflow-hidden\" [class.hidden]=\"!isActive\">\n <div class=\"fng-moving-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translate(100%)}to{transform:translate(0)}}.fng-moving-container{animation-name:stepperAnimation;animation-duration:.3s;animation-timing-function:ease}.hidden{display:none}\n"] });
342
343
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: StepHorizontalComponent, decorators: [{
343
344
  type: Component,
344
345
  args: [{ selector: 'fng-step-horizontal', template: "<div class=\"overflow-hidden\" [class.hidden]=\"!isActive\">\n <div class=\"fng-moving-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translate(100%)}to{transform:translate(0)}}.fng-moving-container{animation-name:stepperAnimation;animation-duration:.3s;animation-timing-function:ease}.hidden{display:none}\n"] }]
345
346
  }], propDecorators: { isActive: [{
346
347
  type: Input
348
+ }], title: [{
349
+ type: Input
347
350
  }] } });
348
351
 
349
352
  class StepperHorizontalComponent {
@@ -1789,6 +1792,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
1789
1792
  args: [MobileFlyoutPageComponent]
1790
1793
  }] } });
1791
1794
 
1795
+ class AccordionItemBodyComponent {
1796
+ constructor() {
1797
+ // parentId will be set by accordion item this body belongs to
1798
+ this.id = '';
1799
+ }
1800
+ }
1801
+ AccordionItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1802
+ 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 });
1803
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemBodyComponent, decorators: [{
1804
+ type: Component,
1805
+ 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"] }]
1806
+ }] });
1807
+
1808
+ var AccordionHeaderActions;
1809
+ (function (AccordionHeaderActions) {
1810
+ AccordionHeaderActions["Toggle"] = "toggle";
1811
+ })(AccordionHeaderActions || (AccordionHeaderActions = {}));
1812
+ class AccordionItemHeaderComponent {
1813
+ constructor() {
1814
+ // parentId will be set by accordion item this header belongs to
1815
+ this.id = '';
1816
+ this.actions = new Subject();
1817
+ this.actions$ = this.actions.asObservable();
1818
+ }
1819
+ ngOnDestroy() {
1820
+ this.actions.complete();
1821
+ }
1822
+ toggle() {
1823
+ this.actions.next(AccordionHeaderActions.Toggle);
1824
+ }
1825
+ }
1826
+ AccordionItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1827
+ 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 });
1828
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
1829
+ type: Component,
1830
+ 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"] }]
1831
+ }] });
1832
+
1833
+ class AccordionItemComponent {
1834
+ constructor(elementRef, renderer, cd) {
1835
+ this.elementRef = elementRef;
1836
+ this.renderer = renderer;
1837
+ this.cd = cd;
1838
+ this.componentId = `accordion-item-${++AccordionItemComponent.nextId}`;
1839
+ this.expanded = false;
1840
+ this._linkText = '';
1841
+ // parentId will be set by accordion this item belongs to
1842
+ this.parentId = '';
1843
+ this.pristine = true;
1844
+ }
1845
+ get linkText() {
1846
+ if (this.expanded === true) {
1847
+ this._linkText = this?.accordion?.showLess || '';
1848
+ }
1849
+ else {
1850
+ this._linkText = this?.accordion?.showMore || '';
1851
+ }
1852
+ return this._linkText;
1853
+ }
1854
+ ngAfterViewInit() {
1855
+ const element = this.elementRef.nativeElement;
1856
+ this.element = element.querySelector('.fng-accordion-item-body');
1857
+ }
1858
+ ngOnChanges(changes) {
1859
+ if (changes?.accordion?.currentValue != null) {
1860
+ const accordion = changes.accordion.currentValue;
1861
+ this.accordion = accordion;
1862
+ if (this.accordion) {
1863
+ this.subscribeToAccordionActions();
1864
+ this.subscribeToAccordionItemHeaderActions();
1865
+ }
1866
+ }
1867
+ if (changes?.parentId?.currentValue != null) {
1868
+ const parentId = changes.parentId.currentValue;
1869
+ this.id = `${parentId}-${this.componentId}`;
1870
+ this.header.id = this.id;
1871
+ this.body.id = this.id;
1872
+ }
1873
+ }
1874
+ toggle() {
1875
+ // save the new expanded state in another var, because it may be overwritten when closeAll is called
1876
+ const newExpandedState = !this.expanded;
1877
+ const changeExpandedState = () => {
1878
+ this.expanded = newExpandedState;
1879
+ if (this.expanded === true) {
1880
+ this.expandItem();
1881
+ }
1882
+ else {
1883
+ this.collapseItem();
1884
+ }
1885
+ };
1886
+ // if the accordion allows only one expanded item at once we first have to close all items
1887
+ if (this.accordion != null && this.accordion.multi === false) {
1888
+ this.accordion.closeAll();
1889
+ /// run in new macrotask to avoid render issues when transitioning to new expanded state
1890
+ setTimeout(() => {
1891
+ changeExpandedState();
1892
+ });
1893
+ }
1894
+ else {
1895
+ changeExpandedState();
1896
+ }
1897
+ }
1898
+ collapseItem() {
1899
+ // get the height of item body regardless of its actual size
1900
+ const itemHeight = this.element.scrollHeight;
1901
+ // set the actual item height as style to avoid transition from height: auto
1902
+ this.renderer.setStyle(this.element, 'height', itemHeight + 'px');
1903
+ setTimeout(() => {
1904
+ this.renderer.setStyle(this.element, 'height', 0 + 'px');
1905
+ });
1906
+ }
1907
+ expandItem() {
1908
+ // if the item was expanded once, we have to rerun change detection before expanding again
1909
+ // because the content inside may have changed
1910
+ if (this.pristine === false) {
1911
+ this.cd.detectChanges();
1912
+ }
1913
+ // get the height of item body regardless of its actual size
1914
+ const itemHeight = this.element.scrollHeight;
1915
+ this.renderer.setStyle(this.element, 'height', itemHeight + 'px');
1916
+ setTimeout(() => {
1917
+ this.renderer.setStyle(this.element, 'height', null);
1918
+ this.pristine = false;
1919
+ }, 300);
1920
+ }
1921
+ handleAction(action) {
1922
+ switch (action) {
1923
+ case AccordionActions.OpenAll:
1924
+ this.expanded = true;
1925
+ this.expandItem();
1926
+ break;
1927
+ case AccordionActions.CloseAll:
1928
+ if (this.expanded === true) {
1929
+ this.expanded = false;
1930
+ this.collapseItem();
1931
+ }
1932
+ break;
1933
+ case AccordionHeaderActions.Toggle:
1934
+ this.toggle();
1935
+ break;
1936
+ default:
1937
+ break;
1938
+ }
1939
+ }
1940
+ subscribeToAccordionActions() {
1941
+ if (this.accordionSubscription != null) {
1942
+ this.accordionSubscription.unsubscribe();
1943
+ }
1944
+ this.accordionSubscription = this.accordion.actions$.subscribe(action => {
1945
+ this.handleAction(action);
1946
+ });
1947
+ }
1948
+ subscribeToAccordionItemHeaderActions() {
1949
+ if (this.accordionItemHeaderSubscription != null) {
1950
+ this.accordionItemHeaderSubscription.unsubscribe();
1951
+ }
1952
+ this.accordionItemHeaderSubscription = this.header.actions$.subscribe(action => {
1953
+ this.handleAction(action);
1954
+ });
1955
+ }
1956
+ }
1957
+ AccordionItemComponent.nextId = 0;
1958
+ 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 });
1959
+ 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 });
1960
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
1961
+ type: Component,
1962
+ 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"] }]
1963
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
1964
+ type: ContentChild,
1965
+ args: [AccordionItemHeaderComponent]
1966
+ }], body: [{
1967
+ type: ContentChild,
1968
+ args: [AccordionItemBodyComponent]
1969
+ }] } });
1970
+
1971
+ var AccordionActions;
1972
+ (function (AccordionActions) {
1973
+ AccordionActions["OpenAll"] = "openAll";
1974
+ AccordionActions["CloseAll"] = "closeAll";
1975
+ })(AccordionActions || (AccordionActions = {}));
1976
+ class AccordionComponent {
1977
+ constructor() {
1978
+ this.componentId = `accordion-${++AccordionComponent.nextId}`;
1979
+ this.actions = new Subject();
1980
+ this.actions$ = this.actions.asObservable();
1981
+ // if the accordion should only allow one expanded item at once this property can be set to false
1982
+ this.multi = true;
1983
+ this.showMore = 'Show more';
1984
+ this.showLess = 'Show less';
1985
+ }
1986
+ ngAfterViewInit() {
1987
+ this.items.forEach(item => {
1988
+ item.ngOnChanges({
1989
+ parentId: new SimpleChange(null, this.componentId, null),
1990
+ accordion: new SimpleChange(null, this, null)
1991
+ });
1992
+ });
1993
+ }
1994
+ ngOnDestroy() {
1995
+ this.actions.complete();
1996
+ }
1997
+ openAll() {
1998
+ if (this.multi) {
1999
+ this.actions.next(AccordionActions.OpenAll);
2000
+ }
2001
+ }
2002
+ closeAll() {
2003
+ this.actions.next(AccordionActions.CloseAll);
2004
+ }
2005
+ }
2006
+ AccordionComponent.nextId = 0;
2007
+ AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2008
+ 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 });
2009
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionComponent, decorators: [{
2010
+ type: Component,
2011
+ 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"] }]
2012
+ }], propDecorators: { multi: [{
2013
+ type: Input,
2014
+ args: ['fngAccordionKeepItemsOpen']
2015
+ }], showMore: [{
2016
+ type: Input,
2017
+ args: ['fngAccordionShowMoreText']
2018
+ }], showLess: [{
2019
+ type: Input,
2020
+ args: ['fngAccordionShowLessText']
2021
+ }], items: [{
2022
+ type: ContentChildren,
2023
+ args: [AccordionItemComponent]
2024
+ }] } });
2025
+
2026
+ class AccordionHeaderComponent {
2027
+ }
2028
+ AccordionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2029
+ 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 });
2030
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AccordionHeaderComponent, decorators: [{
2031
+ type: Component,
2032
+ 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"] }]
2033
+ }] });
2034
+
1792
2035
  class FestoAngularComponentsModule {
1793
2036
  }
1794
2037
  FestoAngularComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1820,7 +2063,12 @@ FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
1820
2063
  MobileFlyoutPageComponent,
1821
2064
  MobileFlyoutItemComponent,
1822
2065
  SafeHtmlPipe,
1823
- ClickOutsideDirective], imports: [RouterModule, CommonModule, OverlayModule, PortalModule], exports: [ButtonComponent,
2066
+ ClickOutsideDirective,
2067
+ AccordionComponent,
2068
+ AccordionHeaderComponent,
2069
+ AccordionItemComponent,
2070
+ AccordionItemHeaderComponent,
2071
+ AccordionItemBodyComponent], imports: [RouterModule, CommonModule, OverlayModule, PortalModule], exports: [ButtonComponent,
1824
2072
  LinkButtonComponent,
1825
2073
  BreadcrumbComponent,
1826
2074
  LoadingIndicatorComponent,
@@ -1848,7 +2096,12 @@ FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
1848
2096
  ClickOutsideDirective,
1849
2097
  MobileFlyoutComponent,
1850
2098
  MobileFlyoutPageComponent,
1851
- MobileFlyoutItemComponent] });
2099
+ MobileFlyoutItemComponent,
2100
+ AccordionComponent,
2101
+ AccordionHeaderComponent,
2102
+ AccordionItemComponent,
2103
+ AccordionItemHeaderComponent,
2104
+ AccordionItemBodyComponent] });
1852
2105
  FestoAngularComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, providers: [], imports: [[RouterModule, CommonModule, OverlayModule, PortalModule]] });
1853
2106
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, decorators: [{
1854
2107
  type: NgModule,
@@ -1882,7 +2135,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
1882
2135
  MobileFlyoutPageComponent,
1883
2136
  MobileFlyoutItemComponent,
1884
2137
  SafeHtmlPipe,
1885
- ClickOutsideDirective
2138
+ ClickOutsideDirective,
2139
+ AccordionComponent,
2140
+ AccordionHeaderComponent,
2141
+ AccordionItemComponent,
2142
+ AccordionItemHeaderComponent,
2143
+ AccordionItemBodyComponent
1886
2144
  ],
1887
2145
  imports: [RouterModule, CommonModule, OverlayModule, PortalModule],
1888
2146
  exports: [
@@ -1914,7 +2172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
1914
2172
  ClickOutsideDirective,
1915
2173
  MobileFlyoutComponent,
1916
2174
  MobileFlyoutPageComponent,
1917
- MobileFlyoutItemComponent
2175
+ MobileFlyoutItemComponent,
2176
+ AccordionComponent,
2177
+ AccordionHeaderComponent,
2178
+ AccordionItemComponent,
2179
+ AccordionItemHeaderComponent,
2180
+ AccordionItemBodyComponent
1918
2181
  ],
1919
2182
  providers: [],
1920
2183
  bootstrap: [PopoverComponent]
@@ -5697,5 +5960,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
5697
5960
  * Generated bundle index. Do not edit.
5698
5961
  */
5699
5962
 
5700
- 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 };
5963
+ 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 };
5701
5964
  //# sourceMappingURL=festo-ui-angular.mjs.map