@spicainternational/ngx-sds-components 7.8.0 → 7.9.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/src/lib/expansion-panel/expansion-panel.component.mjs +9 -3
- package/esm2020/src/lib/expansion-panel/expansion-panel.types.mjs +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +8 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +8 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/expansion-panel/expansion-panel.component.d.ts +4 -2
- package/src/lib/expansion-panel/expansion-panel.types.d.ts +1 -0
|
@@ -6,6 +6,7 @@ import * as i2 from "@fortawesome/angular-fontawesome";
|
|
|
6
6
|
export class SdsExpansionPanelComponent {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.animateCaret = false;
|
|
9
|
+
this.animatePanel = false;
|
|
9
10
|
/**
|
|
10
11
|
* toggles greyish background
|
|
11
12
|
*
|
|
@@ -27,6 +28,7 @@ export class SdsExpansionPanelComponent {
|
|
|
27
28
|
this.caretPlacement = 'nextToHeader';
|
|
28
29
|
this.isOpen = false;
|
|
29
30
|
this.isOpenChange = new EventEmitter();
|
|
31
|
+
this.headerSize = 'default';
|
|
30
32
|
this.caretIcon = faChevronDown;
|
|
31
33
|
}
|
|
32
34
|
onToggleIsOpenClick(event) {
|
|
@@ -42,10 +44,10 @@ export class SdsExpansionPanelComponent {
|
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
47
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
46
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
47
49
|
type: Component,
|
|
48
|
-
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
50
|
+
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
49
51
|
}], propDecorators: { headerText: [{
|
|
50
52
|
type: Input
|
|
51
53
|
}], hideHeader: [{
|
|
@@ -54,6 +56,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
54
56
|
type: Input
|
|
55
57
|
}], animateCaret: [{
|
|
56
58
|
type: Input
|
|
59
|
+
}], animatePanel: [{
|
|
60
|
+
type: Input
|
|
57
61
|
}], showBackground: [{
|
|
58
62
|
type: Input
|
|
59
63
|
}], backgroundColor: [{
|
|
@@ -70,5 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
70
74
|
type: Input
|
|
71
75
|
}], collapsePanelText: [{
|
|
72
76
|
type: Input
|
|
77
|
+
}], headerSize: [{
|
|
78
|
+
type: Input
|
|
73
79
|
}] } });
|
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFVbkUsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVdhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRXJCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRzlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7OztXQUlHO1FBQ00sb0JBQWUsR0FBRyxvQkFBb0IsQ0FBQztRQUVoRDs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFLMUQsZUFBVSxHQUFlLFNBQVMsQ0FBQztRQUVyQyxjQUFTLEdBQW1CLGFBQWEsQ0FBQztLQWVwRDtJQVpVLG1CQUFtQixDQUFDLEtBQWlCO1FBQ3hDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRU0sU0FBUztRQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2QsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7WUFDbkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQ3ZDO0lBQ0wsQ0FBQzs7d0hBaEVRLDBCQUEwQjs0R0FBMUIsMEJBQTBCLDRmQ2pCdkMscTZEQTBEQTs0RkR6Q2EsMEJBQTBCO2tCQU50QyxTQUFTOytCQUNJLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBUUcsY0FBYztzQkFBdEIsS0FBSztnQkFPRyxlQUFlO3NCQUF2QixLQUFLO2dCQVFHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBVUcsZUFBZTtzQkFBdkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFFRSxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFFRyxVQUFVO3NCQUFsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgSW5wdXQsXHJcbiAgICBPdXRwdXQsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGZhQ2hldnJvbkRvd24gfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXJlZ3VsYXItc3ZnLWljb25zJztcclxuaW1wb3J0IHsgQ2FyZXRQbGFjZW1lbnQsIEhlYWRlclNpemUgfSBmcm9tICcuL2V4cGFuc2lvbi1wYW5lbC50eXBlcyc7XHJcbmltcG9ydCB7IEljb25EZWZpbml0aW9uIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtZXhwYW5zaW9uLXBhbmVsJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50IHtcclxuICAgIEBJbnB1dCgpIGhlYWRlclRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBoaWRlSGVhZGVyPzogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGhlYWRlcklkPzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIGFuaW1hdGVDYXJldCA9IGZhbHNlO1xyXG5cclxuICAgIEBJbnB1dCgpIGFuaW1hdGVQYW5lbCA9IGZhbHNlO1xyXG5cclxuXHJcbiAgICAvKipcclxuICAgICAqIHRvZ2dsZXMgZ3JleWlzaCBiYWNrZ3JvdW5kXHJcbiAgICAgKlxyXG4gICAgICogQG1lbWJlcm9mIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHNob3dCYWNrZ3JvdW5kID0gdHJ1ZTtcclxuXHJcbiAgICAvKipcclxuICAgICAqIEJhY2tncm91bmQgY29sb3Igb2YgdGhlIHBhbmVsLiBHcmF5LTEwMCBieSBkZWZhdWx0XHJcbiAgICAgKlxyXG4gICAgICogQG1lbWJlcm9mIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGJhY2tncm91bmRDb2xvciA9ICd2YXIoLS1icy1ncmF5LTEwMCknO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogcG9zaXRpb24gY2FyZXQgbmV4dCB0byBoZWFkZXIgb2Ygb24gdGhlIGZhciBlbmQgb2YgdGhlIGNvbXBvbmVudFxyXG4gICAgICpcclxuICAgICAqIEB0eXBlIHsoJ25leHRUb0hlYWRlcicgfCAnZmFyRW5kJyl9XHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgY2FyZXRQbGFjZW1lbnQ6IENhcmV0UGxhY2VtZW50ID0gJ25leHRUb0hlYWRlcic7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiAnZGVzY3JpcHRpb25UZXh0JyAtIHRleHQgZGlzcGxheWVkIHdoZW4gY29tcG9uZW50IGlzIFwiY2xvc2VkXCIuXHJcbiAgICAgKlxyXG4gICAgICogTm90ZTogVXNlIG5nLWNvbnRlbnQgJ2NvbnRlbnRPbkNsb3NlZCcgaWYgbW9yZSBjb21wbGV4IHVzZS1jYXNlIGlzIG5lZWRlZFxyXG4gICAgICpcclxuICAgICAqIEB0eXBlIHtzdHJpbmd9XHJcbiAgICAgKiBAbWVtYmVyb2YgRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgZGVzY3JpcHRpb25UZXh0Pzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgQE91dHB1dCgpIGlzT3BlbkNoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIEBJbnB1dCgpIGV4cGFuZFBhbmVsVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGNvbGxhcHNlUGFuZWxUZXh0Pzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIGhlYWRlclNpemU6IEhlYWRlclNpemUgPSAnZGVmYXVsdCc7XHJcblxyXG4gICAgcHVibGljIGNhcmV0SWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNoZXZyb25Eb3duO1xyXG4gICAgXHJcblxyXG4gICAgcHVibGljIG9uVG9nZ2xlSXNPcGVuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmlzT3BlbiA9ICF0aGlzLmlzT3BlbjtcclxuICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcclxuICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb3BlblBhbmVsKCkge1xyXG4gICAgICAgIGlmICghdGhpcy5pc09wZW4pIHtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW4gPSB0cnVlO1xyXG4gICAgICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdlxyXG4gICAgY2xhc3M9XCJyb3VuZGVkIGV4cGFuc2lvbi1wYW5lbFwiXHJcbiAgICBbY2xhc3MuYmFja2dyb3VuZF09XCJzaG93QmFja2dyb3VuZFwiXHJcbiAgICBbY2xhc3MuY2xvc2VkXT1cIiFpc09wZW5cIlxyXG4gICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwic2hvd0JhY2tncm91bmQgPyBiYWNrZ3JvdW5kQ29sb3IgOiBudWxsXCJcclxuICAgIChjbGljayk9XCJvcGVuUGFuZWwoKVwiXHJcbj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaGlkZUhlYWRlclwiPlxyXG4gICAgICAgIDxkaXZcclxuICAgICAgICAgICAgY2xhc3M9XCJleHBhbnNpb24tcGFuZWwtaGVhZGVyIGQtZmxleCBmbGV4LXJvdyBhbGlnaC1pdGVtcy1jZW50ZXJcIlxyXG4gICAgICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVJc09wZW5DbGljaygkZXZlbnQpXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmtcIlxyXG4gICAgICAgICAgICAgICAgW2lkXT1cImhlYWRlcklkXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJoZWFkZXItdGV4dFwiXHJcbiAgICAgICAgICAgICAgICAgICAgW2NsYXNzLnNkcy1mcy05M109XCJoZWFkZXJTaXplID09ICdzbWFsbCdcIlxyXG4gICAgICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgICAgICB7eyBoZWFkZXJUZXh0IH19XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rIGNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5yb3RhdGVdPVwiYW5pbWF0ZUNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tcy0yXT1cImNhcmV0UGxhY2VtZW50ID09PSAnbmV4dFRvSGVhZGVyJ1wiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MubXMtYXV0b109XCJjYXJldFBsYWNlbWVudCA9PT0gJ2ZhckVuZCdcIlxyXG4gICAgICAgICAgICAgICAgW3RpdGxlXT1cImlzT3BlbiA/IGNvbGxhcHNlUGFuZWxUZXh0ID8/ICcnIDogZXhwYW5kUGFuZWxUZXh0ID8/ICcnXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2FyZXRJY29uXCIgW3NpemVdPVwiaGVhZGVyU2l6ZSA9PSAnc21hbGwnID8gJ3NtJyA6ICdsZydcIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICAqbmdJZj1cIiFpc09wZW5cIlxyXG4gICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIHt7IGRlc2NyaXB0aW9uVGV4dCB9fVxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjb250ZW50T25DbG9zZWRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICBjbGFzcz1cInBhbmVsLWNvbnRlbnRzXCIgXHJcbiAgICAgICAgW2NsYXNzLm9wZW5dPVwiaXNPcGVuXCJcclxuICAgICAgICBbY2xhc3MuYW5pbWF0ZV09XCJhbmltYXRlUGFuZWxcIlxyXG4gICAgICAgID5cclxuICAgICAgICA8ZGl2IFxyXG4gICAgICAgICAgICAqbmdJZj1cImlzT3BlblwiXHJcbiAgICAgICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLnR5cGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC50eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgQ2FyZXRQbGFjZW1lbnQgPSAnbmV4dFRvSGVhZGVyJyB8ICdmYXJFbmQnO1xyXG5cclxuZXhwb3J0IHR5cGUgSGVhZGVyU2l6ZSA9ICdkZWZhdWx0JyB8ICdzbWFsbCc7Il19
|
|
@@ -9,6 +9,7 @@ import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
|
|
|
9
9
|
class SdsExpansionPanelComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.animateCaret = false;
|
|
12
|
+
this.animatePanel = false;
|
|
12
13
|
/**
|
|
13
14
|
* toggles greyish background
|
|
14
15
|
*
|
|
@@ -30,6 +31,7 @@ class SdsExpansionPanelComponent {
|
|
|
30
31
|
this.caretPlacement = 'nextToHeader';
|
|
31
32
|
this.isOpen = false;
|
|
32
33
|
this.isOpenChange = new EventEmitter();
|
|
34
|
+
this.headerSize = 'default';
|
|
33
35
|
this.caretIcon = faChevronDown;
|
|
34
36
|
}
|
|
35
37
|
onToggleIsOpenClick(event) {
|
|
@@ -45,10 +47,10 @@ class SdsExpansionPanelComponent {
|
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
50
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
50
52
|
type: Component,
|
|
51
|
-
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
53
|
+
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
52
54
|
}], propDecorators: { headerText: [{
|
|
53
55
|
type: Input
|
|
54
56
|
}], hideHeader: [{
|
|
@@ -57,6 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
57
59
|
type: Input
|
|
58
60
|
}], animateCaret: [{
|
|
59
61
|
type: Input
|
|
62
|
+
}], animatePanel: [{
|
|
63
|
+
type: Input
|
|
60
64
|
}], showBackground: [{
|
|
61
65
|
type: Input
|
|
62
66
|
}], backgroundColor: [{
|
|
@@ -73,6 +77,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
73
77
|
type: Input
|
|
74
78
|
}], collapsePanelText: [{
|
|
75
79
|
type: Input
|
|
80
|
+
}], headerSize: [{
|
|
81
|
+
type: Input
|
|
76
82
|
}] } });
|
|
77
83
|
|
|
78
84
|
/**
|
|
@@ -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 {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\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 * Background color of the panel. Gray-100 by default\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\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 @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
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 } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement, HeaderSize } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\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 @Input() animatePanel = false;\r\n\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 * Background color of the panel. Gray-100 by default\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\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 @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\r\n\r\n @Input() headerSize: HeaderSize = 'default';\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n \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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</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 SdsExpansionPanelModule\r\n */\r\n@NgModule({\r\n declarations: [SdsExpansionPanelComponent],\r\n imports: [CommonModule, FontAwesomeModule],\r\n exports: [SdsExpansionPanelComponent],\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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"}
|
|
@@ -9,6 +9,7 @@ import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
|
|
|
9
9
|
class SdsExpansionPanelComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.animateCaret = false;
|
|
12
|
+
this.animatePanel = false;
|
|
12
13
|
/**
|
|
13
14
|
* toggles greyish background
|
|
14
15
|
*
|
|
@@ -30,6 +31,7 @@ class SdsExpansionPanelComponent {
|
|
|
30
31
|
this.caretPlacement = 'nextToHeader';
|
|
31
32
|
this.isOpen = false;
|
|
32
33
|
this.isOpenChange = new EventEmitter();
|
|
34
|
+
this.headerSize = 'default';
|
|
33
35
|
this.caretIcon = faChevronDown;
|
|
34
36
|
}
|
|
35
37
|
onToggleIsOpenClick(event) {
|
|
@@ -45,10 +47,10 @@ class SdsExpansionPanelComponent {
|
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
50
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, 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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
50
52
|
type: Component,
|
|
51
|
-
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
53
|
+
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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</div>\r\n", styles: [".expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.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:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
|
|
52
54
|
}], propDecorators: { headerText: [{
|
|
53
55
|
type: Input
|
|
54
56
|
}], hideHeader: [{
|
|
@@ -57,6 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
57
59
|
type: Input
|
|
58
60
|
}], animateCaret: [{
|
|
59
61
|
type: Input
|
|
62
|
+
}], animatePanel: [{
|
|
63
|
+
type: Input
|
|
60
64
|
}], showBackground: [{
|
|
61
65
|
type: Input
|
|
62
66
|
}], backgroundColor: [{
|
|
@@ -73,6 +77,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
73
77
|
type: Input
|
|
74
78
|
}], collapsePanelText: [{
|
|
75
79
|
type: Input
|
|
80
|
+
}], headerSize: [{
|
|
81
|
+
type: Input
|
|
76
82
|
}] } });
|
|
77
83
|
|
|
78
84
|
/**
|
|
@@ -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 {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\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 * Background color of the panel. Gray-100 by default\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\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 @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n
|
|
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 } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement, HeaderSize } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\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 @Input() animatePanel = false;\r\n\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 * Background color of the panel. Gray-100 by default\r\n *\r\n * @memberof SdsExpansionPanelComponent\r\n */\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\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 @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\r\n\r\n @Input() headerSize: HeaderSize = 'default';\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n \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 [style.background-color]=\"showBackground ? backgroundColor : null\"\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 (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n >\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link caret\"\r\n [class.rotate]=\"animateCaret\"\r\n [class.ms-2]=\"caretPlacement === 'nextToHeader'\"\r\n [class.ms-auto]=\"caretPlacement === 'farEnd'\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></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 class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\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</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 SdsExpansionPanelModule\r\n */\r\n@NgModule({\r\n declarations: [SdsExpansionPanelComponent],\r\n imports: [CommonModule, FontAwesomeModule],\r\n exports: [SdsExpansionPanelComponent],\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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"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
|
-
import { CaretPlacement } from './expansion-panel.types';
|
|
2
|
+
import { CaretPlacement, HeaderSize } from './expansion-panel.types';
|
|
3
3
|
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class SdsExpansionPanelComponent {
|
|
@@ -7,6 +7,7 @@ export declare class SdsExpansionPanelComponent {
|
|
|
7
7
|
hideHeader?: boolean;
|
|
8
8
|
headerId?: string;
|
|
9
9
|
animateCaret: boolean;
|
|
10
|
+
animatePanel: boolean;
|
|
10
11
|
/**
|
|
11
12
|
* toggles greyish background
|
|
12
13
|
*
|
|
@@ -39,9 +40,10 @@ export declare class SdsExpansionPanelComponent {
|
|
|
39
40
|
isOpenChange: EventEmitter<boolean>;
|
|
40
41
|
expandPanelText?: string;
|
|
41
42
|
collapsePanelText?: string;
|
|
43
|
+
headerSize: HeaderSize;
|
|
42
44
|
caretIcon: IconDefinition;
|
|
43
45
|
onToggleIsOpenClick(event: MouseEvent): void;
|
|
44
46
|
openPanel(): void;
|
|
45
47
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdsExpansionPanelComponent, never>;
|
|
46
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdsExpansionPanelComponent, "sds-expansion-panel", never, { "headerText": "headerText"; "hideHeader": "hideHeader"; "headerId": "headerId"; "animateCaret": "animateCaret"; "showBackground": "showBackground"; "backgroundColor": "backgroundColor"; "caretPlacement": "caretPlacement"; "descriptionText": "descriptionText"; "isOpen": "isOpen"; "expandPanelText": "expandPanelText"; "collapsePanelText": "collapsePanelText"; }, { "isOpenChange": "isOpenChange"; }, never, ["[contentOnClosed]", "*"], false, never>;
|
|
48
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsExpansionPanelComponent, "sds-expansion-panel", never, { "headerText": "headerText"; "hideHeader": "hideHeader"; "headerId": "headerId"; "animateCaret": "animateCaret"; "animatePanel": "animatePanel"; "showBackground": "showBackground"; "backgroundColor": "backgroundColor"; "caretPlacement": "caretPlacement"; "descriptionText": "descriptionText"; "isOpen": "isOpen"; "expandPanelText": "expandPanelText"; "collapsePanelText": "collapsePanelText"; "headerSize": "headerSize"; }, { "isOpenChange": "isOpenChange"; }, never, ["[contentOnClosed]", "*"], false, never>;
|
|
47
49
|
}
|