@brickclay-org/ui 0.0.46 → 0.0.47

package/fesm2022/brickclay-org-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, Directive } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -2903,6 +2903,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class BKTooltipDirective {
+    el;
+    renderer;
+    tooltipContent = '';
+    tooltipPosition = 'right';
+    tooltipElement = null;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.createTooltip();
+    }
+    ngOnChanges(changes) {
+        if (changes['tooltipContent'] && !changes['tooltipContent'].firstChange) {
+            this.updateTooltipContent();
+        }
+    }
+    ngOnDestroy() {
+        this.removeTooltip();
+    }
+    updateTooltipContent() {
+        // If tooltip doesn't exist yet and content is now available, create it
+        if (!this.tooltipElement && !this.isTooltipContentEmpty()) {
+            this.createTooltip();
+            return;
+        }
+        if (!this.tooltipElement)
+            return;
+        if (this.isTooltipContentEmpty())
+            return;
+        // remove old .text nodes
+        Array.from(this.tooltipElement.querySelectorAll('.text')).forEach((el) => this.renderer.removeChild(this.tooltipElement, el));
+        this.appendContent();
+    }
+    appendContent() {
+        if (!this.tooltipElement)
+            return;
+        const contentLines = Array.isArray(this.tooltipContent)
+            ? this.tooltipContent
+            : [this.tooltipContent];
+        contentLines.forEach((line) => {
+            const div = this.renderer.createElement('div');
+            this.renderer.addClass(div, 'text');
+            if (line?.trim().startsWith('<')) {
+                div.innerHTML = line;
+            }
+            else {
+                const text = this.renderer.createText(line ?? '');
+                this.renderer.appendChild(div, text);
+            }
+            this.renderer.appendChild(this.tooltipElement, div);
+        });
+    }
+    onMouseEnter() {
+        if (this.tooltipElement) {
+            this.setTooltipPosition();
+            this.setStyle(this.tooltipElement, {
+                visibility: 'visible',
+                opacity: '1',
+            });
+            this.renderer.setStyle(document.body, 'overflow-x', 'hidden'); // ✅ temporarily lock horizontal scroll
+        }
+    }
+    onMouseLeave() {
+        if (this.tooltipElement) {
+            this.setStyle(this.tooltipElement, {
+                visibility: 'hidden',
+                opacity: '0',
+            });
+            this.renderer.removeStyle(document.body, 'overflow-x'); // ✅ restore scroll when tooltip hides
+        }
+    }
+    onWindowChange() {
+        if (this.tooltipElement?.style.visibility === 'visible') {
+            this.setTooltipPosition();
+        }
+    }
+    isTooltipContentEmpty() {
+        if (typeof this.tooltipContent === 'string') {
+            return !this.tooltipContent.trim();
+        }
+        else if (Array.isArray(this.tooltipContent)) {
+            return this.tooltipContent.length === 0 || this.tooltipContent.every(line => !line.trim());
+        }
+        return true;
+    }
+    createTooltip() {
+        if (this.isTooltipContentEmpty())
+            return;
+        this.tooltipElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltipElement, 'bk-tooltip-content');
+        // Add content
+        const contentLines = Array.isArray(this.tooltipContent) ? this.tooltipContent : [this.tooltipContent];
+        contentLines.forEach((line) => {
+            const div = this.renderer.createElement('div');
+            this.renderer.addClass(div, 'text');
+            // this.renderer.appendChild(div, this.renderer.createText(line));
+            // Check if the line contains HTML
+            if (line.trim().startsWith('<')) {
+                div.innerHTML = line;
+            }
+            else {
+                const text = this.renderer.createText(line);
+                this.renderer.appendChild(div, text);
+            }
+            this.renderer.appendChild(this.tooltipElement, div);
+        });
+        // Add triangle
+        const triangle = this.renderer.createElement('div');
+        this.renderer.addClass(triangle, 'bk-tooltip-triangle');
+        this.renderer.appendChild(this.tooltipElement, triangle);
+        // Set base styles
+        this.setStyle(this.tooltipElement, {
+            position: 'fixed',
+            visibility: 'hidden',
+            opacity: '0',
+            zIndex: '9999',
+            transition: 'opacity 0.3s ease, visibility 0.3s ease',
+        });
+        this.renderer.appendChild(document.body, this.tooltipElement);
+    }
+    setTooltipPosition() {
+        if (!this.tooltipElement)
+            return;
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        const triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
+        const padding = 10;
+        let top = 0, left = 0;
+        // Position logic
+        switch (this.tooltipPosition) {
+            case 'right':
+            case 'left':
+                top = hostRect.top + scrollTop + hostRect.height / 2;
+                left = this.tooltipPosition === 'right'
+                    ? hostRect.right + scrollLeft + padding
+                    : hostRect.left + scrollLeft - tooltipRect.width - padding;
+                // Auto flip if out of viewport
+                if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
+                    left = hostRect.left + scrollLeft - tooltipRect.width - padding;
+                }
+                else if (this.tooltipPosition === 'left' && left < 0) {
+                    left = hostRect.right + scrollLeft + padding;
+                }
+                this.setStyle(this.tooltipElement, {
+                    transform: 'translateY(-50%)',
+                });
+                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left + scrollLeft);
+                break;
+            case 'top':
+            case 'bottom':
+                left = hostRect.left + scrollLeft + hostRect.width / 2 - tooltipRect.width / 2;
+                top = this.tooltipPosition === 'top'
+                    ? hostRect.top + scrollTop - tooltipRect.height - padding
+                    : hostRect.bottom + scrollTop + padding;
+                // Prevent overflow
+                left = Math.max(10, Math.min(left, window.innerWidth - tooltipRect.width - 10));
+                this.setStyle(this.tooltipElement, {
+                    transform: 'translateX(0)',
+                });
+                this.setTriangleStyles(triangle, this.tooltipPosition);
+                break;
+        }
+        this.setStyle(this.tooltipElement, {
+            top: `${top}px`,
+            left: `${left}px`,
+        });
+    }
+    setTriangleStyles(triangle, position, flipped = false) {
+        if (!triangle)
+            return;
+        const base = {
+            top: '',
+            left: '',
+            right: '',
+            bottom: '',
+            transform: '',
+            borderColor: '',
+        };
+        let styles = { ...base };
+        switch (position) {
+            case 'right':
+                styles = flipped
+                    ? { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(0)', borderColor: 'transparent transparent transparent #1a1a1a' }
+                    : { left: '-15px', top: '50%', transform: 'translateY(-50%)', borderColor: 'transparent #1a1a1a transparent transparent' };
+                break;
+            case 'left':
+                styles = flipped
+                    ? { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(0)', borderColor: 'transparent transparent transparent #1a1a1a' }
+                    : { left: '-15px', top: '50%', transform: 'translateY(-50%)', borderColor: 'transparent #1a1a1a transparent transparent' };
+                break;
+            case 'top':
+                styles = {
+                    bottom: '-15px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    borderColor: '#1a1a1a transparent transparent transparent',
+                };
+                break;
+            case 'bottom':
+                styles = {
+                    top: '-15px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    borderColor: 'transparent transparent #1a1a1a transparent',
+                };
+                break;
+        }
+        this.setStyle(triangle, styles);
+    }
+    removeTooltip() {
+        if (this.tooltipElement) {
+            this.renderer.removeChild(document.body, this.tooltipElement);
+            this.tooltipElement = null;
+        }
+    }
+    // Utility function to apply multiple styles
+    setStyle(el, styles) {
+        Object.entries(styles).forEach(([prop, value]) => {
+            this.renderer.setStyle(el, prop, value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bkTooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipContent: [{
+                type: Input,
+                args: ['bkTooltip']
+            }], tooltipPosition: [{
+                type: Input,
+                args: ['bkTooltipPosition']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onWindowChange: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 class BkGrid {
     draggable = false;
     columns = [];
@@ -3002,11 +3256,11 @@ class BkGrid {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                    <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\"                   -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                                    \r\n                  <button \r\n                    bkTooltip=\"{{ action.tooltip }}\"\r\n                    bkTooltipPosition=\"top\"  \r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule], template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                    <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\"                   -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BKTooltipDirective], template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                                    \r\n                  <button \r\n                    bkTooltip=\"{{ action.tooltip }}\"\r\n                    bkTooltipPosition=\"top\"  \r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { draggable: [{
                 type: Input
             }], columns: [{
@@ -5264,260 +5518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-class BKTooltipDirective {
-    el;
-    renderer;
-    tooltipContent = '';
-    tooltipPosition = 'right';
-    tooltipElement = null;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.createTooltip();
-    }
-    ngOnChanges(changes) {
-        if (changes['tooltipContent'] && !changes['tooltipContent'].firstChange) {
-            this.updateTooltipContent();
-        }
-    }
-    ngOnDestroy() {
-        this.removeTooltip();
-    }
-    updateTooltipContent() {
-        // If tooltip doesn't exist yet and content is now available, create it
-        if (!this.tooltipElement && !this.isTooltipContentEmpty()) {
-            this.createTooltip();
-            return;
-        }
-        if (!this.tooltipElement)
-            return;
-        if (this.isTooltipContentEmpty())
-            return;
-        // remove old .text nodes
-        Array.from(this.tooltipElement.querySelectorAll('.text')).forEach((el) => this.renderer.removeChild(this.tooltipElement, el));
-        this.appendContent();
-    }
-    appendContent() {
-        if (!this.tooltipElement)
-            return;
-        const contentLines = Array.isArray(this.tooltipContent)
-            ? this.tooltipContent
-            : [this.tooltipContent];
-        contentLines.forEach((line) => {
-            const div = this.renderer.createElement('div');
-            this.renderer.addClass(div, 'text');
-            if (line?.trim().startsWith('<')) {
-                div.innerHTML = line;
-            }
-            else {
-                const text = this.renderer.createText(line ?? '');
-                this.renderer.appendChild(div, text);
-            }
-            this.renderer.appendChild(this.tooltipElement, div);
-        });
-    }
-    onMouseEnter() {
-        if (this.tooltipElement) {
-            this.setTooltipPosition();
-            this.setStyle(this.tooltipElement, {
-                visibility: 'visible',
-                opacity: '1',
-            });
-            this.renderer.setStyle(document.body, 'overflow-x', 'hidden'); // ✅ temporarily lock horizontal scroll
-        }
-    }
-    onMouseLeave() {
-        if (this.tooltipElement) {
-            this.setStyle(this.tooltipElement, {
-                visibility: 'hidden',
-                opacity: '0',
-            });
-            this.renderer.removeStyle(document.body, 'overflow-x'); // ✅ restore scroll when tooltip hides
-        }
-    }
-    onWindowChange() {
-        if (this.tooltipElement?.style.visibility === 'visible') {
-            this.setTooltipPosition();
-        }
-    }
-    isTooltipContentEmpty() {
-        if (typeof this.tooltipContent === 'string') {
-            return !this.tooltipContent.trim();
-        }
-        else if (Array.isArray(this.tooltipContent)) {
-            return this.tooltipContent.length === 0 || this.tooltipContent.every(line => !line.trim());
-        }
-        return true;
-    }
-    createTooltip() {
-        if (this.isTooltipContentEmpty())
-            return;
-        this.tooltipElement = this.renderer.createElement('div');
-        this.renderer.addClass(this.tooltipElement, 'bk-tooltip-content');
-        // Add content
-        const contentLines = Array.isArray(this.tooltipContent) ? this.tooltipContent : [this.tooltipContent];
-        contentLines.forEach((line) => {
-            const div = this.renderer.createElement('div');
-            this.renderer.addClass(div, 'text');
-            // this.renderer.appendChild(div, this.renderer.createText(line));
-            // Check if the line contains HTML
-            if (line.trim().startsWith('<')) {
-                div.innerHTML = line;
-            }
-            else {
-                const text = this.renderer.createText(line);
-                this.renderer.appendChild(div, text);
-            }
-            this.renderer.appendChild(this.tooltipElement, div);
-        });
-        // Add triangle
-        const triangle = this.renderer.createElement('div');
-        this.renderer.addClass(triangle, 'bk-tooltip-triangle');
-        this.renderer.appendChild(this.tooltipElement, triangle);
-        // Set base styles
-        this.setStyle(this.tooltipElement, {
-            position: 'fixed',
-            visibility: 'hidden',
-            opacity: '0',
-            zIndex: '9999',
-            transition: 'opacity 0.3s ease, visibility 0.3s ease',
-        });
-        this.renderer.appendChild(document.body, this.tooltipElement);
-    }
-    setTooltipPosition() {
-        if (!this.tooltipElement)
-            return;
-        const hostRect = this.el.nativeElement.getBoundingClientRect();
-        const tooltipRect = this.tooltipElement.getBoundingClientRect();
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-        const triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
-        const padding = 10;
-        let top = 0, left = 0;
-        // Position logic
-        switch (this.tooltipPosition) {
-            case 'right':
-            case 'left':
-                top = hostRect.top + scrollTop + hostRect.height / 2;
-                left = this.tooltipPosition === 'right'
-                    ? hostRect.right + scrollLeft + padding
-                    : hostRect.left + scrollLeft - tooltipRect.width - padding;
-                // Auto flip if out of viewport
-                if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
-                    left = hostRect.left + scrollLeft - tooltipRect.width - padding;
-                }
-                else if (this.tooltipPosition === 'left' && left < 0) {
-                    left = hostRect.right + scrollLeft + padding;
-                }
-                this.setStyle(this.tooltipElement, {
-                    transform: 'translateY(-50%)',
-                });
-                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left + scrollLeft);
-                break;
-            case 'top':
-            case 'bottom':
-                left = hostRect.left + scrollLeft + hostRect.width / 2 - tooltipRect.width / 2;
-                top = this.tooltipPosition === 'top'
-                    ? hostRect.top + scrollTop - tooltipRect.height - padding
-                    : hostRect.bottom + scrollTop + padding;
-                // Prevent overflow
-                left = Math.max(10, Math.min(left, window.innerWidth - tooltipRect.width - 10));
-                this.setStyle(this.tooltipElement, {
-                    transform: 'translateX(0)',
-                });
-                this.setTriangleStyles(triangle, this.tooltipPosition);
-                break;
-        }
-        this.setStyle(this.tooltipElement, {
-            top: `${top}px`,
-            left: `${left}px`,
-        });
-    }
-    setTriangleStyles(triangle, position, flipped = false) {
-        if (!triangle)
-            return;
-        const base = {
-            top: '',
-            left: '',
-            right: '',
-            bottom: '',
-            transform: '',
-            borderColor: '',
-        };
-        let styles = { ...base };
-        switch (position) {
-            case 'right':
-                styles = flipped
-                    ? { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(0)', borderColor: 'transparent transparent transparent #1a1a1a' }
-                    : { left: '-15px', top: '50%', transform: 'translateY(-50%)', borderColor: 'transparent #1a1a1a transparent transparent' };
-                break;
-            case 'left':
-                styles = flipped
-                    ? { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(0)', borderColor: 'transparent transparent transparent #1a1a1a' }
-                    : { left: '-15px', top: '50%', transform: 'translateY(-50%)', borderColor: 'transparent #1a1a1a transparent transparent' };
-                break;
-            case 'top':
-                styles = {
-                    bottom: '-15px',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    borderColor: '#1a1a1a transparent transparent transparent',
-                };
-                break;
-            case 'bottom':
-                styles = {
-                    top: '-15px',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    borderColor: 'transparent transparent #1a1a1a transparent',
-                };
-                break;
-        }
-        this.setStyle(triangle, styles);
-    }
-    removeTooltip() {
-        if (this.tooltipElement) {
-            this.renderer.removeChild(document.body, this.tooltipElement);
-            this.tooltipElement = null;
-        }
-    }
-    // Utility function to apply multiple styles
-    setStyle(el, styles) {
-        Object.entries(styles).forEach(([prop, value]) => {
-            this.renderer.setStyle(el, prop, value);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bkTooltip]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipContent: [{
-                type: Input,
-                args: ['bkTooltip']
-            }], tooltipPosition: [{
-                type: Input,
-                args: ['bkTooltipPosition']
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], onWindowChange: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
 /*
  * Public API Surface of brickclay-lib
  */