ngx-pk-ui 1.1.0 → 1.1.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/fesm2022/ngx-pk-ui.mjs +141 -7
- package/fesm2022/ngx-pk-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/pk-tooltip.css +90 -0
- package/styles/pk-ui.css +1 -0
- package/types/ngx-pk-ui.d.ts +24 -2
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, viewChild, Component, contentChildren, signal,
|
|
2
|
+
import { input, viewChild, Component, contentChildren, signal, inject, PLATFORM_ID, ApplicationRef, EnvironmentInjector, createComponent, Injectable, effect, output, computed, Input, EventEmitter, Output, ContentChild, Host, Optional, forwardRef, Inject, Directive, HostListener, ContentChildren, NgModule, ChangeDetectionStrategy, ElementRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { NgTemplateOutlet, NgStyle, CommonModule, NgClass } from '@angular/common';
|
|
4
|
+
import { NgTemplateOutlet, isPlatformBrowser, NgStyle, CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -47,6 +47,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
47
47
|
class PkToastrService {
|
|
48
48
|
_counter = 0;
|
|
49
49
|
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
|
|
50
|
+
constructor() {
|
|
51
|
+
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
52
|
+
return;
|
|
53
|
+
const appRef = inject(ApplicationRef);
|
|
54
|
+
const injector = inject(EnvironmentInjector);
|
|
55
|
+
// Lazily import PkToastr to break the circular-reference at parse time.
|
|
56
|
+
Promise.resolve().then(function () { return pkToastr; }).then(({ PkToastr }) => {
|
|
57
|
+
try {
|
|
58
|
+
if (document.querySelector('pk-toastr'))
|
|
59
|
+
return; // already in DOM (manual tag)
|
|
60
|
+
const ref = createComponent(PkToastr, { environmentInjector: injector });
|
|
61
|
+
appRef.attachView(ref.hostView);
|
|
62
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
63
|
+
}
|
|
64
|
+
catch {
|
|
65
|
+
// Injector was destroyed before the dynamic import resolved (e.g., during tests).
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}
|
|
50
69
|
show(type, message, title, duration = 4000) {
|
|
51
70
|
const toast = { id: ++this._counter, type, message, title, duration };
|
|
52
71
|
this.toasts.update((list) => [...list, toast]);
|
|
@@ -78,7 +97,7 @@ class PkToastrService {
|
|
|
78
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, decorators: [{
|
|
79
98
|
type: Injectable,
|
|
80
99
|
args: [{ providedIn: 'root' }]
|
|
81
|
-
}] });
|
|
100
|
+
}], ctorParameters: () => [] });
|
|
82
101
|
|
|
83
102
|
class PkToastr {
|
|
84
103
|
toastr = inject(PkToastrService);
|
|
@@ -90,9 +109,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
90
109
|
args: [{ selector: 'pk-toastr', template: "<div class=\"pk-toastr-container\" aria-live=\"polite\" aria-atomic=\"false\">\n @for (toast of toastr.toasts(); track toast.id) {\n <div\n class=\"pk-toast pk-toast--{{ toast.type }}\"\n role=\"alert\"\n >\n @if (toast.title) {\n <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n }\n <span class=\"pk-toast__message\">{{ toast.message }}</span>\n <button\n class=\"pk-toast__close\"\n aria-label=\"Dismiss\"\n (click)=\"toastr.dismiss(toast.id)\"\n >\u2715</button>\n </div>\n }\n</div>\n", styles: [".pk-toastr-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px;pointer-events:none}.pk-toast{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;color:#fff;pointer-events:all;animation:pk-toast-in .25s ease}@keyframes pk-toast-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.pk-toast--success{background:#43a047}.pk-toast--error{background:#e53935}.pk-toast--info{background:#1e88e5}.pk-toast--warning{background:#fb8c00}.pk-toast__title{display:block;font-weight:700;margin-bottom:2px}.pk-toast__message{flex:1;font-size:14px}.pk-toast__close{background:none;border:none;color:#fffc;cursor:pointer;font-size:14px;padding:0;line-height:1;margin-left:auto;flex-shrink:0}.pk-toast__close:hover{color:#fff}\n"] }]
|
|
91
110
|
}] });
|
|
92
111
|
|
|
112
|
+
var pkToastr = /*#__PURE__*/Object.freeze({
|
|
113
|
+
__proto__: null,
|
|
114
|
+
PkToastr: PkToastr
|
|
115
|
+
});
|
|
116
|
+
|
|
93
117
|
class PkAlertService {
|
|
94
118
|
/** The component reads this signal to know what (if anything) to display. */
|
|
95
119
|
slot = signal(null, ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
|
|
120
|
+
constructor() {
|
|
121
|
+
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
122
|
+
return;
|
|
123
|
+
const appRef = inject(ApplicationRef);
|
|
124
|
+
const injector = inject(EnvironmentInjector);
|
|
125
|
+
Promise.resolve().then(function () { return pkAlert; }).then(({ PkAlert }) => {
|
|
126
|
+
try {
|
|
127
|
+
if (document.querySelector('pk-alert'))
|
|
128
|
+
return; // already in DOM (manual tag)
|
|
129
|
+
const ref = createComponent(PkAlert, { environmentInjector: injector });
|
|
130
|
+
appRef.attachView(ref.hostView);
|
|
131
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
132
|
+
}
|
|
133
|
+
catch {
|
|
134
|
+
// Injector was destroyed before the dynamic import resolved (e.g., during tests).
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
}
|
|
96
138
|
_open(config) {
|
|
97
139
|
return new Promise((resolve) => {
|
|
98
140
|
this.slot.set({ config, resolve });
|
|
@@ -139,7 +181,7 @@ class PkAlertService {
|
|
|
139
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, decorators: [{
|
|
140
182
|
type: Injectable,
|
|
141
183
|
args: [{ providedIn: 'root' }]
|
|
142
|
-
}] });
|
|
184
|
+
}], ctorParameters: () => [] });
|
|
143
185
|
|
|
144
186
|
class PkAlert {
|
|
145
187
|
svc = inject(PkAlertService);
|
|
@@ -192,6 +234,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
192
234
|
args: [{ selector: 'pk-alert', imports: [FormsModule], template: "@if (svc.slot(); as slot) {\n <div class=\"pk-alert-backdrop\" (click)=\"cancel()\">\n <div class=\"pk-alert-card pk-alert-card--{{ slot.config.type }}\"\n role=\"dialog\"\n aria-modal=\"true\"\n (click)=\"$event.stopPropagation()\">\n\n <div class=\"pk-alert-icon\">\n @switch (slot.config.type) {\n @case ('success') { \u2705 }\n @case ('warn') { \u26A0\uFE0F }\n @case ('error') { \u274C }\n @case ('confirm') { \uD83E\uDD14 }\n @case ('input') { \u270F\uFE0F }\n }\n </div>\n\n @if (slot.config.title) {\n <h2 class=\"pk-alert-title\">{{ slot.config.title }}</h2>\n }\n\n <p class=\"pk-alert-message\">{{ slot.config.message }}</p>\n\n @if (slot.config.type === 'input') {\n <div class=\"pk-alert-input-wrap\">\n @switch (slot.config.inputType) {\n @case ('boolean') {\n <label class=\"pk-alert-toggle\">\n <input type=\"checkbox\" [checked]=\"!!inputValue()\"\n (change)=\"inputValue.set($any($event.target).checked)\" />\n <span>{{ inputValue() ? 'Yes' : 'No' }}</span>\n </label>\n }\n @case ('number') {\n <input class=\"pk-alert-field\" type=\"number\"\n [value]=\"inputValue()\"\n (input)=\"inputValue.set(+$any($event.target).value)\"\n autofocus />\n }\n @case ('date') {\n <input class=\"pk-alert-field\" type=\"date\"\n [value]=\"inputValue()\"\n (input)=\"inputValue.set($any($event.target).value)\"\n autofocus />\n }\n @default {\n <input class=\"pk-alert-field\" type=\"text\"\n [value]=\"inputValue()\"\n (input)=\"inputValue.set($any($event.target).value)\"\n autofocus />\n }\n }\n </div>\n }\n\n <div class=\"pk-alert-actions\">\n @if (slot.config.type === 'confirm' || slot.config.type === 'input') {\n <button class=\"pk-alert-btn pk-alert-btn--cancel\" (click)=\"cancel()\">\n {{ slot.config.cancelLabel ?? 'Cancel' }}\n </button>\n }\n <button class=\"pk-alert-btn pk-alert-btn--confirm pk-alert-btn--{{ slot.config.type }}\"\n (click)=\"confirm()\">\n {{ slot.config.confirmLabel ?? 'OK' }}\n </button>\n </div>\n </div>\n </div>\n}\n", styles: [".pk-alert-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000;animation:pk-backdrop-in .15s ease}@keyframes pk-backdrop-in{0%{opacity:0}to{opacity:1}}.pk-alert-card{background:#fff;border-radius:10px;padding:32px 28px 24px;min-width:320px;max-width:480px;width:90vw;box-shadow:0 8px 32px #0003;text-align:center;animation:pk-card-in .2s ease}@keyframes pk-card-in{0%{opacity:0;transform:scale(.92) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}.pk-alert-icon{font-size:40px;line-height:1;margin-bottom:12px}.pk-alert-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#222}.pk-alert-message{margin:0 0 20px;font-size:15px;color:#555;line-height:1.5}.pk-alert-input-wrap{margin-bottom:20px}.pk-alert-field{width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:6px;font-size:15px;outline:none;transition:border-color .15s;box-sizing:border-box}.pk-alert-field:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d22e}.pk-alert-toggle{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}.pk-alert-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.pk-alert-actions{display:flex;justify-content:center;gap:12px}.pk-alert-btn{padding:9px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}.pk-alert-btn:hover{opacity:.85}.pk-alert-btn--cancel{background:#f0f0f0;color:#444}.pk-alert-btn--confirm{color:#fff}.pk-alert-btn--confirm.pk-alert-btn--success{background:#43a047}.pk-alert-btn--confirm.pk-alert-btn--warn{background:#fb8c00}.pk-alert-btn--confirm.pk-alert-btn--error{background:#e53935}.pk-alert-btn--confirm.pk-alert-btn--confirm,.pk-alert-btn--confirm.pk-alert-btn--input{background:#1976d2}\n"] }]
|
|
193
235
|
}], ctorParameters: () => [] });
|
|
194
236
|
|
|
237
|
+
var pkAlert = /*#__PURE__*/Object.freeze({
|
|
238
|
+
__proto__: null,
|
|
239
|
+
PkAlert: PkAlert
|
|
240
|
+
});
|
|
241
|
+
|
|
195
242
|
class PkModalHeader {
|
|
196
243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
197
244
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkModalHeader, isStandalone: true, selector: "pk-modal-header", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:16px 48px 16px 20px;border-bottom:1px solid #e0e0e0;font-size:17px;font-weight:600;color:#1a1a2e;line-height:1.4}\n"] });
|
|
@@ -1028,11 +1075,11 @@ class PkDatagridComponent {
|
|
|
1028
1075
|
this._onResizeEnd();
|
|
1029
1076
|
}
|
|
1030
1077
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
1078
|
+
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"] }] });
|
|
1032
1079
|
}
|
|
1033
1080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
|
|
1034
1081
|
type: Component,
|
|
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
|
|
1082
|
+
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"] }]
|
|
1036
1083
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
1037
1084
|
type: ContentChildren,
|
|
1038
1085
|
args: [PkDgHeaderComponent]
|
|
@@ -2655,6 +2702,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2655
2702
|
`, styles: [".pk-select-container{position:relative;width:100%}.pk-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;transition:all .2s}.pk-select-trigger:hover:not(.pk-select-trigger-disabled){border-color:#3b82f6}.pk-select-trigger-open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-trigger-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.pk-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-select-placeholder{color:#9ca3af}.pk-select-arrow{margin-left:8px;font-size:12px;color:#6b7280;transition:transform .2s}.pk-select-arrow-open{transform:rotate(180deg)}.pk-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.pk-select-search{padding:8px;border-bottom:1px solid #e5e7eb}.pk-select-search-input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none}.pk-select-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-options{overflow-y:auto;max-height:250px}.pk-select-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.pk-select-option:hover:not(.pk-select-option-disabled){background-color:#f3f4f6}.pk-select-option-selected{background-color:#dbeafe;color:#1e40af}.pk-select-option-disabled{opacity:.5;cursor:not-allowed}.pk-select-checkbox{margin-right:8px;cursor:pointer}.pk-select-option-label{flex:1}.pk-select-no-options{padding:16px 12px;text-align:center;color:#9ca3af;font-size:14px}\n"] }]
|
|
2656
2703
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], returnObjects: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnObjects", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
2657
2704
|
|
|
2705
|
+
class PkTooltip {
|
|
2706
|
+
pkTooltip = input.required(...(ngDevMode ? [{ debugName: "pkTooltip" }] : /* istanbul ignore next */ []));
|
|
2707
|
+
pkTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "pkTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
2708
|
+
pkTooltipType = input('primary', ...(ngDevMode ? [{ debugName: "pkTooltipType" }] : /* istanbul ignore next */ []));
|
|
2709
|
+
hostEl = inject((ElementRef));
|
|
2710
|
+
tooltipEl = null;
|
|
2711
|
+
onMouseEnter() { this.show(); }
|
|
2712
|
+
onMouseLeave() { this.hide(); }
|
|
2713
|
+
onFocusIn() { this.show(); }
|
|
2714
|
+
onFocusOut() { this.hide(); }
|
|
2715
|
+
ngOnDestroy() {
|
|
2716
|
+
this.hide();
|
|
2717
|
+
}
|
|
2718
|
+
show() {
|
|
2719
|
+
const text = this.pkTooltip();
|
|
2720
|
+
if (!text || this.tooltipEl)
|
|
2721
|
+
return;
|
|
2722
|
+
const tooltip = document.createElement('div');
|
|
2723
|
+
tooltip.className = [
|
|
2724
|
+
'pk-tooltip-box',
|
|
2725
|
+
`pk-tooltip-box--${this.pkTooltipPosition()}`,
|
|
2726
|
+
`pk-tooltip-box--${this.pkTooltipType()}`,
|
|
2727
|
+
].join(' ');
|
|
2728
|
+
tooltip.textContent = text;
|
|
2729
|
+
tooltip.style.visibility = 'hidden';
|
|
2730
|
+
document.body.appendChild(tooltip);
|
|
2731
|
+
this.tooltipEl = tooltip;
|
|
2732
|
+
this.reposition();
|
|
2733
|
+
tooltip.style.visibility = '';
|
|
2734
|
+
}
|
|
2735
|
+
reposition() {
|
|
2736
|
+
const tooltip = this.tooltipEl;
|
|
2737
|
+
if (!tooltip)
|
|
2738
|
+
return;
|
|
2739
|
+
const host = this.hostEl.nativeElement.getBoundingClientRect();
|
|
2740
|
+
const tip = tooltip.getBoundingClientRect();
|
|
2741
|
+
const gap = 8;
|
|
2742
|
+
let top;
|
|
2743
|
+
let left;
|
|
2744
|
+
switch (this.pkTooltipPosition()) {
|
|
2745
|
+
case 'bottom':
|
|
2746
|
+
top = host.bottom + gap;
|
|
2747
|
+
left = host.left + (host.width - tip.width) / 2;
|
|
2748
|
+
break;
|
|
2749
|
+
case 'left':
|
|
2750
|
+
top = host.top + (host.height - tip.height) / 2;
|
|
2751
|
+
left = host.left - tip.width - gap;
|
|
2752
|
+
break;
|
|
2753
|
+
case 'right':
|
|
2754
|
+
top = host.top + (host.height - tip.height) / 2;
|
|
2755
|
+
left = host.right + gap;
|
|
2756
|
+
break;
|
|
2757
|
+
default: // top
|
|
2758
|
+
top = host.top - tip.height - gap;
|
|
2759
|
+
left = host.left + (host.width - tip.width) / 2;
|
|
2760
|
+
}
|
|
2761
|
+
tooltip.style.top = `${top}px`;
|
|
2762
|
+
tooltip.style.left = `${left}px`;
|
|
2763
|
+
}
|
|
2764
|
+
hide() {
|
|
2765
|
+
if (this.tooltipEl) {
|
|
2766
|
+
this.tooltipEl.remove();
|
|
2767
|
+
this.tooltipEl = null;
|
|
2768
|
+
}
|
|
2769
|
+
}
|
|
2770
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2771
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: PkTooltip, isStandalone: true, selector: "[pkTooltip]", inputs: { pkTooltip: { classPropertyName: "pkTooltip", publicName: "pkTooltip", isSignal: true, isRequired: true, transformFunction: null }, pkTooltipPosition: { classPropertyName: "pkTooltipPosition", publicName: "pkTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, pkTooltipType: { classPropertyName: "pkTooltipType", publicName: "pkTooltipType", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, ngImport: i0 });
|
|
2772
|
+
}
|
|
2773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, decorators: [{
|
|
2774
|
+
type: Directive,
|
|
2775
|
+
args: [{
|
|
2776
|
+
selector: '[pkTooltip]',
|
|
2777
|
+
}]
|
|
2778
|
+
}], propDecorators: { pkTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "pkTooltip", required: true }] }], pkTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pkTooltipPosition", required: false }] }], pkTooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "pkTooltipType", required: false }] }], onMouseEnter: [{
|
|
2779
|
+
type: HostListener,
|
|
2780
|
+
args: ['mouseenter']
|
|
2781
|
+
}], onMouseLeave: [{
|
|
2782
|
+
type: HostListener,
|
|
2783
|
+
args: ['mouseleave']
|
|
2784
|
+
}], onFocusIn: [{
|
|
2785
|
+
type: HostListener,
|
|
2786
|
+
args: ['focusin']
|
|
2787
|
+
}], onFocusOut: [{
|
|
2788
|
+
type: HostListener,
|
|
2789
|
+
args: ['focusout']
|
|
2790
|
+
}] } });
|
|
2791
|
+
|
|
2658
2792
|
class PkAutocompleteComponent {
|
|
2659
2793
|
elementRef = inject(ElementRef);
|
|
2660
2794
|
// Inputs
|
|
@@ -3192,5 +3326,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3192
3326
|
* Generated bundle index. Do not edit.
|
|
3193
3327
|
*/
|
|
3194
3328
|
|
|
3195
|
-
export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent, PkDgCellComponent, PkDgFooterComponent, PkDgHeaderComponent, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowExpandComponent, PkDgRowIsExpandDirective, PkDgRowsDirective, PkIcon, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
|
|
3329
|
+
export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent, PkDgCellComponent, PkDgFooterComponent, PkDgHeaderComponent, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowExpandComponent, PkDgRowIsExpandDirective, PkDgRowsDirective, PkIcon, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTooltip, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
|
|
3196
3330
|
//# sourceMappingURL=ngx-pk-ui.mjs.map
|