@spicainternational/ngx-sds-components 2.28.2 → 2.29.0
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/public-api.mjs +2 -1
- package/esm2020/src/lib/expansion-panel/expansion-panel.component.mjs +37 -11
- package/esm2020/src/lib/expansion-panel/expansion-panel.module.mjs +10 -10
- package/esm2020/src/lib/expansion-panel/expansion-panel.types.mjs +2 -0
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +44 -18
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components.mjs +1 -0
- package/fesm2015/spicainternational-ngx-sds-components.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +44 -18
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components.mjs +1 -0
- package/fesm2020/spicainternational-ngx-sds-components.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/src/lib/expansion-panel/expansion-panel.component.d.ts +21 -6
- package/src/lib/expansion-panel/expansion-panel.module.d.ts +4 -4
- package/src/lib/expansion-panel/expansion-panel.types.d.ts +1 -0
package/esm2020/public-api.mjs
CHANGED
|
@@ -5,6 +5,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
|
|
|
5
5
|
export * from '@spicainternational/ngx-sds-components/src/lib/avatar';
|
|
6
6
|
export * from '@spicainternational/ngx-sds-components/src/lib/callout';
|
|
7
7
|
export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
|
|
8
|
+
export * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';
|
|
8
9
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
|
|
9
10
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
10
11
|
export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
|
|
@@ -18,4 +19,4 @@ export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
|
|
|
18
19
|
export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
|
|
19
20
|
export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
|
|
20
21
|
export * from '@spicainternational/ngx-sds-components/src/lib/tooltip';
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsNkRBQTZELENBQUM7QUFDNUUsY0FBYyx1REFBdUQsQ0FBQztBQUN0RSxjQUFjLHdEQUF3RCxDQUFDO0FBQ3ZFLGNBQWMsNkRBQTZELENBQUM7QUFDNUUsY0FBYyxnRUFBZ0UsQ0FBQztBQUMvRSxjQUFjLDREQUE0RCxDQUFDO0FBQzNFLGNBQWMsMkRBQTJELENBQUM7QUFDMUUsY0FBYyw4REFBOEQsQ0FBQztBQUM3RSxjQUFjLDZEQUE2RCxDQUFDO0FBQzVFLGNBQWMsdURBQXVELENBQUM7QUFDdEUsY0FBYyxzREFBc0QsQ0FBQztBQUNyRSxjQUFjLDJEQUEyRCxDQUFDO0FBQzFFLGNBQWMsNERBQTRELENBQUM7QUFDM0UsY0FBYyxxREFBcUQsQ0FBQztBQUNwRSxjQUFjLDJEQUEyRCxDQUFDO0FBQzFFLGNBQWMsa0VBQWtFLENBQUM7QUFDakYsY0FBYyx5REFBeUQsQ0FBQztBQUN4RSxjQUFjLHdEQUF3RCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIG5neC1zZHMtY29tcG9uZW50c1xyXG4gKi9cclxuXHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvYXBwLXN3aXRjaGVyJztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9hdmF0YXInO1xyXG5leHBvcnQgKiBmcm9tICdAc3BpY2FpbnRlcm5hdGlvbmFsL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2NhbGxvdXQnO1xyXG5leHBvcnQgKiBmcm9tICdAc3BpY2FpbnRlcm5hdGlvbmFsL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2NvbG9yLXBpY2tlcic7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsJztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpY2tlcic7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZGF0ZS1waXBlcyc7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZHVyYXRpb24tcGlwZSc7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZHVyYXRpb24tYm94JztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9sYXlvdXQnO1xyXG5leHBvcnQgKiBmcm9tICdAc3BpY2FpbnRlcm5hdGlvbmFsL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsJztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9uYXZpZ2F0aW9uJztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYWdlLWhlYWRlcic7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZSc7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcXVpY2staW5mbyc7XHJcbmV4cG9ydCAqIGZyb20gJ0BzcGljYWludGVybmF0aW9uYWwvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2VnbWVudGVkLWNvbnRyb2wnO1xyXG5leHBvcnQgKiBmcm9tICdAc3BpY2FpbnRlcm5hdGlvbmFsL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3NpZGUtYmFyJztcclxuZXhwb3J0ICogZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90b29sdGlwJztcclxuIl19
|
|
@@ -1,31 +1,57 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
-
import {
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
|
2
|
+
import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
5
5
|
import * as i2 from "@angular/common";
|
|
6
|
-
export class
|
|
6
|
+
export class SdsExpansionPanelComponent {
|
|
7
7
|
constructor() {
|
|
8
|
+
this.animateCaret = false;
|
|
9
|
+
/**
|
|
10
|
+
* toggles greyish background
|
|
11
|
+
*
|
|
12
|
+
* @memberof SdsExpansionPanelComponent
|
|
13
|
+
*/
|
|
14
|
+
this.showBackground = true;
|
|
15
|
+
/**
|
|
16
|
+
* position caret next to header of on the far end of the component
|
|
17
|
+
*
|
|
18
|
+
* @type {('nextToHeader' | 'farEnd')}
|
|
19
|
+
* @memberof SdsExpansionPanelComponent
|
|
20
|
+
*/
|
|
21
|
+
this.caretPlacement = 'nextToHeader';
|
|
8
22
|
this.isOpen = false;
|
|
9
23
|
this.isOpenChange = new EventEmitter();
|
|
10
|
-
this.
|
|
11
|
-
this.cardIsOpenIcon = faCaretUp;
|
|
24
|
+
this.caretIcon = faChevronDown;
|
|
12
25
|
}
|
|
13
|
-
onToggleIsOpenClick() {
|
|
26
|
+
onToggleIsOpenClick(event) {
|
|
14
27
|
this.isOpen = !this.isOpen;
|
|
15
28
|
this.isOpenChange.emit(this.isOpen);
|
|
29
|
+
event.stopImmediatePropagation();
|
|
30
|
+
}
|
|
31
|
+
openPanel() {
|
|
32
|
+
if (!this.isOpen) {
|
|
33
|
+
this.isOpen = true;
|
|
34
|
+
this.isOpenChange.emit(this.isOpen);
|
|
35
|
+
}
|
|
16
36
|
}
|
|
17
37
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
38
|
+
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
21
41
|
type: Component,
|
|
22
|
-
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
42
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
23
43
|
}], propDecorators: { headerText: [{
|
|
24
44
|
type: Input
|
|
25
45
|
}], hideHeader: [{
|
|
26
46
|
type: Input
|
|
27
47
|
}], headerId: [{
|
|
28
48
|
type: Input
|
|
49
|
+
}], animateCaret: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], showBackground: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], caretPlacement: [{
|
|
54
|
+
type: Input
|
|
29
55
|
}], descriptionText: [{
|
|
30
56
|
type: Input
|
|
31
57
|
}], isOpen: [{
|
|
@@ -33,4 +59,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
33
59
|
}], isOpenChange: [{
|
|
34
60
|
type: Output
|
|
35
61
|
}] } });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFlLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFjaEYsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVdhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFNUQsY0FBUyxHQUFtQixhQUFhLENBQUM7S0FjcEQ7SUFaVSxtQkFBbUIsQ0FBQyxLQUFpQjtRQUN4QyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUN2QztJQUNMLENBQUM7O3VIQWhEUSwwQkFBMEI7MkdBQTFCLDBCQUEwQixvVkNyQnZDLG82Q0E4Q0E7MkZEekJhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxjQUFjO3NCQUF0QixLQUFLO2dCQVFHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBVUcsZUFBZTtzQkFBdkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENvbXBvbmVudCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIElucHV0LFxyXG4gICAgT3V0cHV0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYUNoZXZyb25Eb3duLCBmYUNoZXZyb25VcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xyXG5pbXBvcnQge1xyXG4gICAgSWNvbkRlZmluaXRpb24sXHJcbiAgICBmYUNhcmV0RG93bixcclxuICAgIGZhQ2FyZXRVcCxcclxufSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IENhcmV0UGxhY2VtZW50IH0gZnJvbSAnLi9leHBhbnNpb24tcGFuZWwudHlwZXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy1leHBhbnNpb24tcGFuZWwnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnQge1xyXG4gICAgQElucHV0KCkgaGVhZGVyVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGhpZGVIZWFkZXI/OiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgaGVhZGVySWQ/OiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KCkgYW5pbWF0ZUNhcmV0ID0gZmFsc2U7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiB0b2dnbGVzIGdyZXlpc2ggYmFja2dyb3VuZFxyXG4gICAgICpcclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBzaG93QmFja2dyb3VuZCA9IHRydWU7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBwb3NpdGlvbiBjYXJldCBuZXh0IHRvIGhlYWRlciBvZiBvbiB0aGUgZmFyIGVuZCBvZiB0aGUgY29tcG9uZW50XHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUgeygnbmV4dFRvSGVhZGVyJyB8ICdmYXJFbmQnKX1cclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBjYXJldFBsYWNlbWVudDogQ2FyZXRQbGFjZW1lbnQgPSAnbmV4dFRvSGVhZGVyJztcclxuXHJcbiAgICAvKipcclxuICAgICAqICdkZXNjcmlwdGlvblRleHQnIC0gdGV4dCBkaXNwbGF5ZWQgd2hlbiBjb21wb25lbnQgaXMgXCJjbG9zZWRcIi5cclxuICAgICAqXHJcbiAgICAgKiBOb3RlOiBVc2UgbmctY29udGVudCAnY29udGVudE9uQ2xvc2VkJyBpZiBtb3JlIGNvbXBsZXggdXNlLWNhc2UgaXMgbmVlZGVkXHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUge3N0cmluZ31cclxuICAgICAqIEBtZW1iZXJvZiBFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBkZXNjcmlwdGlvblRleHQ/OiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KCkgaXNPcGVuOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBAT3V0cHV0KCkgaXNPcGVuQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgcHVibGljIGNhcmV0SWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNoZXZyb25Eb3duO1xyXG5cclxuICAgIHB1YmxpYyBvblRvZ2dsZUlzT3BlbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9wZW5QYW5lbCgpIHtcclxuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XHJcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXZcclxuICAgIGNsYXNzPVwicm91bmRlZCBleHBhbnNpb24tcGFuZWxcIlxyXG4gICAgW2NsYXNzLmJhY2tncm91bmRdPVwic2hvd0JhY2tncm91bmRcIlxyXG4gICAgW2NsYXNzLmNsb3NlZF09XCIhaXNPcGVuXCJcclxuICAgIChjbGljayk9XCJvcGVuUGFuZWwoKVwiXHJcbj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaGlkZUhlYWRlclwiPlxyXG4gICAgICAgIDxkaXZcclxuICAgICAgICAgICAgY2xhc3M9XCJleHBhbnNpb24tcGFuZWwtaGVhZGVyIGQtZmxleCBmbGV4LXJvdyBhbGlnaC1pdGVtcy1jZW50ZXJcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmtcIlxyXG4gICAgICAgICAgICAgICAgW2lkXT1cImhlYWRlcklkXCJcclxuICAgICAgICAgICAgICAgIChjbGljayk9XCJvblRvZ2dsZUlzT3BlbkNsaWNrKCRldmVudClcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImhlYWRlci10ZXh0XCI+XHJcbiAgICAgICAgICAgICAgICAgICAge3sgaGVhZGVyVGV4dCB9fVxyXG4gICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgY2FyZXRcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLnJvdGF0ZV09XCJhbmltYXRlQ2FyZXRcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLm1sLTJdPVwiY2FyZXRQbGFjZW1lbnQgPT09ICduZXh0VG9IZWFkZXInXCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tbC1hdXRvXT1cImNhcmV0UGxhY2VtZW50ID09PSAnZmFyRW5kJ1wiXHJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVJc09wZW5DbGljaygkZXZlbnQpXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2FyZXRJY29uXCI+PC9mYS1pY29uPlxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCIhaXNPcGVuXCJcclxuICAgICAgICBjbGFzcz1cIm10LTFcIlxyXG4gICAgICAgID5cclxuICAgICAgICB7eyBkZXNjcmlwdGlvblRleHQgfX1cclxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbY29udGVudE9uQ2xvc2VkXVwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCJpc09wZW5cIlxyXG4gICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { NgModule } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
4
|
-
import {
|
|
4
|
+
import { SdsExpansionPanelComponent } from './expansion-panel.component';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
/**
|
|
7
7
|
* Expansion panel - provides an expandable details-summary view. Used for 'progressive disclosure'.
|
|
@@ -9,26 +9,26 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
* @export
|
|
10
10
|
* @class ExpansionPanelModule
|
|
11
11
|
*/
|
|
12
|
-
export class
|
|
12
|
+
export class SdsExpansionPanelModule {
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
FontAwesomeModule], exports: [
|
|
17
|
-
|
|
14
|
+
SdsExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
15
|
+
SdsExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, declarations: [SdsExpansionPanelComponent], imports: [CommonModule,
|
|
16
|
+
FontAwesomeModule], exports: [SdsExpansionPanelComponent] });
|
|
17
|
+
SdsExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, imports: [[
|
|
18
18
|
CommonModule,
|
|
19
19
|
FontAwesomeModule
|
|
20
20
|
]] });
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, decorators: [{
|
|
22
22
|
type: NgModule,
|
|
23
23
|
args: [{
|
|
24
24
|
declarations: [
|
|
25
|
-
|
|
25
|
+
SdsExpansionPanelComponent
|
|
26
26
|
],
|
|
27
27
|
imports: [
|
|
28
28
|
CommonModule,
|
|
29
29
|
FontAwesomeModule
|
|
30
30
|
],
|
|
31
|
-
exports: [
|
|
31
|
+
exports: [SdsExpansionPanelComponent]
|
|
32
32
|
}]
|
|
33
33
|
}] });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXJFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQUN6RTs7Ozs7R0FLRztBQVlILE1BQU0sT0FBTyx1QkFBdUI7O29IQUF2Qix1QkFBdUI7cUhBQXZCLHVCQUF1QixpQkFUaEMsMEJBQTBCLGFBRzFCLFlBQVk7UUFDWixpQkFBaUIsYUFFVCwwQkFBMEI7cUhBR3pCLHVCQUF1QixZQVB6QjtZQUNQLFlBQVk7WUFDWixpQkFBaUI7U0FDbEI7MkZBSVUsdUJBQXVCO2tCQVhuQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWiwwQkFBMEI7cUJBQzNCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGlCQUFpQjtxQkFDbEI7b0JBQ0QsT0FBTyxFQUFFLENBQUMsMEJBQTBCLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XHJcblxyXG5pbXBvcnQgeyBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudCc7XHJcbi8qKlxyXG4gKiBFeHBhbnNpb24gcGFuZWwgLSBwcm92aWRlcyBhbiBleHBhbmRhYmxlIGRldGFpbHMtc3VtbWFyeSB2aWV3LiBVc2VkIGZvciAncHJvZ3Jlc3NpdmUgZGlzY2xvc3VyZScuXHJcbiAqXHJcbiAqIEBleHBvcnRcclxuICogQGNsYXNzIEV4cGFuc2lvblBhbmVsTW9kdWxlXHJcbiAqL1xyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvbnRBd2Vzb21lTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnRdXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgU2RzRXhwYW5zaW9uUGFuZWxNb2R1bGUgeyB9XHJcbiJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLnR5cGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC50eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgQ2FyZXRQbGFjZW1lbnQgPSAnbmV4dFRvSGVhZGVyJyB8ICdmYXJFbmQnOyJdfQ==
|
|
@@ -4,31 +4,57 @@ import * as i2 from '@angular/common';
|
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
|
-
import {
|
|
7
|
+
import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
|
|
8
8
|
|
|
9
|
-
class
|
|
9
|
+
class SdsExpansionPanelComponent {
|
|
10
10
|
constructor() {
|
|
11
|
+
this.animateCaret = false;
|
|
12
|
+
/**
|
|
13
|
+
* toggles greyish background
|
|
14
|
+
*
|
|
15
|
+
* @memberof SdsExpansionPanelComponent
|
|
16
|
+
*/
|
|
17
|
+
this.showBackground = true;
|
|
18
|
+
/**
|
|
19
|
+
* position caret next to header of on the far end of the component
|
|
20
|
+
*
|
|
21
|
+
* @type {('nextToHeader' | 'farEnd')}
|
|
22
|
+
* @memberof SdsExpansionPanelComponent
|
|
23
|
+
*/
|
|
24
|
+
this.caretPlacement = 'nextToHeader';
|
|
11
25
|
this.isOpen = false;
|
|
12
26
|
this.isOpenChange = new EventEmitter();
|
|
13
|
-
this.
|
|
14
|
-
this.cardIsOpenIcon = faCaretUp;
|
|
27
|
+
this.caretIcon = faChevronDown;
|
|
15
28
|
}
|
|
16
|
-
onToggleIsOpenClick() {
|
|
29
|
+
onToggleIsOpenClick(event) {
|
|
17
30
|
this.isOpen = !this.isOpen;
|
|
18
31
|
this.isOpenChange.emit(this.isOpen);
|
|
32
|
+
event.stopImmediatePropagation();
|
|
33
|
+
}
|
|
34
|
+
openPanel() {
|
|
35
|
+
if (!this.isOpen) {
|
|
36
|
+
this.isOpen = true;
|
|
37
|
+
this.isOpenChange.emit(this.isOpen);
|
|
38
|
+
}
|
|
19
39
|
}
|
|
20
40
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
41
|
+
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
24
44
|
type: Component,
|
|
25
|
-
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
45
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
26
46
|
}], propDecorators: { headerText: [{
|
|
27
47
|
type: Input
|
|
28
48
|
}], hideHeader: [{
|
|
29
49
|
type: Input
|
|
30
50
|
}], headerId: [{
|
|
31
51
|
type: Input
|
|
52
|
+
}], animateCaret: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], showBackground: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], caretPlacement: [{
|
|
57
|
+
type: Input
|
|
32
58
|
}], descriptionText: [{
|
|
33
59
|
type: Input
|
|
34
60
|
}], isOpen: [{
|
|
@@ -43,26 +69,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
43
69
|
* @export
|
|
44
70
|
* @class ExpansionPanelModule
|
|
45
71
|
*/
|
|
46
|
-
class
|
|
72
|
+
class SdsExpansionPanelModule {
|
|
47
73
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
FontAwesomeModule], exports: [
|
|
51
|
-
|
|
74
|
+
SdsExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
75
|
+
SdsExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, declarations: [SdsExpansionPanelComponent], imports: [CommonModule,
|
|
76
|
+
FontAwesomeModule], exports: [SdsExpansionPanelComponent] });
|
|
77
|
+
SdsExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, imports: [[
|
|
52
78
|
CommonModule,
|
|
53
79
|
FontAwesomeModule
|
|
54
80
|
]] });
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, decorators: [{
|
|
56
82
|
type: NgModule,
|
|
57
83
|
args: [{
|
|
58
84
|
declarations: [
|
|
59
|
-
|
|
85
|
+
SdsExpansionPanelComponent
|
|
60
86
|
],
|
|
61
87
|
imports: [
|
|
62
88
|
CommonModule,
|
|
63
89
|
FontAwesomeModule
|
|
64
90
|
],
|
|
65
|
-
exports: [
|
|
91
|
+
exports: [SdsExpansionPanelComponent]
|
|
66
92
|
}]
|
|
67
93
|
}] });
|
|
68
94
|
|
|
@@ -70,5 +96,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
70
96
|
* Generated bundle index. Do not edit.
|
|
71
97
|
*/
|
|
72
98
|
|
|
73
|
-
export {
|
|
99
|
+
export { SdsExpansionPanelComponent, SdsExpansionPanelModule };
|
|
74
100
|
//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.module.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.module.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown, faChevronUp } from '@fortawesome/pro-regular-svg-icons';\r\nimport {\r\n IconDefinition,\r\n faCaretDown,\r\n faCaretUp,\r\n} from '@fortawesome/pro-solid-svg-icons';\r\nimport { CaretPlacement } from './expansion-panel.types';\r\n\r\n@Component({\r\n selector: 'sds-expansion-panel',\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdsExpansionPanelComponent {\r\n @Input() headerText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\r\n\r\n /**\r\n * toggles greyish background\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() showBackground = true;\r\n\r\n /**\r\n * position caret next to header of on the far end of the component\r\n *\r\n * @type {('nextToHeader' | 'farEnd')}\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() caretPlacement: CaretPlacement = 'nextToHeader';\r\n\r\n /**\r\n * 'descriptionText' - text displayed when component is \"closed\".\r\n *\r\n * Note: Use ng-content 'contentOnClosed' if more complex use-case is needed\r\n *\r\n * @type {string}\r\n * @memberof ExpansionPanelComponent\r\n */\r\n @Input() descriptionText?: string;\r\n\r\n @Input() isOpen: boolean = false;\r\n @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n\r\n public onToggleIsOpenClick(event: MouseEvent): void {\r\n this.isOpen = !this.isOpen;\r\n this.isOpenChange.emit(this.isOpen);\r\n event.stopImmediatePropagation();\r\n }\r\n\r\n public openPanel() {\r\n if (!this.isOpen) {\r\n this.isOpen = true;\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\nimport { SdsExpansionPanelComponent } from './expansion-panel.component';\r\n/**\r\n * Expansion panel - provides an expandable details-summary view. Used for 'progressive disclosure'.\r\n *\r\n * @export\r\n * @class ExpansionPanelModule\r\n */\r\n@NgModule({\r\n declarations: [\r\n SdsExpansionPanelComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [SdsExpansionPanelComponent]\r\n})\r\n\r\nexport class SdsExpansionPanelModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
|
|
|
2
2
|
export * from '@spicainternational/ngx-sds-components/src/lib/avatar';
|
|
3
3
|
export * from '@spicainternational/ngx-sds-components/src/lib/callout';
|
|
4
4
|
export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
|
|
5
|
+
export * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';
|
|
5
6
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
|
|
6
7
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
7
8
|
export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
|
|
@@ -4,31 +4,57 @@ import * as i2 from '@angular/common';
|
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
|
-
import {
|
|
7
|
+
import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
|
|
8
8
|
|
|
9
|
-
class
|
|
9
|
+
class SdsExpansionPanelComponent {
|
|
10
10
|
constructor() {
|
|
11
|
+
this.animateCaret = false;
|
|
12
|
+
/**
|
|
13
|
+
* toggles greyish background
|
|
14
|
+
*
|
|
15
|
+
* @memberof SdsExpansionPanelComponent
|
|
16
|
+
*/
|
|
17
|
+
this.showBackground = true;
|
|
18
|
+
/**
|
|
19
|
+
* position caret next to header of on the far end of the component
|
|
20
|
+
*
|
|
21
|
+
* @type {('nextToHeader' | 'farEnd')}
|
|
22
|
+
* @memberof SdsExpansionPanelComponent
|
|
23
|
+
*/
|
|
24
|
+
this.caretPlacement = 'nextToHeader';
|
|
11
25
|
this.isOpen = false;
|
|
12
26
|
this.isOpenChange = new EventEmitter();
|
|
13
|
-
this.
|
|
14
|
-
this.cardIsOpenIcon = faCaretUp;
|
|
27
|
+
this.caretIcon = faChevronDown;
|
|
15
28
|
}
|
|
16
|
-
onToggleIsOpenClick() {
|
|
29
|
+
onToggleIsOpenClick(event) {
|
|
17
30
|
this.isOpen = !this.isOpen;
|
|
18
31
|
this.isOpenChange.emit(this.isOpen);
|
|
32
|
+
event.stopImmediatePropagation();
|
|
33
|
+
}
|
|
34
|
+
openPanel() {
|
|
35
|
+
if (!this.isOpen) {
|
|
36
|
+
this.isOpen = true;
|
|
37
|
+
this.isOpenChange.emit(this.isOpen);
|
|
38
|
+
}
|
|
19
39
|
}
|
|
20
40
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
41
|
+
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
24
44
|
type: Component,
|
|
25
|
-
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
45
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(-180deg)}.expansion-panel.background{background-color:#f8f9fa;padding:1.5rem}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:#212529}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
26
46
|
}], propDecorators: { headerText: [{
|
|
27
47
|
type: Input
|
|
28
48
|
}], hideHeader: [{
|
|
29
49
|
type: Input
|
|
30
50
|
}], headerId: [{
|
|
31
51
|
type: Input
|
|
52
|
+
}], animateCaret: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], showBackground: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], caretPlacement: [{
|
|
57
|
+
type: Input
|
|
32
58
|
}], descriptionText: [{
|
|
33
59
|
type: Input
|
|
34
60
|
}], isOpen: [{
|
|
@@ -43,26 +69,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
43
69
|
* @export
|
|
44
70
|
* @class ExpansionPanelModule
|
|
45
71
|
*/
|
|
46
|
-
class
|
|
72
|
+
class SdsExpansionPanelModule {
|
|
47
73
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
FontAwesomeModule], exports: [
|
|
51
|
-
|
|
74
|
+
SdsExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
75
|
+
SdsExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, declarations: [SdsExpansionPanelComponent], imports: [CommonModule,
|
|
76
|
+
FontAwesomeModule], exports: [SdsExpansionPanelComponent] });
|
|
77
|
+
SdsExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, imports: [[
|
|
52
78
|
CommonModule,
|
|
53
79
|
FontAwesomeModule
|
|
54
80
|
]] });
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type:
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsExpansionPanelModule, decorators: [{
|
|
56
82
|
type: NgModule,
|
|
57
83
|
args: [{
|
|
58
84
|
declarations: [
|
|
59
|
-
|
|
85
|
+
SdsExpansionPanelComponent
|
|
60
86
|
],
|
|
61
87
|
imports: [
|
|
62
88
|
CommonModule,
|
|
63
89
|
FontAwesomeModule
|
|
64
90
|
],
|
|
65
|
-
exports: [
|
|
91
|
+
exports: [SdsExpansionPanelComponent]
|
|
66
92
|
}]
|
|
67
93
|
}] });
|
|
68
94
|
|
|
@@ -70,5 +96,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
70
96
|
* Generated bundle index. Do not edit.
|
|
71
97
|
*/
|
|
72
98
|
|
|
73
|
-
export {
|
|
99
|
+
export { SdsExpansionPanelComponent, SdsExpansionPanelModule };
|
|
74
100
|
//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.module.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.module.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown, faChevronUp } from '@fortawesome/pro-regular-svg-icons';\r\nimport {\r\n IconDefinition,\r\n faCaretDown,\r\n faCaretUp,\r\n} from '@fortawesome/pro-solid-svg-icons';\r\nimport { CaretPlacement } from './expansion-panel.types';\r\n\r\n@Component({\r\n selector: 'sds-expansion-panel',\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdsExpansionPanelComponent {\r\n @Input() headerText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\r\n\r\n /**\r\n * toggles greyish background\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() showBackground = true;\r\n\r\n /**\r\n * position caret next to header of on the far end of the component\r\n *\r\n * @type {('nextToHeader' | 'farEnd')}\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() caretPlacement: CaretPlacement = 'nextToHeader';\r\n\r\n /**\r\n * 'descriptionText' - text displayed when component is \"closed\".\r\n *\r\n * Note: Use ng-content 'contentOnClosed' if more complex use-case is needed\r\n *\r\n * @type {string}\r\n * @memberof ExpansionPanelComponent\r\n */\r\n @Input() descriptionText?: string;\r\n\r\n @Input() isOpen: boolean = false;\r\n @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n\r\n public onToggleIsOpenClick(event: MouseEvent): void {\r\n this.isOpen = !this.isOpen;\r\n this.isOpenChange.emit(this.isOpen);\r\n event.stopImmediatePropagation();\r\n }\r\n\r\n public openPanel() {\r\n if (!this.isOpen) {\r\n this.isOpen = true;\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header d-flex flex-row aligh-items-center\"\r\n >\r\n <button\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <span class=\"header-text\">\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ml-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ml-auto]=\"caretPlacement === 'farEnd'\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n *ngIf=\"!isOpen\"\r\n class=\"mt-1\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"isOpen\"\r\n class=\"mt-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\nimport { SdsExpansionPanelComponent } from './expansion-panel.component';\r\n/**\r\n * Expansion panel - provides an expandable details-summary view. Used for 'progressive disclosure'.\r\n *\r\n * @export\r\n * @class ExpansionPanelModule\r\n */\r\n@NgModule({\r\n declarations: [\r\n SdsExpansionPanelComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [SdsExpansionPanelComponent]\r\n})\r\n\r\nexport class SdsExpansionPanelModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
|
|
|
2
2
|
export * from '@spicainternational/ngx-sds-components/src/lib/avatar';
|
|
3
3
|
export * from '@spicainternational/ngx-sds-components/src/lib/callout';
|
|
4
4
|
export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
|
|
5
|
+
export * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';
|
|
5
6
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
|
|
6
7
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
7
8
|
export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
|
package/package.json
CHANGED
package/public-api.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
|
|
|
2
2
|
export * from '@spicainternational/ngx-sds-components/src/lib/avatar';
|
|
3
3
|
export * from '@spicainternational/ngx-sds-components/src/lib/callout';
|
|
4
4
|
export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
|
|
5
|
+
export * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';
|
|
5
6
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
|
|
6
7
|
export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
|
|
7
8
|
export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
|
|
@@ -1,10 +1,25 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import { IconDefinition } from '@fortawesome/pro-solid-svg-icons';
|
|
3
|
+
import { CaretPlacement } from './expansion-panel.types';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class
|
|
5
|
+
export declare class SdsExpansionPanelComponent {
|
|
5
6
|
headerText?: string;
|
|
6
7
|
hideHeader?: boolean;
|
|
7
8
|
headerId?: string;
|
|
9
|
+
animateCaret: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* toggles greyish background
|
|
12
|
+
*
|
|
13
|
+
* @memberof SdsExpansionPanelComponent
|
|
14
|
+
*/
|
|
15
|
+
showBackground: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* position caret next to header of on the far end of the component
|
|
18
|
+
*
|
|
19
|
+
* @type {('nextToHeader' | 'farEnd')}
|
|
20
|
+
* @memberof SdsExpansionPanelComponent
|
|
21
|
+
*/
|
|
22
|
+
caretPlacement: CaretPlacement;
|
|
8
23
|
/**
|
|
9
24
|
* 'descriptionText' - text displayed when component is "closed".
|
|
10
25
|
*
|
|
@@ -16,9 +31,9 @@ export declare class ExpansionPanelComponent {
|
|
|
16
31
|
descriptionText?: string;
|
|
17
32
|
isOpen: boolean;
|
|
18
33
|
isOpenChange: EventEmitter<boolean>;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<
|
|
34
|
+
caretIcon: IconDefinition;
|
|
35
|
+
onToggleIsOpenClick(event: MouseEvent): void;
|
|
36
|
+
openPanel(): void;
|
|
37
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdsExpansionPanelComponent, never>;
|
|
38
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsExpansionPanelComponent, "sds-expansion-panel", never, { "headerText": "headerText"; "hideHeader": "hideHeader"; "headerId": "headerId"; "animateCaret": "animateCaret"; "showBackground": "showBackground"; "caretPlacement": "caretPlacement"; "descriptionText": "descriptionText"; "isOpen": "isOpen"; }, { "isOpenChange": "isOpenChange"; }, never, ["[contentOnClosed]", "*"]>;
|
|
24
39
|
}
|
|
@@ -8,8 +8,8 @@ import * as i3 from "@fortawesome/angular-fontawesome";
|
|
|
8
8
|
* @export
|
|
9
9
|
* @class ExpansionPanelModule
|
|
10
10
|
*/
|
|
11
|
-
export declare class
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
|
13
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<
|
|
14
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<
|
|
11
|
+
export declare class SdsExpansionPanelModule {
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdsExpansionPanelModule, never>;
|
|
13
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<SdsExpansionPanelModule, [typeof i1.SdsExpansionPanelComponent], [typeof i2.CommonModule, typeof i3.FontAwesomeModule], [typeof i1.SdsExpansionPanelComponent]>;
|
|
14
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<SdsExpansionPanelModule>;
|
|
15
15
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare type CaretPlacement = 'nextToHeader' | 'farEnd';
|