ngx-pk-ui 1.0.5 → 1.1.1

package/fesm2022/ngx-pk-ui.mjs

@@ -669,12 +669,7 @@ class PkDgRowsDirective {
                 this.datagrid.pagination.updatePagination();
             }
             this.datagrid.updateDisplayedItems();
-            this._lastVersion = this.datagrid.displayedItemsVersion;
-            // Render immediately on first bind; do not wait for a user event.
-            this.renderItems();
-            return;
         }
-        this.renderItems();
     }
     renderItems() {
         this.viewContainer.clear();
@@ -874,9 +869,6 @@ class PkDatagridComponent {
             }
             this._initColumnWidths();
             this.updateDisplayedItems();
-            // In zoneless mode, async callbacks do not automatically trigger a render pass.
-            // Run one explicit change detection so initial pagination is reflected immediately.
-            this.cdr.detectChanges();
         }, 0);
     }
     updateDisplayedItems() {
@@ -1046,7 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [PkDgHeaderComponent]
             }], pagination: [{
                 type: ContentChild,
-                args: [PkDgPaginationComponent, { descendants: true }]
+                args: [PkDgPaginationComponent]
             }], rowDetails: [{
                 type: ContentChildren,
                 args: [PkDgRowExpandComponent, { descendants: true }]
@@ -1127,8 +1119,7 @@ class PkDatagridModule {
             PkDgActionComponent,
             PkDgRowsDirective,
             PkDgRowIsExpandDirective,
-            NowrapDirective,
-            PkIcon] });
+            NowrapDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, imports: [CommonModule,
             FormsModule] });
 }
@@ -1166,8 +1157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         PkDgActionComponent,
                         PkDgRowsDirective,
                         PkDgRowIsExpandDirective,
-                        NowrapDirective,
-                        PkIcon
+                        NowrapDirective
                     ]
                 }]
         }] });
@@ -2665,6 +2655,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, 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"] }]
         }], 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"] }] } });
 
+class PkTooltip {
+    pkTooltip = input.required(...(ngDevMode ? [{ debugName: "pkTooltip" }] : /* istanbul ignore next */ []));
+    pkTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "pkTooltipPosition" }] : /* istanbul ignore next */ []));
+    pkTooltipType = input('primary', ...(ngDevMode ? [{ debugName: "pkTooltipType" }] : /* istanbul ignore next */ []));
+    hostEl = inject((ElementRef));
+    tooltipEl = null;
+    onMouseEnter() { this.show(); }
+    onMouseLeave() { this.hide(); }
+    onFocusIn() { this.show(); }
+    onFocusOut() { this.hide(); }
+    ngOnDestroy() {
+        this.hide();
+    }
+    show() {
+        const text = this.pkTooltip();
+        if (!text || this.tooltipEl)
+            return;
+        const tooltip = document.createElement('div');
+        tooltip.className = [
+            'pk-tooltip-box',
+            `pk-tooltip-box--${this.pkTooltipPosition()}`,
+            `pk-tooltip-box--${this.pkTooltipType()}`,
+        ].join(' ');
+        tooltip.textContent = text;
+        tooltip.style.visibility = 'hidden';
+        document.body.appendChild(tooltip);
+        this.tooltipEl = tooltip;
+        this.reposition();
+        tooltip.style.visibility = '';
+    }
+    reposition() {
+        const tooltip = this.tooltipEl;
+        if (!tooltip)
+            return;
+        const host = this.hostEl.nativeElement.getBoundingClientRect();
+        const tip = tooltip.getBoundingClientRect();
+        const gap = 8;
+        let top;
+        let left;
+        switch (this.pkTooltipPosition()) {
+            case 'bottom':
+                top = host.bottom + gap;
+                left = host.left + (host.width - tip.width) / 2;
+                break;
+            case 'left':
+                top = host.top + (host.height - tip.height) / 2;
+                left = host.left - tip.width - gap;
+                break;
+            case 'right':
+                top = host.top + (host.height - tip.height) / 2;
+                left = host.right + gap;
+                break;
+            default: // top
+                top = host.top - tip.height - gap;
+                left = host.left + (host.width - tip.width) / 2;
+        }
+        tooltip.style.top = `${top}px`;
+        tooltip.style.left = `${left}px`;
+    }
+    hide() {
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pkTooltip]',
+                }]
+        }], 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: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
 class PkAutocompleteComponent {
     elementRef = inject(ElementRef);
     // Inputs
@@ -3202,5 +3279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=ngx-pk-ui.mjs.map