@spicainternational/ngx-sds-components 6.0.18 → 6.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2020/src/lib/expansion-panel/expansion-panel.component.mjs +11 -3
  2. package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +10 -2
  3. package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
  4. package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +10 -2
  5. package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/expansion-panel/expansion-panel.component.d.ts +7 -1
package/esm2020/src/lib/expansion-panel/expansion-panel.component.mjs CHANGED
@@ -12,6 +12,12 @@ export class SdsExpansionPanelComponent {
12
12
  * @memberof SdsExpansionPanelComponent
13
13
  */
14
14
  this.showBackground = true;
15
+ /**
16
+ * Background color of the panel. Gray-100 by default
17
+ *
18
+ * @memberof SdsExpansionPanelComponent
19
+ */
20
+ this.backgroundColor = 'var(--bs-gray-100)';
15
21
  /**
16
22
  * position caret next to header of on the far end of the component
17
23
  *
@@ -36,10 +42,10 @@ export class SdsExpansionPanelComponent {
36
42
  }
37
43
  }
38
44
  SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
39
- 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", 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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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 });
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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 });
40
46
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
41
47
  type: Component,
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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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"] }]
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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"] }]
43
49
  }], propDecorators: { headerText: [{
44
50
  type: Input
45
51
  }], hideHeader: [{
@@ -50,6 +56,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
50
56
  type: Input
51
57
  }], showBackground: [{
52
58
  type: Input
59
+ }], backgroundColor: [{
60
+ type: Input
53
61
  }], caretPlacement: [{
54
62
  type: Input
55
63
  }], descriptionText: [{
@@ -63,4 +71,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
63
71
  }], collapsePanelText: [{
64
72
  type: Input
65
73
  }] } });
66
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFVbkUsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVdhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFLNUQsY0FBUyxHQUFtQixhQUFhLENBQUM7S0FjcEQ7SUFaVSxtQkFBbUIsQ0FBQyxLQUFpQjtRQUN4QyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUN2QztJQUNMLENBQUM7O3dIQW5EUSwwQkFBMEI7NEdBQTFCLDBCQUEwQixnYUNqQnZDLHVoREFpREE7NEZEaENhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxjQUFjO3NCQUF0QixLQUFLO2dCQVFHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBVUcsZUFBZTtzQkFBdkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTTtnQkFFRSxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENvbXBvbmVudCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIElucHV0LFxyXG4gICAgT3V0cHV0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYUNoZXZyb25Eb3duIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IENhcmV0UGxhY2VtZW50IH0gZnJvbSAnLi9leHBhbnNpb24tcGFuZWwudHlwZXMnO1xyXG5pbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWV4cGFuc2lvbi1wYW5lbCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudCB7XHJcbiAgICBASW5wdXQoKSBoZWFkZXJUZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgaGlkZUhlYWRlcj86IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSBoZWFkZXJJZD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKSBhbmltYXRlQ2FyZXQgPSBmYWxzZTtcclxuXHJcbiAgICAvKipcclxuICAgICAqIHRvZ2dsZXMgZ3JleWlzaCBiYWNrZ3JvdW5kXHJcbiAgICAgKlxyXG4gICAgICogQG1lbWJlcm9mIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHNob3dCYWNrZ3JvdW5kID0gdHJ1ZTtcclxuXHJcbiAgICAvKipcclxuICAgICAqIHBvc2l0aW9uIGNhcmV0IG5leHQgdG8gaGVhZGVyIG9mIG9uIHRoZSBmYXIgZW5kIG9mIHRoZSBjb21wb25lbnRcclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7KCduZXh0VG9IZWFkZXInIHwgJ2ZhckVuZCcpfVxyXG4gICAgICogQG1lbWJlcm9mIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGNhcmV0UGxhY2VtZW50OiBDYXJldFBsYWNlbWVudCA9ICduZXh0VG9IZWFkZXInO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogJ2Rlc2NyaXB0aW9uVGV4dCcgLSB0ZXh0IGRpc3BsYXllZCB3aGVuIGNvbXBvbmVudCBpcyBcImNsb3NlZFwiLlxyXG4gICAgICpcclxuICAgICAqIE5vdGU6IFVzZSBuZy1jb250ZW50ICdjb250ZW50T25DbG9zZWQnIGlmIG1vcmUgY29tcGxleCB1c2UtY2FzZSBpcyBuZWVkZWRcclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7c3RyaW5nfVxyXG4gICAgICogQG1lbWJlcm9mIEV4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGRlc2NyaXB0aW9uVGV4dD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKSBpc09wZW46IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBPdXRwdXQoKSBpc09wZW5DaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgICBASW5wdXQoKSBleHBhbmRQYW5lbFRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjb2xsYXBzZVBhbmVsVGV4dD86IHN0cmluZztcclxuXHJcbiAgICBwdWJsaWMgY2FyZXRJY29uOiBJY29uRGVmaW5pdGlvbiA9IGZhQ2hldnJvbkRvd247XHJcblxyXG4gICAgcHVibGljIG9uVG9nZ2xlSXNPcGVuQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmlzT3BlbiA9ICF0aGlzLmlzT3BlbjtcclxuICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcclxuICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb3BlblBhbmVsKCkge1xyXG4gICAgICAgIGlmICghdGhpcy5pc09wZW4pIHtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW4gPSB0cnVlO1xyXG4gICAgICAgICAgICB0aGlzLmlzT3BlbkNoYW5nZS5lbWl0KHRoaXMuaXNPcGVuKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdlxyXG4gICAgY2xhc3M9XCJyb3VuZGVkIGV4cGFuc2lvbi1wYW5lbFwiXHJcbiAgICBbY2xhc3MuYmFja2dyb3VuZF09XCJzaG93QmFja2dyb3VuZFwiXHJcbiAgICBbY2xhc3MuY2xvc2VkXT1cIiFpc09wZW5cIlxyXG4gICAgKGNsaWNrKT1cIm9wZW5QYW5lbCgpXCJcclxuPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFoaWRlSGVhZGVyXCI+XHJcbiAgICAgICAgPGRpdlxyXG4gICAgICAgICAgICBjbGFzcz1cImV4cGFuc2lvbi1wYW5lbC1oZWFkZXIgZC1mbGV4IGZsZXgtcm93IGFsaWdoLWl0ZW1zLWNlbnRlclwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJvblRvZ2dsZUlzT3BlbkNsaWNrKCRldmVudClcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tbGlua1wiXHJcbiAgICAgICAgICAgICAgICBbaWRdPVwiaGVhZGVySWRcIlxyXG4gICAgICAgICAgICAgICAgXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiaGVhZGVyLXRleHRcIj5cclxuICAgICAgICAgICAgICAgICAgICB7eyBoZWFkZXJUZXh0IH19XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rIGNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5yb3RhdGVdPVwiYW5pbWF0ZUNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tcy0yXT1cImNhcmV0UGxhY2VtZW50ID09PSAnbmV4dFRvSGVhZGVyJ1wiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MubXMtYXV0b109XCJjYXJldFBsYWNlbWVudCA9PT0gJ2ZhckVuZCdcIlxyXG4gICAgICAgICAgICAgICAgW3RpdGxlXT1cImlzT3BlbiA/IGNvbGxhcHNlUGFuZWxUZXh0ID8/ICcnIDogZXhwYW5kUGFuZWxUZXh0ID8/ICcnXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2FyZXRJY29uXCI+PC9mYS1pY29uPlxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCIhaXNPcGVuXCJcclxuICAgICAgICBjbGFzcz1cIm10LTFcIlxyXG4gICAgICAgID5cclxuICAgICAgICB7eyBkZXNjcmlwdGlvblRleHQgfX1cclxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbY29udGVudE9uQ2xvc2VkXVwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCJpc09wZW5cIlxyXG4gICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
74
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFVbkUsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQVdhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7OztXQUlHO1FBQ00sb0JBQWUsR0FBRyxvQkFBb0IsQ0FBQztRQUVoRDs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFLNUQsY0FBUyxHQUFtQixhQUFhLENBQUM7S0FjcEQ7SUFaVSxtQkFBbUIsQ0FBQyxLQUFpQjtRQUN4QyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUN2QztJQUNMLENBQUM7O3dIQTFEUSwwQkFBMEI7NEdBQTFCLDBCQUEwQixvY0NqQnZDLG1tREFrREE7NEZEakNhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxjQUFjO3NCQUF0QixLQUFLO2dCQU9HLGVBQWU7c0JBQXZCLEtBQUs7Z0JBUUcsY0FBYztzQkFBdEIsS0FBSztnQkFVRyxlQUFlO3NCQUF2QixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxZQUFZO3NCQUFyQixNQUFNO2dCQUVFLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgSW5wdXQsXHJcbiAgICBPdXRwdXQsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGZhQ2hldnJvbkRvd24gfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXJlZ3VsYXItc3ZnLWljb25zJztcclxuaW1wb3J0IHsgQ2FyZXRQbGFjZW1lbnQgfSBmcm9tICcuL2V4cGFuc2lvbi1wYW5lbC50eXBlcyc7XHJcbmltcG9ydCB7IEljb25EZWZpbml0aW9uIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtZXhwYW5zaW9uLXBhbmVsJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50IHtcclxuICAgIEBJbnB1dCgpIGhlYWRlclRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBoaWRlSGVhZGVyPzogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGhlYWRlcklkPzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIGFuaW1hdGVDYXJldCA9IGZhbHNlO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogdG9nZ2xlcyBncmV5aXNoIGJhY2tncm91bmRcclxuICAgICAqXHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgc2hvd0JhY2tncm91bmQgPSB0cnVlO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogQmFja2dyb3VuZCBjb2xvciBvZiB0aGUgcGFuZWwuIEdyYXktMTAwIGJ5IGRlZmF1bHRcclxuICAgICAqXHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzRXhwYW5zaW9uUGFuZWxDb21wb25lbnRcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgYmFja2dyb3VuZENvbG9yID0gJ3ZhcigtLWJzLWdyYXktMTAwKSc7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBwb3NpdGlvbiBjYXJldCBuZXh0IHRvIGhlYWRlciBvZiBvbiB0aGUgZmFyIGVuZCBvZiB0aGUgY29tcG9uZW50XHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUgeygnbmV4dFRvSGVhZGVyJyB8ICdmYXJFbmQnKX1cclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBjYXJldFBsYWNlbWVudDogQ2FyZXRQbGFjZW1lbnQgPSAnbmV4dFRvSGVhZGVyJztcclxuXHJcbiAgICAvKipcclxuICAgICAqICdkZXNjcmlwdGlvblRleHQnIC0gdGV4dCBkaXNwbGF5ZWQgd2hlbiBjb21wb25lbnQgaXMgXCJjbG9zZWRcIi5cclxuICAgICAqXHJcbiAgICAgKiBOb3RlOiBVc2UgbmctY29udGVudCAnY29udGVudE9uQ2xvc2VkJyBpZiBtb3JlIGNvbXBsZXggdXNlLWNhc2UgaXMgbmVlZGVkXHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUge3N0cmluZ31cclxuICAgICAqIEBtZW1iZXJvZiBFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBkZXNjcmlwdGlvblRleHQ/OiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KCkgaXNPcGVuOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBAT3V0cHV0KCkgaXNPcGVuQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQElucHV0KCkgZXhwYW5kUGFuZWxUZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgY29sbGFwc2VQYW5lbFRleHQ/OiBzdHJpbmc7XHJcblxyXG4gICAgcHVibGljIGNhcmV0SWNvbjogSWNvbkRlZmluaXRpb24gPSBmYUNoZXZyb25Eb3duO1xyXG5cclxuICAgIHB1YmxpYyBvblRvZ2dsZUlzT3BlbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9wZW5QYW5lbCgpIHtcclxuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XHJcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXZcclxuICAgIGNsYXNzPVwicm91bmRlZCBleHBhbnNpb24tcGFuZWxcIlxyXG4gICAgW2NsYXNzLmJhY2tncm91bmRdPVwic2hvd0JhY2tncm91bmRcIlxyXG4gICAgW2NsYXNzLmNsb3NlZF09XCIhaXNPcGVuXCJcclxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cInNob3dCYWNrZ3JvdW5kID8gYmFja2dyb3VuZENvbG9yIDogbnVsbFwiXHJcbiAgICAoY2xpY2spPVwib3BlblBhbmVsKClcIlxyXG4+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWhpZGVIZWFkZXJcIj5cclxuICAgICAgICA8ZGl2XHJcbiAgICAgICAgICAgIGNsYXNzPVwiZXhwYW5zaW9uLXBhbmVsLWhlYWRlciBkLWZsZXggZmxleC1yb3cgYWxpZ2gtaXRlbXMtY2VudGVyXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uVG9nZ2xlSXNPcGVuQ2xpY2soJGV2ZW50KVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rXCJcclxuICAgICAgICAgICAgICAgIFtpZF09XCJoZWFkZXJJZFwiXHJcbiAgICAgICAgICAgICAgICBcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJoZWFkZXItdGV4dFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIHt7IGhlYWRlclRleHQgfX1cclxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgY2FyZXRcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLnJvdGF0ZV09XCJhbmltYXRlQ2FyZXRcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLm1zLTJdPVwiY2FyZXRQbGFjZW1lbnQgPT09ICduZXh0VG9IZWFkZXInXCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tcy1hdXRvXT1cImNhcmV0UGxhY2VtZW50ID09PSAnZmFyRW5kJ1wiXHJcbiAgICAgICAgICAgICAgICBbdGl0bGVdPVwiaXNPcGVuID8gY29sbGFwc2VQYW5lbFRleHQgPz8gJycgOiBleHBhbmRQYW5lbFRleHQgPz8gJydcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjYXJldEljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICAqbmdJZj1cIiFpc09wZW5cIlxyXG4gICAgICAgIGNsYXNzPVwibXQtMVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIHt7IGRlc2NyaXB0aW9uVGV4dCB9fVxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjb250ZW50T25DbG9zZWRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiBcclxuICAgICAgICAqbmdJZj1cImlzT3BlblwiXHJcbiAgICAgICAgY2xhc3M9XCJtdC0xXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs CHANGED
@@ -15,6 +15,12 @@ class SdsExpansionPanelComponent {
15
15
  * @memberof SdsExpansionPanelComponent
16
16
  */
17
17
  this.showBackground = true;
18
+ /**
19
+ * Background color of the panel. Gray-100 by default
20
+ *
21
+ * @memberof SdsExpansionPanelComponent
22
+ */
23
+ this.backgroundColor = 'var(--bs-gray-100)';
18
24
  /**
19
25
  * position caret next to header of on the far end of the component
20
26
  *
@@ -39,10 +45,10 @@ class SdsExpansionPanelComponent {
39
45
  }
40
46
  }
41
47
  SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
42
- 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", 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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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 });
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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 });
43
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
44
50
  type: Component,
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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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"] }]
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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"] }]
46
52
  }], propDecorators: { headerText: [{
47
53
  type: Input
48
54
  }], hideHeader: [{
@@ -53,6 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
53
59
  type: Input
54
60
  }], showBackground: [{
55
61
  type: Input
62
+ }], backgroundColor: [{
63
+ type: Input
56
64
  }], caretPlacement: [{
57
65
  type: Input
58
66
  }], descriptionText: [{
package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map CHANGED
@@ -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 * 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 (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 >\r\n <span class=\"header-text\">\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\"></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 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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"}
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 \r\n >\r\n <span class=\"header-text\">\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\"></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 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":";;;;;;;;MAiBa,0BAA0B,CAAA;AANvC,IAAA,WAAA,GAAA;AAWa,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;AAE9B;;;;AAIG;AACM,QAAA,IAAc,CAAA,cAAA,GAAG,IAAI,CAAC;AAE/B;;;;AAIG;AACM,QAAA,IAAe,CAAA,eAAA,GAAG,oBAAoB,CAAC;AAEhD;;;;;AAKG;AACM,QAAA,IAAc,CAAA,cAAA,GAAmB,cAAc,CAAC;AAYhD,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK,CAAC;AACvB,QAAA,IAAA,CAAA,YAAY,GAA0B,IAAI,YAAY,EAAE,CAAC;AAK5D,QAAA,IAAS,CAAA,SAAA,GAAmB,aAAa,CAAC;KAcpD;AAZU,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACxC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,KAAK,CAAC,wBAAwB,EAAE,CAAC;KACpC;IAEM,SAAS,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACd,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACvC,SAAA;KACJ;;wHA1DQ,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,0BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,ocCjBvC,mmDAkDA,EAAA,MAAA,EAAA,CAAA,2mBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;4FDjCa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACI,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mmDAAA,EAAA,MAAA,EAAA,CAAA,2mBAAA,CAAA,EAAA,CAAA;8BAGtC,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAOG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAOG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAQG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAUG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAEG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACI,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAEE,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBACG,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;;;AEvDV;;;;;AAKG;MAMU,uBAAuB,CAAA;;qHAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,iBAJjB,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC/B,YAAY,EAAE,iBAAiB,aAC/B,0BAA0B,CAAA,EAAA,CAAA,CAAA;sHAE3B,uBAAuB,EAAA,OAAA,EAAA,CAHtB,YAAY,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA;4FAGhC,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,0BAA0B,CAAC;AAC1C,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC;oBAC1C,OAAO,EAAE,CAAC,0BAA0B,CAAC;iBACxC,CAAA;;;ACfD;;AAEG;;;;"}
package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs CHANGED
@@ -15,6 +15,12 @@ class SdsExpansionPanelComponent {
15
15
  * @memberof SdsExpansionPanelComponent
16
16
  */
17
17
  this.showBackground = true;
18
+ /**
19
+ * Background color of the panel. Gray-100 by default
20
+ *
21
+ * @memberof SdsExpansionPanelComponent
22
+ */
23
+ this.backgroundColor = 'var(--bs-gray-100)';
18
24
  /**
19
25
  * position caret next to header of on the far end of the component
20
26
  *
@@ -39,10 +45,10 @@ class SdsExpansionPanelComponent {
39
45
  }
40
46
  }
41
47
  SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
42
- 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", 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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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 });
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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 });
43
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
44
50
  type: Component,
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 (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 >\r\n <span class=\"header-text\">\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\"></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{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{background-color:var(--bs-gray-100);padding: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"] }]
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 \r\n >\r\n <span class=\"header-text\">\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\"></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{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"] }]
46
52
  }], propDecorators: { headerText: [{
47
53
  type: Input
48
54
  }], hideHeader: [{
@@ -53,6 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
53
59
  type: Input
54
60
  }], showBackground: [{
55
61
  type: Input
62
+ }], backgroundColor: [{
63
+ type: Input
56
64
  }], caretPlacement: [{
57
65
  type: Input
58
66
  }], descriptionText: [{
package/fesm2020/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map CHANGED
@@ -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 * 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 (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 >\r\n <span class=\"header-text\">\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\"></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 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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"}
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 \r\n >\r\n <span class=\"header-text\">\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\"></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 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,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicainternational/ngx-sds-components",
3
- "version": "6.0.18",
3
+ "version": "6.0.19",
4
4
  "license": "MIT",
5
5
  "description": "Spica design system angular components.",
6
6
  "peerDependencies": {
package/src/lib/expansion-panel/expansion-panel.component.d.ts CHANGED
@@ -13,6 +13,12 @@ export declare class SdsExpansionPanelComponent {
13
13
  * @memberof SdsExpansionPanelComponent
14
14
  */
15
15
  showBackground: boolean;
16
+ /**
17
+ * Background color of the panel. Gray-100 by default
18
+ *
19
+ * @memberof SdsExpansionPanelComponent
20
+ */
21
+ backgroundColor: string;
16
22
  /**
17
23
  * position caret next to header of on the far end of the component
18
24
  *
@@ -37,5 +43,5 @@ export declare class SdsExpansionPanelComponent {
37
43
  onToggleIsOpenClick(event: MouseEvent): void;
38
44
  openPanel(): void;
39
45
  static ɵfac: i0.ɵɵFactoryDeclaration<SdsExpansionPanelComponent, never>;
40
- 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"; "expandPanelText": "expandPanelText"; "collapsePanelText": "collapsePanelText"; }, { "isOpenChange": "isOpenChange"; }, never, ["[contentOnClosed]", "*"], false, 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>;
41
47
  }