@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.
- package/esm2020/lib/components/accordion/accordion-header/accordion-header.component.mjs +11 -0
- package/esm2020/lib/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.mjs +15 -0
- package/esm2020/lib/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.mjs +28 -0
- package/esm2020/lib/components/accordion/accordion-item/accordion-item.component.mjs +143 -0
- package/esm2020/lib/components/accordion/accordion.component.mjs +59 -0
- package/esm2020/lib/components/accordion/index.mjs +6 -0
- package/esm2020/lib/components/components.module.mjs +31 -5
- package/esm2020/lib/components/stepper-horizontal/step-horizontal/step-horizontal.component.mjs +5 -2
- package/fesm2015/festo-ui-angular.mjs +272 -7
- package/fesm2015/festo-ui-angular.mjs.map +1 -1
- package/fesm2020/festo-ui-angular.mjs +270 -7
- package/fesm2020/festo-ui-angular.mjs.map +1 -1
- package/lib/components/accordion/accordion-header/accordion-header.component.d.ts +5 -0
- package/lib/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.d.ts +6 -0
- package/lib/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.d.ts +15 -0
- package/lib/components/accordion/accordion-item/accordion-item.component.d.ts +34 -0
- package/lib/components/accordion/accordion.component.d.ts +24 -0
- package/lib/components/accordion/index.d.ts +5 -0
- package/lib/components/components.module.d.ts +11 -5
- package/lib/components/stepper-horizontal/step-horizontal/step-horizontal.component.d.ts +2 -1
- package/package.json +1 -1
- package/scss/base/components/accordion/accordion-header/accordion-header.component.scss +12 -0
- package/scss/base/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.scss +109 -0
- package/scss/base/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.scss +9 -0
- package/scss/base/components/accordion/accordion-item/accordion-item.component.scss +71 -0
- 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,
|
|
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
|
|
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
|