ngx-pk-ui 1.1.0 → 1.1.1
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 +90 -3
- 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 +22 -2
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -1028,11 +1028,11 @@ class PkDatagridComponent {
|
|
|
1028
1028
|
this._onResizeEnd();
|
|
1029
1029
|
}
|
|
1030
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 });
|
|
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
|
|
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 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
1032
|
}
|
|
1033
1033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
|
|
1034
1034
|
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
|
|
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 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
1036
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
1037
1037
|
type: ContentChildren,
|
|
1038
1038
|
args: [PkDgHeaderComponent]
|
|
@@ -2655,6 +2655,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2655
2655
|
`, 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
2656
|
}], 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
2657
|
|
|
2658
|
+
class PkTooltip {
|
|
2659
|
+
pkTooltip = input.required(...(ngDevMode ? [{ debugName: "pkTooltip" }] : /* istanbul ignore next */ []));
|
|
2660
|
+
pkTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "pkTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
2661
|
+
pkTooltipType = input('primary', ...(ngDevMode ? [{ debugName: "pkTooltipType" }] : /* istanbul ignore next */ []));
|
|
2662
|
+
hostEl = inject((ElementRef));
|
|
2663
|
+
tooltipEl = null;
|
|
2664
|
+
onMouseEnter() { this.show(); }
|
|
2665
|
+
onMouseLeave() { this.hide(); }
|
|
2666
|
+
onFocusIn() { this.show(); }
|
|
2667
|
+
onFocusOut() { this.hide(); }
|
|
2668
|
+
ngOnDestroy() {
|
|
2669
|
+
this.hide();
|
|
2670
|
+
}
|
|
2671
|
+
show() {
|
|
2672
|
+
const text = this.pkTooltip();
|
|
2673
|
+
if (!text || this.tooltipEl)
|
|
2674
|
+
return;
|
|
2675
|
+
const tooltip = document.createElement('div');
|
|
2676
|
+
tooltip.className = [
|
|
2677
|
+
'pk-tooltip-box',
|
|
2678
|
+
`pk-tooltip-box--${this.pkTooltipPosition()}`,
|
|
2679
|
+
`pk-tooltip-box--${this.pkTooltipType()}`,
|
|
2680
|
+
].join(' ');
|
|
2681
|
+
tooltip.textContent = text;
|
|
2682
|
+
tooltip.style.visibility = 'hidden';
|
|
2683
|
+
document.body.appendChild(tooltip);
|
|
2684
|
+
this.tooltipEl = tooltip;
|
|
2685
|
+
this.reposition();
|
|
2686
|
+
tooltip.style.visibility = '';
|
|
2687
|
+
}
|
|
2688
|
+
reposition() {
|
|
2689
|
+
const tooltip = this.tooltipEl;
|
|
2690
|
+
if (!tooltip)
|
|
2691
|
+
return;
|
|
2692
|
+
const host = this.hostEl.nativeElement.getBoundingClientRect();
|
|
2693
|
+
const tip = tooltip.getBoundingClientRect();
|
|
2694
|
+
const gap = 8;
|
|
2695
|
+
let top;
|
|
2696
|
+
let left;
|
|
2697
|
+
switch (this.pkTooltipPosition()) {
|
|
2698
|
+
case 'bottom':
|
|
2699
|
+
top = host.bottom + gap;
|
|
2700
|
+
left = host.left + (host.width - tip.width) / 2;
|
|
2701
|
+
break;
|
|
2702
|
+
case 'left':
|
|
2703
|
+
top = host.top + (host.height - tip.height) / 2;
|
|
2704
|
+
left = host.left - tip.width - gap;
|
|
2705
|
+
break;
|
|
2706
|
+
case 'right':
|
|
2707
|
+
top = host.top + (host.height - tip.height) / 2;
|
|
2708
|
+
left = host.right + gap;
|
|
2709
|
+
break;
|
|
2710
|
+
default: // top
|
|
2711
|
+
top = host.top - tip.height - gap;
|
|
2712
|
+
left = host.left + (host.width - tip.width) / 2;
|
|
2713
|
+
}
|
|
2714
|
+
tooltip.style.top = `${top}px`;
|
|
2715
|
+
tooltip.style.left = `${left}px`;
|
|
2716
|
+
}
|
|
2717
|
+
hide() {
|
|
2718
|
+
if (this.tooltipEl) {
|
|
2719
|
+
this.tooltipEl.remove();
|
|
2720
|
+
this.tooltipEl = null;
|
|
2721
|
+
}
|
|
2722
|
+
}
|
|
2723
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2724
|
+
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 });
|
|
2725
|
+
}
|
|
2726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, decorators: [{
|
|
2727
|
+
type: Directive,
|
|
2728
|
+
args: [{
|
|
2729
|
+
selector: '[pkTooltip]',
|
|
2730
|
+
}]
|
|
2731
|
+
}], 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: [{
|
|
2732
|
+
type: HostListener,
|
|
2733
|
+
args: ['mouseenter']
|
|
2734
|
+
}], onMouseLeave: [{
|
|
2735
|
+
type: HostListener,
|
|
2736
|
+
args: ['mouseleave']
|
|
2737
|
+
}], onFocusIn: [{
|
|
2738
|
+
type: HostListener,
|
|
2739
|
+
args: ['focusin']
|
|
2740
|
+
}], onFocusOut: [{
|
|
2741
|
+
type: HostListener,
|
|
2742
|
+
args: ['focusout']
|
|
2743
|
+
}] } });
|
|
2744
|
+
|
|
2658
2745
|
class PkAutocompleteComponent {
|
|
2659
2746
|
elementRef = inject(ElementRef);
|
|
2660
2747
|
// Inputs
|
|
@@ -3192,5 +3279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3192
3279
|
* Generated bundle index. Do not edit.
|
|
3193
3280
|
*/
|
|
3194
3281
|
|
|
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 };
|
|
3282
|
+
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
3283
|
//# sourceMappingURL=ngx-pk-ui.mjs.map
|