ngx-pk-ui 1.0.4 → 1.0.5
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
CHANGED
|
@@ -1036,11 +1036,11 @@ class PkDatagridComponent {
|
|
|
1036
1036
|
this._onResizeEnd();
|
|
1037
1037
|
}
|
|
1038
1038
|
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
|
|
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 i; 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
1040
|
}
|
|
1041
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
|
|
1042
1042
|
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
|
|
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 i; 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
1044
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
1045
1045
|
type: ContentChildren,
|
|
1046
1046
|
args: [PkDgHeaderComponent]
|