@spicainternational/ngx-sds-components 2.6.0 → 2.7.2
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/pane/pane.component.mjs +10 -3
- package/esm2020/src/lib/pane/pane.model.mjs +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs +9 -2
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs +9 -2
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/pane/pane.component.d.ts +6 -3
- package/src/lib/pane/pane.model.d.ts +1 -0
|
@@ -9,6 +9,11 @@ export class SdsPaneComponent {
|
|
|
9
9
|
this.pageChange = new EventEmitter();
|
|
10
10
|
this.closeIcon = faXmark;
|
|
11
11
|
}
|
|
12
|
+
ngOnChanges(changes) {
|
|
13
|
+
if (changes['product']) {
|
|
14
|
+
this.productCssClass = this.product ? `product-${this.product}` : undefined;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
12
17
|
ngOnInit() { }
|
|
13
18
|
showContent(page) {
|
|
14
19
|
this.selectedPage = page;
|
|
@@ -20,17 +25,19 @@ export class SdsPaneComponent {
|
|
|
20
25
|
}
|
|
21
26
|
}
|
|
22
27
|
SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\"
|
|
28
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
25
30
|
type: Component,
|
|
26
|
-
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pane border-left\"
|
|
31
|
+
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""] }]
|
|
27
32
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
28
33
|
type: Input
|
|
29
34
|
}], selectedPage: [{
|
|
30
35
|
type: Input
|
|
31
36
|
}], contentWidthRem: [{
|
|
32
37
|
type: Input
|
|
38
|
+
}], product: [{
|
|
39
|
+
type: Input
|
|
33
40
|
}], pageChange: [{
|
|
34
41
|
type: Output
|
|
35
42
|
}] } });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lL3BhbmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZS9wYW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUdsSSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFTN0QsTUFBTSxPQUFPLGdCQUFnQjtJQWF6QjtRQVRnQixvQkFBZSxHQUFXLEVBQUUsQ0FBQztRQUduQyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVuQyxjQUFTLEdBQUcsT0FBTyxDQUFDO0lBSVosQ0FBQztJQUNoQixXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxXQUFXLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO1NBQy9FO0lBQ0wsQ0FBQztJQUVELFFBQVEsS0FBVSxDQUFDO0lBRVosV0FBVyxDQUFDLElBQWM7UUFDN0IsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTSxXQUFXO1FBQ2QsSUFBSSxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7OzZHQTlCUSxnQkFBZ0I7aUdBQWhCLGdCQUFnQiw4TkNaN0IscXVEQTBETTsyRkQ5Q08sZ0JBQWdCO2tCQU41QixTQUFTOytCQUNJLFVBQVUsbUJBR0gsdUJBQXVCLENBQUMsTUFBTTswRUFJL0IsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLGVBQWU7c0JBQTlCLEtBQUs7Z0JBQ1UsT0FBTztzQkFBdEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUGFuZVBhZ2UgfSBmcm9tICcuL3BhbmUubW9kZWwnO1xuXG5pbXBvcnQgeyBmYVhtYXJrIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XG5pbXBvcnQgeyBpc1RoaXNTZWNvbmQgfSBmcm9tICdkYXRlLWZucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RzLXBhbmUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wYW5lLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9wYW5lLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgU2RzUGFuZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICAgIEBJbnB1dCgpIHB1YmxpYyBwYWdlcz86IFBhbmVQYWdlW107XG4gICAgQElucHV0KCkgcHVibGljIHNlbGVjdGVkUGFnZT86IFBhbmVQYWdlO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBjb250ZW50V2lkdGhSZW06IG51bWJlciA9IDIwO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBwcm9kdWN0PzogJ2FsbC1ob3VycycgfCAnbXktaG91cnMnIHwgJ2Rvb3ItY2xvdWQnIHwgJ3RpbWUtYW5kLXNwYWNlJyB8IHN0cmluZztcbiAgICBcbiAgICBAT3V0cHV0KCkgcGFnZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xuXG4gICAgcHVibGljIHByb2R1Y3RDc3NDbGFzcz86IHN0cmluZztcblxuICAgIGNvbnN0cnVjdG9yKCkge31cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzWydwcm9kdWN0J10pIHtcbiAgICAgICAgICAgIHRoaXMucHJvZHVjdENzc0NsYXNzID0gdGhpcy5wcm9kdWN0ID8gYHByb2R1Y3QtJHt0aGlzLnByb2R1Y3R9YCA6IHVuZGVmaW5lZDsgIFxuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gICAgcHVibGljIHNob3dDb250ZW50KHBhZ2U6IFBhbmVQYWdlKTogdm9pZHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFBhZ2UgPSBwYWdlO1xuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XG4gICAgfVxuXG4gICAgcHVibGljIGhpZGVDb250ZW50KCk6IHZvaWR7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRQYWdlID0gdW5kZWZpbmVkO1xuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XG4gICAgfVxuXG5cbn1cbiIsIjxkaXYgXG4gICAgY2xhc3M9XCJwYW5lIGJvcmRlci1sZWZ0XCJcbiAgICBbY2xhc3NdPVwicHJvZHVjdENzc0NsYXNzXCJcbiAgICA+XG4gICAgPGRpdiBcbiAgICAgICAgKm5nSWY9XCJzZWxlY3RlZFBhZ2VcIiBcbiAgICAgICAgY2xhc3M9XCJwYW5lLWNvbnRlbnRcIlxuICAgICAgICBbc3R5bGUud2lkdGgucmVtXT1cImNvbnRlbnRXaWR0aFJlbVwiXG4gICAgICAgID5cbiAgICAgICAgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlLWhlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICAgICAge3tzZWxlY3RlZFBhZ2U/LnRpdGxlfX1cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1zdGVhbHRoIG1sLWF1dG9cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJoaWRlQ29udGVudCgpXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGZhLWljb24gXG4gICAgICAgICAgICAgICAgICAgIFtpY29uXT1cImNsb3NlSWNvblwiIFxuICAgICAgICAgICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICAgICAgW3NpemVdPVwiJ3NtJ1wiPiBcbiAgICAgICAgICAgICAgICA8L2ZhLWljb24+ICAgICAgICBcbiAgICAgICAgICAgIDwvYnV0dG9uPiAgXG5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2UtY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWRQYWdlICYmIHNlbGVjdGVkUGFnZS5jb250ZW50VGVtcGxhdGUgPyBzZWxlY3RlZFBhZ2UuY29udGVudFRlbXBsYXRlIDogbnVsbFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj4gICAgICAgICAgICBcbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IFxuICAgICAgICBjbGFzcz1cInBhbmUtaGVhZGVyXCJcbiAgICAgICAgW2NsYXNzLmJvcmRlci1sZWZ0XT1cInNlbGVjdGVkUGFnZVwiXG4gICAgICAgID5cbiAgICAgICAgPHVsPlxuICAgICAgICAgICAgPGxpIFxuICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBwYWdlIG9mIHBhZ2VzXCJcbiAgICAgICAgICAgICAgICBbY2xhc3MuYWN0aXZlXSA9IFwic2VsZWN0ZWRQYWdlID09PSBwYWdlXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGRpdiBcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJpY29uLWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCJwYWdlLnRpdGxlXCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKSA9IFwic2hvd0NvbnRlbnQocGFnZSlcIlxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxmYS1pY29uIFxuICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiKHNlbGVjdGVkUGFnZSA9PT0gcGFnZSA/IHBhZ2Uuc2VsZWN0ZWRJY29uID8gcGFnZS5zZWxlY3RlZEljb24gOiBwYWdlLmljb24gOiBwYWdlLmljb24pXCIgXG4gICAgICAgICAgICAgICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgICAgIDwvZmEtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgPC9kaXY+ICAgIFxuPC9kaXY+Il19
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3BhbmUvcGFuZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBQYW5lUGFnZSB7XHJcbiAgICBpZDogc3RyaW5nO1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGljb246IGFueTtcclxuICAgIHNlbGVjdGVkSWNvbj86IGFueTtcclxuICAgIGNvbnRlbnRUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IHVuZGVmaW5lZDtcclxufSJdfQ==
|
|
@@ -12,6 +12,11 @@ class SdsPaneComponent {
|
|
|
12
12
|
this.pageChange = new EventEmitter();
|
|
13
13
|
this.closeIcon = faXmark;
|
|
14
14
|
}
|
|
15
|
+
ngOnChanges(changes) {
|
|
16
|
+
if (changes['product']) {
|
|
17
|
+
this.productCssClass = this.product ? `product-${this.product}` : undefined;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
15
20
|
ngOnInit() { }
|
|
16
21
|
showContent(page) {
|
|
17
22
|
this.selectedPage = page;
|
|
@@ -23,16 +28,18 @@ class SdsPaneComponent {
|
|
|
23
28
|
}
|
|
24
29
|
}
|
|
25
30
|
SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\"
|
|
31
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
28
33
|
type: Component,
|
|
29
|
-
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pane border-left\"
|
|
34
|
+
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""] }]
|
|
30
35
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
31
36
|
type: Input
|
|
32
37
|
}], selectedPage: [{
|
|
33
38
|
type: Input
|
|
34
39
|
}], contentWidthRem: [{
|
|
35
40
|
type: Input
|
|
41
|
+
}], product: [{
|
|
42
|
+
type: Input
|
|
36
43
|
}], pageChange: [{
|
|
37
44
|
type: Output
|
|
38
45
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n selector: 'sds-pane',\n templateUrl: './pane.component.html',\n styleUrls: ['./pane.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() public pages?: PanePage[];\n @Input() public selectedPage?: PanePage;\n @Input() public contentWidthRem: number = 20;\n \n @Output() pageChange = new EventEmitter();\n\n public closeIcon = faXmark;\n\n constructor() {}\n\n ngOnInit(): void {}\n\n public showContent(page: PanePage): void{\n this.selectedPage = page;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div class=\"pane border-left\"
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { isThisSecond } from 'date-fns';\n\n@Component({\n selector: 'sds-pane',\n templateUrl: './pane.component.html',\n styleUrls: ['./pane.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SdsPaneComponent implements OnInit, OnChanges {\n\n @Input() public pages?: PanePage[];\n @Input() public selectedPage?: PanePage;\n @Input() public contentWidthRem: number = 20;\n @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\n \n @Output() pageChange = new EventEmitter();\n\n public closeIcon = faXmark;\n\n public productCssClass?: string;\n\n constructor() {}\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['product']) {\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \n }\n }\n\n ngOnInit(): void {}\n\n public showContent(page: PanePage): void{\n this.selectedPage = page;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n declarations: [\n SdsPaneComponent\n ],\n imports: [\n CommonModule, \n FontAwesomeModule\n ],\n exports: [\n SdsPaneComponent\n ],\n})\nexport class SdsPaneModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -12,6 +12,11 @@ class SdsPaneComponent {
|
|
|
12
12
|
this.pageChange = new EventEmitter();
|
|
13
13
|
this.closeIcon = faXmark;
|
|
14
14
|
}
|
|
15
|
+
ngOnChanges(changes) {
|
|
16
|
+
if (changes['product']) {
|
|
17
|
+
this.productCssClass = this.product ? `product-${this.product}` : undefined;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
15
20
|
ngOnInit() { }
|
|
16
21
|
showContent(page) {
|
|
17
22
|
this.selectedPage = page;
|
|
@@ -23,16 +28,18 @@ class SdsPaneComponent {
|
|
|
23
28
|
}
|
|
24
29
|
}
|
|
25
30
|
SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\"
|
|
31
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", selectedPage: "selectedPage", contentWidthRem: "contentWidthRem", product: "product" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
28
33
|
type: Component,
|
|
29
|
-
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pane border-left\"
|
|
34
|
+
args: [{ selector: 'sds-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>", styles: [""] }]
|
|
30
35
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
31
36
|
type: Input
|
|
32
37
|
}], selectedPage: [{
|
|
33
38
|
type: Input
|
|
34
39
|
}], contentWidthRem: [{
|
|
35
40
|
type: Input
|
|
41
|
+
}], product: [{
|
|
42
|
+
type: Input
|
|
36
43
|
}], pageChange: [{
|
|
37
44
|
type: Output
|
|
38
45
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n selector: 'sds-pane',\n templateUrl: './pane.component.html',\n styleUrls: ['./pane.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() public pages?: PanePage[];\n @Input() public selectedPage?: PanePage;\n @Input() public contentWidthRem: number = 20;\n \n @Output() pageChange = new EventEmitter();\n\n public closeIcon = faXmark;\n\n constructor() {}\n\n ngOnInit(): void {}\n\n public showContent(page: PanePage): void{\n this.selectedPage = page;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div class=\"pane border-left\"
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { isThisSecond } from 'date-fns';\n\n@Component({\n selector: 'sds-pane',\n templateUrl: './pane.component.html',\n styleUrls: ['./pane.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SdsPaneComponent implements OnInit, OnChanges {\n\n @Input() public pages?: PanePage[];\n @Input() public selectedPage?: PanePage;\n @Input() public contentWidthRem: number = 20;\n @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\n \n @Output() pageChange = new EventEmitter();\n\n public closeIcon = faXmark;\n\n public productCssClass?: string;\n\n constructor() {}\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['product']) {\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \n }\n }\n\n ngOnInit(): void {}\n\n public showContent(page: PanePage): void{\n this.selectedPage = page;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div \n class=\"pane border-left\"\n [class]=\"productCssClass\"\n >\n <div \n *ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage?.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-left]=\"selectedPage\"\n >\n <ul>\n <li \n *ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n declarations: [\n SdsPaneComponent\n ],\n imports: [\n CommonModule, \n FontAwesomeModule\n ],\n exports: [\n SdsPaneComponent\n ],\n})\nexport class SdsPaneModule {}\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,16 +1,19 @@
|
|
|
1
|
-
import { EventEmitter, OnInit } from '@angular/core';
|
|
1
|
+
import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
2
2
|
import { PanePage } from './pane.model';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class SdsPaneComponent implements OnInit {
|
|
4
|
+
export declare class SdsPaneComponent implements OnInit, OnChanges {
|
|
5
5
|
pages?: PanePage[];
|
|
6
6
|
selectedPage?: PanePage;
|
|
7
7
|
contentWidthRem: number;
|
|
8
|
+
product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;
|
|
8
9
|
pageChange: EventEmitter<any>;
|
|
9
10
|
closeIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
11
|
+
productCssClass?: string;
|
|
10
12
|
constructor();
|
|
13
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
11
14
|
ngOnInit(): void;
|
|
12
15
|
showContent(page: PanePage): void;
|
|
13
16
|
hideContent(): void;
|
|
14
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdsPaneComponent, never>;
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdsPaneComponent, "sds-pane", never, { "pages": "pages"; "selectedPage": "selectedPage"; "contentWidthRem": "contentWidthRem"; }, { "pageChange": "pageChange"; }, never, never>;
|
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsPaneComponent, "sds-pane", never, { "pages": "pages"; "selectedPage": "selectedPage"; "contentWidthRem": "contentWidthRem"; "product": "product"; }, { "pageChange": "pageChange"; }, never, never>;
|
|
16
19
|
}
|