ngx-pk-ui 1.0.5 → 1.1.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/fesm2022/ngx-pk-ui.mjs +5 -15
- package/fesm2022/ngx-pk-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/pk-ui.css +36 -0
- package/types/ngx-pk-ui.d.ts +1 -1
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -669,12 +669,7 @@ class PkDgRowsDirective {
|
|
|
669
669
|
this.datagrid.pagination.updatePagination();
|
|
670
670
|
}
|
|
671
671
|
this.datagrid.updateDisplayedItems();
|
|
672
|
-
this._lastVersion = this.datagrid.displayedItemsVersion;
|
|
673
|
-
// Render immediately on first bind; do not wait for a user event.
|
|
674
|
-
this.renderItems();
|
|
675
|
-
return;
|
|
676
672
|
}
|
|
677
|
-
this.renderItems();
|
|
678
673
|
}
|
|
679
674
|
renderItems() {
|
|
680
675
|
this.viewContainer.clear();
|
|
@@ -874,9 +869,6 @@ class PkDatagridComponent {
|
|
|
874
869
|
}
|
|
875
870
|
this._initColumnWidths();
|
|
876
871
|
this.updateDisplayedItems();
|
|
877
|
-
// In zoneless mode, async callbacks do not automatically trigger a render pass.
|
|
878
|
-
// Run one explicit change detection so initial pagination is reflected immediately.
|
|
879
|
-
this.cdr.detectChanges();
|
|
880
872
|
}, 0);
|
|
881
873
|
}
|
|
882
874
|
updateDisplayedItems() {
|
|
@@ -1036,17 +1028,17 @@ class PkDatagridComponent {
|
|
|
1036
1028
|
this._onResizeEnd();
|
|
1037
1029
|
}
|
|
1038
1030
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatagridComponent, isStandalone: false, selector: "pk-datagrid", inputs: { pkDgLoading: "pkDgLoading", items: "items", filterValues: "filterValues" }, outputs: { pkDgRefresh: "pkDgRefresh", filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, queries: [{ propertyName: "pagination", first: true, predicate: PkDgPaginationComponent, descendants: true }, { propertyName: "columns", predicate: PkDgHeaderComponent }, { propertyName: "rowDetails", predicate: PkDgRowExpandComponent, descendants: true }, { propertyName: "expandDirectives", predicate: PkDgRowIsExpandDirective, descendants: true }, { propertyName: "actionComponents", predicate: PkDgActionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-datagrid-container\">\n @if (pkDgLoading) {\n <div class=\"pk-datagrid-spinner\">\n <div class=\"spinner\"></div>\n <span>Loading...</span>\n </div>\n }\n \n <div class=\"pk-datagrid-scroll-area\">\n <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n <thead>\n <tr>\n @if (hasActionCol) {\n <th class=\"pk-dg-action-th\"></th>\n }\n @if (hasExpandCol) {\n <th class=\"pk-dg-expand-th\"></th>\n } @else {\n <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n }\n @for (column of columns; track
|
|
1031
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatagridComponent, isStandalone: false, selector: "pk-datagrid", inputs: { pkDgLoading: "pkDgLoading", items: "items", filterValues: "filterValues" }, outputs: { pkDgRefresh: "pkDgRefresh", filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, queries: [{ propertyName: "pagination", first: true, predicate: PkDgPaginationComponent, descendants: true }, { propertyName: "columns", predicate: PkDgHeaderComponent }, { propertyName: "rowDetails", predicate: PkDgRowExpandComponent, descendants: true }, { propertyName: "expandDirectives", predicate: PkDgRowIsExpandDirective, descendants: true }, { propertyName: "actionComponents", predicate: PkDgActionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-datagrid-container\">\n @if (pkDgLoading) {\n <div class=\"pk-datagrid-spinner\">\n <div class=\"spinner\"></div>\n <span>Loading...</span>\n </div>\n }\n \n <div class=\"pk-datagrid-scroll-area\">\n <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n <thead>\n <tr>\n @if (hasActionCol) {\n <th class=\"pk-dg-action-th\"></th>\n }\n @if (hasExpandCol) {\n <th class=\"pk-dg-expand-th\"></th>\n } @else {\n <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n }\n @for (column of columns; track column.pkDgSort; let i = $index) {\n <th [style.width.px]=\"columnWidths[i]\">\n <div class=\"th-content\">\n <span>{{ column.headerText }}</span>\n <div class=\"th-actions\">\n @if (column.pkDgSort) {\n <button class=\"sort-icon-btn\"\n [class.active]=\"sortColumn === column.pkDgSort\"\n (click)=\"onSort(column.pkDgSort)\"\n title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n <pk-icon\n [name]=\"sortColumn === column.pkDgSort ? (sortDirection === 'asc' ? 'chevron-up' : 'chevron-down') : 'sort'\"\n [size]=\"12\" color=\"currentColor\">\n </pk-icon>\n </button>\n }\n @if (column.pkDgFilter) {\n <button class=\"filter-icon-btn\"\n [class.active]=\"filterValues[column.pkDgFilter]\"\n (click)=\"openFilter(column.pkDgFilter, $event, column.headerText)\"\n title=\"\u0E01\u0E23\u0E2D\u0E07\">\n <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n </button>\n }\n </div>\n </div>\n @if (column.pkDgFilter && activeFilterCol === column.pkDgFilter) {\n <div class=\"filter-popup\"\n [style.top.px]=\"filterPopupPos.top\"\n [style.left.px]=\"filterPopupPos.left\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\"\n [value]=\"filterValues[column.pkDgFilter] || ''\"\n (input)=\"onFilterInput(column.pkDgFilter, $event)\"\n [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n autofocus>\n </div>\n }\n <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <ng-content select=\"pk-dg-rows\"></ng-content>\n </tbody>\n </table>\n </div>\n\n <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%}.pk-datagrid-scroll-area{overflow-x:auto;overflow-y:auto;width:100%;scrollbar-gutter:stable}.pk-datagrid-scroll-area::-webkit-scrollbar{height:8px}.pk-datagrid-scroll-area::-webkit-scrollbar-track{background:#f1f1f1}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb:hover{background:#999}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-expand,.pk-datagrid tbody tr.pk-dg-row-expand:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-expand td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-datagrid .pk-dg-action-th{width:32px;min-width:32px;padding:0}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
|
|
1040
1032
|
}
|
|
1041
1033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
|
|
1042
1034
|
type: Component,
|
|
1043
|
-
args: [{ selector: 'pk-datagrid', standalone: false, template: "<div class=\"pk-datagrid-container\">\n @if (pkDgLoading) {\n <div class=\"pk-datagrid-spinner\">\n <div class=\"spinner\"></div>\n <span>Loading...</span>\n </div>\n }\n \n <div class=\"pk-datagrid-scroll-area\">\n <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n <thead>\n <tr>\n @if (hasActionCol) {\n <th class=\"pk-dg-action-th\"></th>\n }\n @if (hasExpandCol) {\n <th class=\"pk-dg-expand-th\"></th>\n } @else {\n <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n }\n @for (column of columns; track
|
|
1035
|
+
args: [{ selector: 'pk-datagrid', standalone: false, template: "<div class=\"pk-datagrid-container\">\n @if (pkDgLoading) {\n <div class=\"pk-datagrid-spinner\">\n <div class=\"spinner\"></div>\n <span>Loading...</span>\n </div>\n }\n \n <div class=\"pk-datagrid-scroll-area\">\n <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n <thead>\n <tr>\n @if (hasActionCol) {\n <th class=\"pk-dg-action-th\"></th>\n }\n @if (hasExpandCol) {\n <th class=\"pk-dg-expand-th\"></th>\n } @else {\n <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n }\n @for (column of columns; track column.pkDgSort; let i = $index) {\n <th [style.width.px]=\"columnWidths[i]\">\n <div class=\"th-content\">\n <span>{{ column.headerText }}</span>\n <div class=\"th-actions\">\n @if (column.pkDgSort) {\n <button class=\"sort-icon-btn\"\n [class.active]=\"sortColumn === column.pkDgSort\"\n (click)=\"onSort(column.pkDgSort)\"\n title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n <pk-icon\n [name]=\"sortColumn === column.pkDgSort ? (sortDirection === 'asc' ? 'chevron-up' : 'chevron-down') : 'sort'\"\n [size]=\"12\" color=\"currentColor\">\n </pk-icon>\n </button>\n }\n @if (column.pkDgFilter) {\n <button class=\"filter-icon-btn\"\n [class.active]=\"filterValues[column.pkDgFilter]\"\n (click)=\"openFilter(column.pkDgFilter, $event, column.headerText)\"\n title=\"\u0E01\u0E23\u0E2D\u0E07\">\n <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n </button>\n }\n </div>\n </div>\n @if (column.pkDgFilter && activeFilterCol === column.pkDgFilter) {\n <div class=\"filter-popup\"\n [style.top.px]=\"filterPopupPos.top\"\n [style.left.px]=\"filterPopupPos.left\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\"\n [value]=\"filterValues[column.pkDgFilter] || ''\"\n (input)=\"onFilterInput(column.pkDgFilter, $event)\"\n [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n autofocus>\n </div>\n }\n <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <ng-content select=\"pk-dg-rows\"></ng-content>\n </tbody>\n </table>\n </div>\n\n <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%}.pk-datagrid-scroll-area{overflow-x:auto;overflow-y:auto;width:100%;scrollbar-gutter:stable}.pk-datagrid-scroll-area::-webkit-scrollbar{height:8px}.pk-datagrid-scroll-area::-webkit-scrollbar-track{background:#f1f1f1}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb:hover{background:#999}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-expand,.pk-datagrid tbody tr.pk-dg-row-expand:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-expand td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-datagrid .pk-dg-action-th{width:32px;min-width:32px;padding:0}\n"] }]
|
|
1044
1036
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
1045
1037
|
type: ContentChildren,
|
|
1046
1038
|
args: [PkDgHeaderComponent]
|
|
1047
1039
|
}], pagination: [{
|
|
1048
1040
|
type: ContentChild,
|
|
1049
|
-
args: [PkDgPaginationComponent
|
|
1041
|
+
args: [PkDgPaginationComponent]
|
|
1050
1042
|
}], rowDetails: [{
|
|
1051
1043
|
type: ContentChildren,
|
|
1052
1044
|
args: [PkDgRowExpandComponent, { descendants: true }]
|
|
@@ -1127,8 +1119,7 @@ class PkDatagridModule {
|
|
|
1127
1119
|
PkDgActionComponent,
|
|
1128
1120
|
PkDgRowsDirective,
|
|
1129
1121
|
PkDgRowIsExpandDirective,
|
|
1130
|
-
NowrapDirective
|
|
1131
|
-
PkIcon] });
|
|
1122
|
+
NowrapDirective] });
|
|
1132
1123
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, imports: [CommonModule,
|
|
1133
1124
|
FormsModule] });
|
|
1134
1125
|
}
|
|
@@ -1166,8 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1166
1157
|
PkDgActionComponent,
|
|
1167
1158
|
PkDgRowsDirective,
|
|
1168
1159
|
PkDgRowIsExpandDirective,
|
|
1169
|
-
NowrapDirective
|
|
1170
|
-
PkIcon
|
|
1160
|
+
NowrapDirective
|
|
1171
1161
|
]
|
|
1172
1162
|
}]
|
|
1173
1163
|
}] });
|