@yomotech/view-toolkit 0.0.18 → 0.0.20
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.
|
@@ -75,14 +75,55 @@ class PaginationComponent {
|
|
|
75
75
|
this.isMobile = true;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
|
+
get paginationStyle() {
|
|
79
|
+
return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.style);
|
|
80
|
+
}
|
|
81
|
+
get listStyle() {
|
|
82
|
+
return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.listStyle);
|
|
83
|
+
}
|
|
84
|
+
get sizeControlStyle() {
|
|
85
|
+
return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.sizeControlStyle);
|
|
86
|
+
}
|
|
87
|
+
get labelStyle() {
|
|
88
|
+
return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.labelStyle);
|
|
89
|
+
}
|
|
90
|
+
get selectStyle() {
|
|
91
|
+
return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.selectStyle);
|
|
92
|
+
}
|
|
93
|
+
getStyle(styleObject) {
|
|
94
|
+
if (!styleObject || typeof styleObject !== 'object') {
|
|
95
|
+
return {};
|
|
96
|
+
}
|
|
97
|
+
const { classes, ...styleWithoutClasses } = styleObject;
|
|
98
|
+
return styleWithoutClasses;
|
|
99
|
+
}
|
|
100
|
+
getPageItemStyle(page, disabled = false) {
|
|
101
|
+
const pagination = this.itemInfo?.layoutSchema?.pagination || {};
|
|
102
|
+
const baseStyle = this.getStyle(pagination.itemStyle);
|
|
103
|
+
const activeStyle = page !== undefined && this.currentPage === page
|
|
104
|
+
? this.getStyle(pagination.activeItemStyle)
|
|
105
|
+
: {};
|
|
106
|
+
const disabledStyle = disabled
|
|
107
|
+
? this.getStyle(pagination.disabledItemStyle)
|
|
108
|
+
: {};
|
|
109
|
+
return {
|
|
110
|
+
...baseStyle,
|
|
111
|
+
...activeStyle,
|
|
112
|
+
...disabledStyle,
|
|
113
|
+
'pointer-events': disabled ? 'none' : 'auto'
|
|
114
|
+
};
|
|
115
|
+
}
|
|
78
116
|
invokeOnPageSizeChange(pageSize) {
|
|
79
|
-
this.pageSizeChange.emit(pageSize);
|
|
117
|
+
this.pageSizeChange.emit(Number(pageSize));
|
|
80
118
|
}
|
|
81
119
|
invokeGoToPage(page) {
|
|
120
|
+
if (page < 0 || page > this.pages.length - 1 || page === this.currentPage) {
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
82
123
|
this.onGoToPage.emit(page);
|
|
83
124
|
}
|
|
84
125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PaginationComponent, isStandalone: true, selector: "vl-pagination", inputs: { itemInfo: "itemInfo", pageSize: "pageSize", currentPage: "currentPage", pages: "pages" }, outputs: { pageSizeChange: "pageSizeChange", onGoToPage: "onGoToPage" }, ngImport: i0, template: "<div [
|
|
126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PaginationComponent, isStandalone: true, selector: "vl-pagination", inputs: { itemInfo: "itemInfo", pageSize: "pageSize", currentPage: "currentPage", pages: "pages" }, outputs: { pageSizeChange: "pageSizeChange", onGoToPage: "onGoToPage" }, ngImport: i0, template: "<div [ngStyle]=\"paginationStyle\">\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"isMobile ? 99999 : 'auto'\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\r\n </li>\r\n\r\n <li *ngFor=\"let page of pages\" (click)=\"invokeGoToPage(page)\" [ngStyle]=\"getPageItemStyle(page)\">\r\n {{ page + 1 }}\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\"\r\n [ngStyle]=\"getPageItemStyle(undefined, currentPage === pages.length - 1)\">\r\n \u00BB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\"\r\n [ngStyle]=\"getPageItemStyle(undefined, currentPage === pages.length - 1)\">\r\n \u00BB\u00BB\r\n </li>\r\n </ul>\r\n\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize\" [ngStyle]=\"sizeControlStyle\">\r\n\r\n <label for=\"pageSize\" [ngStyle]=\"labelStyle\">\r\n {{ itemInfo?.layoutSchema?.pagination?.caption }}\r\n </label>\r\n\r\n <select id=\"pageSize\" [(ngModel)]=\"pageSize\" (change)=\"invokeOnPageSizeChange(pageSize)\"\r\n [ngStyle]=\"selectStyle\">\r\n\r\n <option *ngFor=\"let size of [5, 10, 15, 20]\" [value]=\"size\">\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PlatformModule }] });
|
|
86
127
|
}
|
|
87
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
88
129
|
type: Component,
|
|
@@ -90,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
90
131
|
CommonModule,
|
|
91
132
|
FormsModule,
|
|
92
133
|
PlatformModule
|
|
93
|
-
], template: "<div [
|
|
134
|
+
], template: "<div [ngStyle]=\"paginationStyle\">\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"isMobile ? 99999 : 'auto'\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\r\n </li>\r\n\r\n <li *ngFor=\"let page of pages\" (click)=\"invokeGoToPage(page)\" [ngStyle]=\"getPageItemStyle(page)\">\r\n {{ page + 1 }}\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\"\r\n [ngStyle]=\"getPageItemStyle(undefined, currentPage === pages.length - 1)\">\r\n \u00BB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\"\r\n [ngStyle]=\"getPageItemStyle(undefined, currentPage === pages.length - 1)\">\r\n \u00BB\u00BB\r\n </li>\r\n </ul>\r\n\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize\" [ngStyle]=\"sizeControlStyle\">\r\n\r\n <label for=\"pageSize\" [ngStyle]=\"labelStyle\">\r\n {{ itemInfo?.layoutSchema?.pagination?.caption }}\r\n </label>\r\n\r\n <select id=\"pageSize\" [(ngModel)]=\"pageSize\" (change)=\"invokeOnPageSizeChange(pageSize)\"\r\n [ngStyle]=\"selectStyle\">\r\n\r\n <option *ngFor=\"let size of [5, 10, 15, 20]\" [value]=\"size\">\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n</div>" }]
|
|
94
135
|
}], ctorParameters: () => [{ type: i1.Platform }], propDecorators: { itemInfo: [{
|
|
95
136
|
type: Input
|
|
96
137
|
}], pageSize: [{
|
|
@@ -1693,6 +1734,7 @@ class HeaderMenuComponent {
|
|
|
1693
1734
|
platform;
|
|
1694
1735
|
isLogined = false;
|
|
1695
1736
|
headerItems = [];
|
|
1737
|
+
headerLayout = {};
|
|
1696
1738
|
environment;
|
|
1697
1739
|
projectSeleted;
|
|
1698
1740
|
cartInfo = {
|
|
@@ -1715,7 +1757,7 @@ class HeaderMenuComponent {
|
|
|
1715
1757
|
if (this.platform.ANDROID || this.platform.IOS) {
|
|
1716
1758
|
this.utilityService.getLocalStorage(`loginedUser`).then((logined) => {
|
|
1717
1759
|
if (logined && logined.token) {
|
|
1718
|
-
this.requestService.getLoginUser(logined?.token).subscribe((
|
|
1760
|
+
this.requestService.getLoginUser(logined?.token).subscribe(() => {
|
|
1719
1761
|
this.isLogined = true;
|
|
1720
1762
|
});
|
|
1721
1763
|
}
|
|
@@ -1729,6 +1771,28 @@ class HeaderMenuComponent {
|
|
|
1729
1771
|
}
|
|
1730
1772
|
}, 500);
|
|
1731
1773
|
}
|
|
1774
|
+
getStyle(styleObject) {
|
|
1775
|
+
if (!styleObject || typeof styleObject !== 'object') {
|
|
1776
|
+
return {};
|
|
1777
|
+
}
|
|
1778
|
+
const { classes, ...styleWithoutClasses } = styleObject;
|
|
1779
|
+
return styleWithoutClasses;
|
|
1780
|
+
}
|
|
1781
|
+
isVisible(header) {
|
|
1782
|
+
return header?.option?.visible !== false;
|
|
1783
|
+
}
|
|
1784
|
+
shouldShowDefaultButton(header) {
|
|
1785
|
+
if (!this.isVisible(header)) {
|
|
1786
|
+
return false;
|
|
1787
|
+
}
|
|
1788
|
+
if (header?.option?.islogin === true) {
|
|
1789
|
+
return this.isLogined;
|
|
1790
|
+
}
|
|
1791
|
+
if (header?.option?.islogin === false) {
|
|
1792
|
+
return !this.isLogined;
|
|
1793
|
+
}
|
|
1794
|
+
return true;
|
|
1795
|
+
}
|
|
1732
1796
|
invokeSearchedItems(option, search) {
|
|
1733
1797
|
this.searchItems.emit({ option: option, search: search });
|
|
1734
1798
|
}
|
|
@@ -1739,16 +1803,18 @@ class HeaderMenuComponent {
|
|
|
1739
1803
|
this.showTableContent.emit(option);
|
|
1740
1804
|
}
|
|
1741
1805
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i4$1.OktaAuthStateService }, { token: RequestService }, { token: UtilityService }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component });
|
|
1742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HeaderMenuComponent, isStandalone: true, selector: "vl-header-menu", inputs: { headerItems: "headerItems", environment: "environment", projectSeleted: "projectSeleted", cartInfo: "cartInfo" }, outputs: { buttonClick: "buttonClick", showTableContent: "showTableContent", searchItems: "searchItems" }, ngImport: i0, template: "<header
|
|
1806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HeaderMenuComponent, isStandalone: true, selector: "vl-header-menu", inputs: { headerItems: "headerItems", headerLayout: "headerLayout", environment: "environment", projectSeleted: "projectSeleted", cartInfo: "cartInfo" }, outputs: { buttonClick: "buttonClick", showTableContent: "showTableContent", searchItems: "searchItems" }, ngImport: i0, template: "<header *ngIf=\"headerItems.length > 0\" [ngStyle]=\"getStyle(headerLayout?.style)\">\r\n\r\n <ng-container *ngFor=\"let header of headerItems\"\r\n [ngSwitch]=\"header.scope?.reference ? header.scope?.reference.split('/').pop() : 'default'\">\r\n\r\n <!-- Logo -->\r\n <ng-container *ngSwitchCase=\"'logo'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <img [src]=\"header.option.src\" [alt]=\"header.alt || 'Logo'\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Search -->\r\n <ng-container *ngSwitchCase=\"'searchInput'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <input #search type=\"text\" [placeholder]=\"header.option.placeholder\"\r\n (keyup.enter)=\"invokeSearchedItems(header.option, search)\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n\r\n <button *ngIf=\"header.option.button !== false\" type=\"button\"\r\n (click)=\"invokeSearchedItems(header.option, search)\" [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.caption; else searchTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #searchTextContent>\r\n {{ header.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Cart -->\r\n <ng-container *ngSwitchCase=\"'cart'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\"\r\n (click)=\"invokeShowtableContent(header.option)\">\r\n\r\n <span [ngStyle]=\"getStyle(header?.priceStyle)\">\r\n {{ cartInfo.totalPrice | currency : header.option?.currency ? header.option.currency : 'USD' }}\r\n </span>\r\n\r\n <span [ngStyle]=\"getStyle(header?.quantityStyle)\">\r\n {{ cartInfo.quantity }}\r\n </span>\r\n\r\n <i [class]=\"header.icon\" [ngStyle]=\"getStyle(header?.iconStyle)\">\r\n </i>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Default Button -->\r\n <ng-container *ngSwitchCase=\"'default'\">\r\n <div *ngIf=\"shouldShowDefaultButton(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <button type=\"button\" (click)=\"invokeHeaderButtonClick(header.option)\"\r\n [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.label; else buttonTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #buttonTextContent>\r\n {{ header.label }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n</header>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }] });
|
|
1743
1807
|
}
|
|
1744
1808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
1745
1809
|
type: Component,
|
|
1746
1810
|
args: [{ standalone: true, imports: [
|
|
1747
1811
|
CommonModule,
|
|
1748
1812
|
NzIconModule
|
|
1749
|
-
], selector: 'vl-header-menu', template: "<header
|
|
1813
|
+
], selector: 'vl-header-menu', template: "<header *ngIf=\"headerItems.length > 0\" [ngStyle]=\"getStyle(headerLayout?.style)\">\r\n\r\n <ng-container *ngFor=\"let header of headerItems\"\r\n [ngSwitch]=\"header.scope?.reference ? header.scope?.reference.split('/').pop() : 'default'\">\r\n\r\n <!-- Logo -->\r\n <ng-container *ngSwitchCase=\"'logo'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <img [src]=\"header.option.src\" [alt]=\"header.alt || 'Logo'\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Search -->\r\n <ng-container *ngSwitchCase=\"'searchInput'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <input #search type=\"text\" [placeholder]=\"header.option.placeholder\"\r\n (keyup.enter)=\"invokeSearchedItems(header.option, search)\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n\r\n <button *ngIf=\"header.option.button !== false\" type=\"button\"\r\n (click)=\"invokeSearchedItems(header.option, search)\" [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.caption; else searchTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #searchTextContent>\r\n {{ header.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Cart -->\r\n <ng-container *ngSwitchCase=\"'cart'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\"\r\n (click)=\"invokeShowtableContent(header.option)\">\r\n\r\n <span [ngStyle]=\"getStyle(header?.priceStyle)\">\r\n {{ cartInfo.totalPrice | currency : header.option?.currency ? header.option.currency : 'USD' }}\r\n </span>\r\n\r\n <span [ngStyle]=\"getStyle(header?.quantityStyle)\">\r\n {{ cartInfo.quantity }}\r\n </span>\r\n\r\n <i [class]=\"header.icon\" [ngStyle]=\"getStyle(header?.iconStyle)\">\r\n </i>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Default Button -->\r\n <ng-container *ngSwitchCase=\"'default'\">\r\n <div *ngIf=\"shouldShowDefaultButton(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <button type=\"button\" (click)=\"invokeHeaderButtonClick(header.option)\"\r\n [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.label; else buttonTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #buttonTextContent>\r\n {{ header.label }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n</header>" }]
|
|
1750
1814
|
}], ctorParameters: () => [{ type: i4$1.OktaAuthStateService }, { type: RequestService }, { type: UtilityService }, { type: i1.Platform }], propDecorators: { headerItems: [{
|
|
1751
1815
|
type: Input
|
|
1816
|
+
}], headerLayout: [{
|
|
1817
|
+
type: Input
|
|
1752
1818
|
}], environment: [{
|
|
1753
1819
|
type: Input
|
|
1754
1820
|
}], projectSeleted: [{
|