@spicainternational/ngx-sds-components 2.4.0 → 2.4.3
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 +9 -4
- package/esm2020/src/lib/pane/pane.model.mjs +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs +8 -3
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs +8 -3
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/package.json +2 -2
- package/src/lib/pane/pane.component.d.ts +3 -2
- package/src/lib/pane/pane.model.d.ts +1 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
2
|
import { faXmark } from '@fortawesome/pro-regular-svg-icons';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
@@ -6,6 +6,7 @@ import * as i2 from "@angular/common";
|
|
|
6
6
|
export class SdsPaneComponent {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.contentWidthRem = 20;
|
|
9
|
+
this.pageChange = new EventEmitter();
|
|
9
10
|
this.isContentVisible = false;
|
|
10
11
|
this.closeIcon = faXmark;
|
|
11
12
|
}
|
|
@@ -13,20 +14,24 @@ export class SdsPaneComponent {
|
|
|
13
14
|
showContent(page) {
|
|
14
15
|
this.selectedPage = page;
|
|
15
16
|
this.isContentVisible = true;
|
|
17
|
+
this.pageChange.emit(this.selectedPage);
|
|
16
18
|
}
|
|
17
19
|
hideContent() {
|
|
18
20
|
this.isContentVisible = false;
|
|
19
21
|
this.selectedPage = undefined;
|
|
22
|
+
this.pageChange.emit(this.selectedPage);
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
25
|
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", contentWidthRem: "contentWidthRem" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
26
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
24
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
25
28
|
type: Component,
|
|
26
|
-
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
29
|
+
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</div>", styles: [""] }]
|
|
27
30
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
28
31
|
type: Input
|
|
29
32
|
}], contentWidthRem: [{
|
|
30
33
|
type: Input
|
|
34
|
+
}], pageChange: [{
|
|
35
|
+
type: Output
|
|
31
36
|
}] } });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lL3BhbmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZS9wYW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0UsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7O0FBTzdELE1BQU0sT0FBTyxnQkFBZ0I7SUFZekI7UUFUUyxvQkFBZSxHQUFXLEVBQUUsQ0FBQztRQUU1QixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUduQyxxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFFbEMsY0FBUyxHQUFHLE9BQU8sQ0FBQztJQUVaLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixXQUFXLENBQUMsSUFBYztRQUM3QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRU0sV0FBVztRQUNkLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDOUIsSUFBSSxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7OzZHQTFCUSxnQkFBZ0I7aUdBQWhCLGdCQUFnQix1SkNWN0IsNDJDQTZDTTsyRkRuQ08sZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNJLFVBQVU7MEVBTVgsS0FBSztzQkFBYixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBhbmVQYWdlIH0gZnJvbSAnLi9wYW5lLm1vZGVsJztcblxuaW1wb3J0IHsgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Nkcy1wYW5lJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFuZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcGFuZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTZHNQYW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIEBJbnB1dCgpIHBhZ2VzPzogUGFuZVBhZ2VbXTtcbiAgICBASW5wdXQoKSBjb250ZW50V2lkdGhSZW06IG51bWJlciA9IDIwO1xuXG4gICAgQE91dHB1dCgpIHBhZ2VDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBwdWJsaWMgc2VsZWN0ZWRQYWdlPzogUGFuZVBhZ2U7XG4gICAgcHVibGljIGlzQ29udGVudFZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gICAgcHVibGljIHNob3dDb250ZW50KHBhZ2U6IFBhbmVQYWdlKTogdm9pZHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFBhZ2UgPSBwYWdlO1xuICAgICAgICB0aGlzLmlzQ29udGVudFZpc2libGUgPSB0cnVlO1xuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XG4gICAgfVxuXG4gICAgcHVibGljIGhpZGVDb250ZW50KCk6IHZvaWR7XG4gICAgICAgIHRoaXMuaXNDb250ZW50VmlzaWJsZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNlbGVjdGVkUGFnZSA9IHVuZGVmaW5lZDtcbiAgICAgICAgdGhpcy5wYWdlQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFBhZ2UpO1xuICAgIH1cblxuXG59XG4iLCI8ZGl2IGNsYXNzPVwicGFuZSBib3JkZXItbGVmdFwiPlxuICAgIDxkaXYgY2xhc3M9XCJwYW5lLWhlYWRlclwiPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGkgXG4gICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IHBhZ2Ugb2YgcGFnZXNcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5hY3RpdmVdID0gXCJzZWxlY3RlZFBhZ2UgPT09IHBhZ2VcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZGl2IFxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImljb24tY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cInBhZ2UudGl0bGVcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spID0gXCJzaG93Q29udGVudChwYWdlKVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwicGFnZS5pY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICA8L3VsPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBcbiAgICAgICAgKm5nSWY9XCJzZWxlY3RlZFBhZ2VcIiBcbiAgICAgICAgY2xhc3M9XCJwYW5lLWNvbnRlbnRcIlxuICAgICAgICBbc3R5bGUud2lkdGgucmVtXT1cImNvbnRlbnRXaWR0aFJlbVwiXG4gICAgICAgID5cbiAgICAgICAgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlLWhlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICAgICAge3tzZWxlY3RlZFBhZ2U/LnRpdGxlfX1cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIG1sLWF1dG9cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJoaWRlQ29udGVudCgpXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2xvc2VJY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+ICAgICAgICBcbiAgICAgICAgICAgIDwvYnV0dG9uPiAgXG5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2UtY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWRQYWdlICYmIHNlbGVjdGVkUGFnZS5jb250ZW50VGVtcGxhdGUgPyBzZWxlY3RlZFBhZ2UuY29udGVudFRlbXBsYXRlIDogbnVsbFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj4gICAgICAgICAgICBcbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3BhbmUvcGFuZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBQYW5lUGFnZSB7XHJcbiAgICBpZDogc3RyaW5nO1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGljb246IGFueTtcclxuICAgIGNvbnRlbnRUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IHVuZGVmaW5lZDtcclxufSJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { faXmark } from '@fortawesome/pro-regular-svg-icons';
|
|
@@ -9,6 +9,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
|
9
9
|
class SdsPaneComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.contentWidthRem = 20;
|
|
12
|
+
this.pageChange = new EventEmitter();
|
|
12
13
|
this.isContentVisible = false;
|
|
13
14
|
this.closeIcon = faXmark;
|
|
14
15
|
}
|
|
@@ -16,21 +17,25 @@ class SdsPaneComponent {
|
|
|
16
17
|
showContent(page) {
|
|
17
18
|
this.selectedPage = page;
|
|
18
19
|
this.isContentVisible = true;
|
|
20
|
+
this.pageChange.emit(this.selectedPage);
|
|
19
21
|
}
|
|
20
22
|
hideContent() {
|
|
21
23
|
this.isContentVisible = false;
|
|
22
24
|
this.selectedPage = undefined;
|
|
25
|
+
this.pageChange.emit(this.selectedPage);
|
|
23
26
|
}
|
|
24
27
|
}
|
|
25
28
|
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", contentWidthRem: "contentWidthRem" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
29
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
27
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
28
31
|
type: Component,
|
|
29
|
-
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
32
|
+
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</div>", styles: [""] }]
|
|
30
33
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
31
34
|
type: Input
|
|
32
35
|
}], contentWidthRem: [{
|
|
33
36
|
type: Input
|
|
37
|
+
}], pageChange: [{
|
|
38
|
+
type: Output
|
|
34
39
|
}] } });
|
|
35
40
|
|
|
36
41
|
class SdsPaneModule {
|
|
@@ -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 { Component, Input, OnInit } 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})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() pages?: PanePage[];\n @Input() contentWidthRem: number = 20;\n\n public selectedPage?: PanePage;\n public isContentVisible: boolean = false;\n\n public closeIcon = faXmark;\n\n constructor() {}\n\n ngOnInit(): void {}\n\n
|
|
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 { Component, EventEmitter, Input, OnInit, Output } 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})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() pages?: PanePage[];\n @Input() contentWidthRem: number = 20;\n\n @Output() pageChange = new EventEmitter();\n\n public selectedPage?: PanePage;\n public isContentVisible: boolean = false;\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.isContentVisible = true;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.isContentVisible = false;\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</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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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { faXmark } from '@fortawesome/pro-regular-svg-icons';
|
|
@@ -9,6 +9,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
|
9
9
|
class SdsPaneComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.contentWidthRem = 20;
|
|
12
|
+
this.pageChange = new EventEmitter();
|
|
12
13
|
this.isContentVisible = false;
|
|
13
14
|
this.closeIcon = faXmark;
|
|
14
15
|
}
|
|
@@ -16,21 +17,25 @@ class SdsPaneComponent {
|
|
|
16
17
|
showContent(page) {
|
|
17
18
|
this.selectedPage = page;
|
|
18
19
|
this.isContentVisible = true;
|
|
20
|
+
this.pageChange.emit(this.selectedPage);
|
|
19
21
|
}
|
|
20
22
|
hideContent() {
|
|
21
23
|
this.isContentVisible = false;
|
|
22
24
|
this.selectedPage = undefined;
|
|
25
|
+
this.pageChange.emit(this.selectedPage);
|
|
23
26
|
}
|
|
24
27
|
}
|
|
25
28
|
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", contentWidthRem: "contentWidthRem" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
29
|
+
SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
27
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
|
|
28
31
|
type: Component,
|
|
29
|
-
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-
|
|
32
|
+
args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</div>", styles: [""] }]
|
|
30
33
|
}], ctorParameters: function () { return []; }, propDecorators: { pages: [{
|
|
31
34
|
type: Input
|
|
32
35
|
}], contentWidthRem: [{
|
|
33
36
|
type: Input
|
|
37
|
+
}], pageChange: [{
|
|
38
|
+
type: Output
|
|
34
39
|
}] } });
|
|
35
40
|
|
|
36
41
|
class SdsPaneModule {
|
|
@@ -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 { Component, Input, OnInit } 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})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() pages?: PanePage[];\n @Input() contentWidthRem: number = 20;\n\n public selectedPage?: PanePage;\n public isContentVisible: boolean = false;\n\n public closeIcon = faXmark;\n\n constructor() {}\n\n ngOnInit(): void {}\n\n
|
|
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 { Component, EventEmitter, Input, OnInit, Output } 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})\nexport class SdsPaneComponent implements OnInit {\n\n @Input() pages?: PanePage[];\n @Input() contentWidthRem: number = 20;\n\n @Output() pageChange = new EventEmitter();\n\n public selectedPage?: PanePage;\n public isContentVisible: boolean = false;\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.isContentVisible = true;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.isContentVisible = false;\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n\n}\n","<div class=\"pane border-left\">\n <div class=\"pane-header\">\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 [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n </div>\n </li>\n </ul>\n </div>\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 ml-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </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</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,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spicainternational/ngx-sds-components",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.3",
|
|
4
4
|
"description": "Spica design system angular components.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": ">=10.0.0",
|
|
7
7
|
"@angular/core": ">=10.0.0",
|
|
8
|
-
"@spicainternational/sds-core": "^3.4.
|
|
8
|
+
"@spicainternational/sds-core": "^3.4.5",
|
|
9
9
|
"@fortawesome/angular-fontawesome": "^0.10.2",
|
|
10
10
|
"@fortawesome/fontawesome-svg-core": "^6.1.0",
|
|
11
11
|
"@fortawesome/pro-light-svg-icons": "^6.1.0",
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
1
|
+
import { EventEmitter, OnInit } from '@angular/core';
|
|
2
2
|
import { PanePage } from './pane.model';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class SdsPaneComponent implements OnInit {
|
|
5
5
|
pages?: PanePage[];
|
|
6
6
|
contentWidthRem: number;
|
|
7
|
+
pageChange: EventEmitter<any>;
|
|
7
8
|
selectedPage?: PanePage;
|
|
8
9
|
isContentVisible: boolean;
|
|
9
10
|
closeIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
@@ -12,5 +13,5 @@ export declare class SdsPaneComponent implements OnInit {
|
|
|
12
13
|
showContent(page: PanePage): void;
|
|
13
14
|
hideContent(): void;
|
|
14
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdsPaneComponent, never>;
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdsPaneComponent, "sds-pane", never, { "pages": "pages"; "contentWidthRem": "contentWidthRem"; }, {}, never, never>;
|
|
16
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdsPaneComponent, "sds-pane", never, { "pages": "pages"; "contentWidthRem": "contentWidthRem"; }, { "pageChange": "pageChange"; }, never, never>;
|
|
16
17
|
}
|