@spicainternational/ngx-sds-components 7.9.2 → 7.11.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 +8 -4
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +7 -3
- 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 +7 -3
- 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 +3 -1
|
@@ -44,11 +44,13 @@ export class SdsExpansionPanelComponent {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", headerSideText: "headerSideText", 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 [
|
|
47
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
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 [
|
|
51
|
-
}], propDecorators: {
|
|
50
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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
|
+
}], propDecorators: { headerIcon: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], headerText: [{
|
|
52
54
|
type: Input
|
|
53
55
|
}], headerSideText: [{
|
|
54
56
|
type: Input
|
|
@@ -60,6 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
60
62
|
type: Input
|
|
61
63
|
}], animatePanel: [{
|
|
62
64
|
type: Input
|
|
65
|
+
}], hoverColor: [{
|
|
66
|
+
type: Input
|
|
63
67
|
}], showBackground: [{
|
|
64
68
|
type: Input
|
|
65
69
|
}], backgroundColor: [{
|
|
@@ -79,4 +83,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
79
83
|
}], headerSize: [{
|
|
80
84
|
type: Input
|
|
81
85
|
}] } });
|
|
82
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
86
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZXhwYW5zaW9uLXBhbmVsL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFVbkUsTUFBTSxPQUFPLDBCQUEwQjtJQU52QztRQWFhLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBSzlCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUUvQjs7OztXQUlHO1FBQ00sb0JBQWUsR0FBRyxvQkFBb0IsQ0FBQztRQUVoRDs7Ozs7V0FLRztRQUNNLG1CQUFjLEdBQW1CLGNBQWMsQ0FBQztRQVloRCxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFLMUQsZUFBVSxHQUFlLFNBQVMsQ0FBQztRQUVyQyxjQUFTLEdBQW1CLGFBQWEsQ0FBQztLQWVwRDtJQVpVLG1CQUFtQixDQUFDLEtBQWlCO1FBQ3hDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRU0sU0FBUztRQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2QsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7WUFDbkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQ3ZDO0lBQ0wsQ0FBQzs7d0hBbkVRLDBCQUEwQjs0R0FBMUIsMEJBQTBCLGtsQkNqQnZDLGdpRkFrRUE7NEZEakRhLDBCQUEwQjtrQkFOdEMsU0FBUzsrQkFDSSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFRyxVQUFVO3NCQUFsQixLQUFLO2dCQVFHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBT0csZUFBZTtzQkFBdkIsS0FBSztnQkFRRyxjQUFjO3NCQUF0QixLQUFLO2dCQVVHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU07Z0JBRUUsZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBRUcsVUFBVTtzQkFBbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENvbXBvbmVudCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIElucHV0LFxyXG4gICAgT3V0cHV0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmYUNoZXZyb25Eb3duIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IENhcmV0UGxhY2VtZW50LCBIZWFkZXJTaXplIH0gZnJvbSAnLi9leHBhbnNpb24tcGFuZWwudHlwZXMnO1xyXG5pbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWV4cGFuc2lvbi1wYW5lbCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2V4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudCB7XHJcbiAgICBASW5wdXQoKSBoZWFkZXJJY29uPzogSWNvbkRlZmluaXRpb247XHJcbiAgICBASW5wdXQoKSBoZWFkZXJUZXh0Pzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgaGVhZGVyU2lkZVRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBoaWRlSGVhZGVyPzogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGhlYWRlcklkPzogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpIGFuaW1hdGVDYXJldCA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgYW5pbWF0ZVBhbmVsID0gZmFsc2U7XHJcblxyXG4gICAgQElucHV0KCkgaG92ZXJDb2xvcj86IHN0cmluZztcclxuXHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiB0b2dnbGVzIGdyZXlpc2ggYmFja2dyb3VuZFxyXG4gICAgICpcclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBzaG93QmFja2dyb3VuZCA9IHRydWU7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBCYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBwYW5lbC4gR3JheS0xMDAgYnkgZGVmYXVsdFxyXG4gICAgICpcclxuICAgICAqIEBtZW1iZXJvZiBTZHNFeHBhbnNpb25QYW5lbENvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3IgPSAndmFyKC0tYnMtZ3JheS0xMDApJztcclxuXHJcbiAgICAvKipcclxuICAgICAqIHBvc2l0aW9uIGNhcmV0IG5leHQgdG8gaGVhZGVyIG9mIG9uIHRoZSBmYXIgZW5kIG9mIHRoZSBjb21wb25lbnRcclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7KCduZXh0VG9IZWFkZXInIHwgJ2ZhckVuZCcpfVxyXG4gICAgICogQG1lbWJlcm9mIFNkc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGNhcmV0UGxhY2VtZW50OiBDYXJldFBsYWNlbWVudCA9ICduZXh0VG9IZWFkZXInO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogJ2Rlc2NyaXB0aW9uVGV4dCcgLSB0ZXh0IGRpc3BsYXllZCB3aGVuIGNvbXBvbmVudCBpcyBcImNsb3NlZFwiLlxyXG4gICAgICpcclxuICAgICAqIE5vdGU6IFVzZSBuZy1jb250ZW50ICdjb250ZW50T25DbG9zZWQnIGlmIG1vcmUgY29tcGxleCB1c2UtY2FzZSBpcyBuZWVkZWRcclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7c3RyaW5nfVxyXG4gICAgICogQG1lbWJlcm9mIEV4cGFuc2lvblBhbmVsQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIGRlc2NyaXB0aW9uVGV4dD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKSBpc09wZW46IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBPdXRwdXQoKSBpc09wZW5DaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgICBASW5wdXQoKSBleHBhbmRQYW5lbFRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjb2xsYXBzZVBhbmVsVGV4dD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKSBoZWFkZXJTaXplOiBIZWFkZXJTaXplID0gJ2RlZmF1bHQnO1xyXG5cclxuICAgIHB1YmxpYyBjYXJldEljb246IEljb25EZWZpbml0aW9uID0gZmFDaGV2cm9uRG93bjtcclxuICAgIFxyXG5cclxuICAgIHB1YmxpYyBvblRvZ2dsZUlzT3BlbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9wZW5QYW5lbCgpIHtcclxuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB7XHJcbiAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcclxuICAgICAgICAgICAgdGhpcy5pc09wZW5DaGFuZ2UuZW1pdCh0aGlzLmlzT3Blbik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIlxyXG48IS0tIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cInNob3dCYWNrZ3JvdW5kID8gYmFja2dyb3VuZENvbG9yIDogbnVsbFwiIC0tPlxyXG48ZGl2XHJcbiAgICBjbGFzcz1cInJvdW5kZWQgZXhwYW5zaW9uLXBhbmVsXCJcclxuICAgIFtjbGFzcy5iYWNrZ3JvdW5kXT1cInNob3dCYWNrZ3JvdW5kXCJcclxuICAgIFtjbGFzcy5jbG9zZWRdPVwiIWlzT3BlblwiXHJcbiAgICBbY2xhc3Muc2hvdy1ob3Zlcl09XCIhaXNPcGVuICYmIGhvdmVyQ29sb3JcIlxyXG4gICAgW3N0eWxlLi0tc2RzLWV4cGFuc2lvbi1wYW5lbC1iZy1jb2xvcl09XCJzaG93QmFja2dyb3VuZCA/IGJhY2tncm91bmRDb2xvciA6ICd0cmFuc3BhcmVudCdcIlxyXG4gICAgW3N0eWxlLi0tc2RzLWV4cGFuc2lvbi1wYW5lbC1ob3Zlci1iZy1jb2xvcl09XCJob3ZlckNvbG9yID8gaG92ZXJDb2xvciA6ICd0cmFuc3BhcmVudCdcIlxyXG4gICAgKGNsaWNrKT1cIm9wZW5QYW5lbCgpXCJcclxuPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFoaWRlSGVhZGVyXCI+XHJcbiAgICAgICAgPGRpdlxyXG4gICAgICAgICAgICBjbGFzcz1cImV4cGFuc2lvbi1wYW5lbC1oZWFkZXIgc2RzLWZsZXgtcm93LWNlbnRlclwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJvblRvZ2dsZUlzT3BlbkNsaWNrKCRldmVudClcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tbGlua1wiXHJcbiAgICAgICAgICAgICAgICBbaWRdPVwiaGVhZGVySWRcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLm1lLWF1dG9dPVwiY2FyZXRQbGFjZW1lbnQgPT09ICdmYXJFbmQnXCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5tZS0yXT1cImNhcmV0UGxhY2VtZW50ID09PSAnbmV4dFRvSGVhZGVyJ1wiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxmYS1pY29uIGNsYXNzPVwibWUtMVwiICpuZ0lmPVwiaGVhZGVySWNvblwiIFtpY29uXT1cImhlYWRlckljb25cIiBbZml4ZWRXaWR0aF09XCJ0cnVlXCIgW3NpemVdPVwiaGVhZGVyU2l6ZSA9PSAnc21hbGwnID8gJ3NtJyA6ICdsZydcIj48L2ZhLWljb24+XHJcblxyXG4gICAgICAgICAgICAgICAgPHNwYW4gXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJoZWFkZXItdGV4dFwiXHJcbiAgICAgICAgICAgICAgICAgICAgW2NsYXNzLnNkcy1mcy05M109XCJoZWFkZXJTaXplID09ICdzbWFsbCdcIlxyXG4gICAgICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgICAgICB7eyBoZWFkZXJUZXh0IH19XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgICAgICA8c21hbGwgXHJcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJoZWFkZXJTaWRlVGV4dFwiXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJoZWFkZXItc2lkZS10ZXh0IHRleHQtbXV0ZWRcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtjbGFzcy5zZHMtZnMtOTBdPVwiaGVhZGVyU2l6ZSA9PSAnc21hbGwnXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAge3sgaGVhZGVyU2lkZVRleHQgfX1cclxuICAgICAgICAgICAgICAgIDwvc21hbGw+XHJcbiAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1zbSBidG4tbGluayBjYXJldCBweC0xXCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5yb3RhdGVdPVwiYW5pbWF0ZUNhcmV0XCJcclxuICAgICAgICAgICAgICAgIFt0aXRsZV09XCJpc09wZW4gPyBjb2xsYXBzZVBhbmVsVGV4dCA/PyAnJyA6IGV4cGFuZFBhbmVsVGV4dCA/PyAnJ1wiXHJcbiAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cImNhcmV0SWNvblwiIFtzaXplXT1cImhlYWRlclNpemUgPT0gJ3NtYWxsJyA/ICdzbScgOiAnbGcnXCI+PC9mYS1pY29uPlxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCIhaXNPcGVuXCJcclxuICAgICAgICA+XHJcbiAgICAgICAge3sgZGVzY3JpcHRpb25UZXh0IH19XHJcbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NvbnRlbnRPbkNsb3NlZF1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8ZGl2IFxyXG4gICAgICAgIGNsYXNzPVwicGFuZWwtY29udGVudHNcIiBcclxuICAgICAgICBbY2xhc3Mub3Blbl09XCJpc09wZW5cIlxyXG4gICAgICAgIFtjbGFzcy5hbmltYXRlXT1cImFuaW1hdGVQYW5lbFwiXHJcbiAgICAgICAgW2NsYXNzLm10LTJdPVwiaXNPcGVuXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICAgIDxuZy1jb250ZW50ICpuZ0lmPVwiaXNPcGVuXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -47,11 +47,13 @@ class SdsExpansionPanelComponent {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", headerSideText: "headerSideText", 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 [
|
|
50
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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 });
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
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 [
|
|
54
|
-
}], propDecorators: {
|
|
53
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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"] }]
|
|
54
|
+
}], propDecorators: { headerIcon: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], headerText: [{
|
|
55
57
|
type: Input
|
|
56
58
|
}], headerSideText: [{
|
|
57
59
|
type: Input
|
|
@@ -63,6 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
63
65
|
type: Input
|
|
64
66
|
}], animatePanel: [{
|
|
65
67
|
type: Input
|
|
68
|
+
}], hoverColor: [{
|
|
69
|
+
type: Input
|
|
66
70
|
}], showBackground: [{
|
|
67
71
|
type: Input
|
|
68
72
|
}], backgroundColor: [{
|
|
@@ -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, 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() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\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() headerIcon?: IconDefinition;\r\n @Input() headerText?: string;\r\n @Input() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\r\n @Input() animatePanel = false;\r\n\r\n @Input() hoverColor?: string;\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","\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></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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"}
|
|
@@ -47,11 +47,13 @@ class SdsExpansionPanelComponent {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
SdsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerText: "headerText", headerSideText: "headerSideText", 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 [
|
|
50
|
+
SdsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsExpansionPanelComponent, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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 });
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
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 [
|
|
54
|
-
}], propDecorators: {
|
|
53
|
+
args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.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{line-height:1rem;height:-moz-fit-content;height:fit-content;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.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.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 .header-side-text{font-size:1.06rem;font-weight:500}.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"] }]
|
|
54
|
+
}], propDecorators: { headerIcon: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], headerText: [{
|
|
55
57
|
type: Input
|
|
56
58
|
}], headerSideText: [{
|
|
57
59
|
type: Input
|
|
@@ -63,6 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
63
65
|
type: Input
|
|
64
66
|
}], animatePanel: [{
|
|
65
67
|
type: Input
|
|
68
|
+
}], hoverColor: [{
|
|
69
|
+
type: Input
|
|
66
70
|
}], showBackground: [{
|
|
67
71
|
type: Input
|
|
68
72
|
}], backgroundColor: [{
|
|
@@ -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, 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() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\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() headerIcon?: IconDefinition;\r\n @Input() headerText?: string;\r\n @Input() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = false;\r\n @Input() animatePanel = false;\r\n\r\n @Input() hoverColor?: string;\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","\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container *ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-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 [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\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 <small \r\n *ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\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 >\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 [class.mt-2]=\"isOpen\"\r\n >\r\n <ng-content *ngIf=\"isOpen\"></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
|
@@ -3,12 +3,14 @@ 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 {
|
|
6
|
+
headerIcon?: IconDefinition;
|
|
6
7
|
headerText?: string;
|
|
7
8
|
headerSideText?: string;
|
|
8
9
|
hideHeader?: boolean;
|
|
9
10
|
headerId?: string;
|
|
10
11
|
animateCaret: boolean;
|
|
11
12
|
animatePanel: boolean;
|
|
13
|
+
hoverColor?: string;
|
|
12
14
|
/**
|
|
13
15
|
* toggles greyish background
|
|
14
16
|
*
|
|
@@ -46,5 +48,5 @@ export declare class SdsExpansionPanelComponent {
|
|
|
46
48
|
onToggleIsOpenClick(event: MouseEvent): void;
|
|
47
49
|
openPanel(): void;
|
|
48
50
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdsExpansionPanelComponent, never>;
|
|
49
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdsExpansionPanelComponent, "sds-expansion-panel", never, { "headerText": "headerText"; "headerSideText": "headerSideText"; "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>;
|
|
51
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsExpansionPanelComponent, "sds-expansion-panel", never, { "headerIcon": "headerIcon"; "headerText": "headerText"; "headerSideText": "headerSideText"; "hideHeader": "hideHeader"; "headerId": "headerId"; "animateCaret": "animateCaret"; "animatePanel": "animatePanel"; "hoverColor": "hoverColor"; "showBackground": "showBackground"; "backgroundColor": "backgroundColor"; "caretPlacement": "caretPlacement"; "descriptionText": "descriptionText"; "isOpen": "isOpen"; "expandPanelText": "expandPanelText"; "collapsePanelText": "collapsePanelText"; "headerSize": "headerSize"; }, { "isOpenChange": "isOpenChange"; }, never, ["[contentOnClosed]", "*"], false, never>;
|
|
50
52
|
}
|