minahil 0.1.21 → 0.1.22

package/fesm2022/minahil.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Directive, InjectionToken, inject, ElementRef } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, InjectionToken, inject, ElementRef, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -2330,283 +2330,6 @@ 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 triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
-        const padding = 10;
-        let top = 0, left = 0;
-        // Position logic — using viewport-relative coords (getBoundingClientRect)
-        // since the tooltip uses position: fixed (no scroll offset needed)
-        switch (this.tooltipPosition) {
-            case 'right':
-            case 'left':
-                top = hostRect.top + hostRect.height / 2;
-                left =
-                    this.tooltipPosition === 'right'
-                        ? hostRect.right + padding
-                        : hostRect.left - tooltipRect.width - padding;
-                // Auto flip if out of viewport
-                if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
-                    left = hostRect.left - tooltipRect.width - padding;
-                }
-                else if (this.tooltipPosition === 'left' && left < 0) {
-                    left = hostRect.right + padding;
-                }
-                this.setStyle(this.tooltipElement, {
-                    transform: 'translateY(-50%)',
-                });
-                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left);
-                break;
-            case 'top':
-            case 'bottom':
-                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-                top =
-                    this.tooltipPosition === 'top'
-                        ? hostRect.top - tooltipRect.height - padding
-                        : hostRect.bottom + 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 CheckboxComponent {
     checkboxClass = '';
     label = '';
@@ -2647,19 +2370,19 @@ class CheckboxComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\n  (click)=\"toggle()\"\n  (keydown.enter)=\"toggle()\"\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\n  tabindex=\"0\"\n  [attr.aria-disabled]=\"disabled\"\n>\n  <div\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\n    [ngClass]=\"[\n      checkboxClass,\n      isChecked && !disabled ? 'bg-black border-black' : '',\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"3.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\n      [class.opacity-0]=\"!isChecked\"\n      [class.opacity-100]=\"isChecked\"\n    >\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\n    </svg>\n  </div>\n  @if (label) {\n    <span\n      [bkTooltip]=\"'test label'\"\n      [bkTooltipPosition]=\"'top'\"\n      [ngClass]=\"disabled ? 'text-gray-400' : ''\"\n      class=\"font-medium text-xs text-[#1B223A] select-none {{ labelClass }}\"\n    >\n      {{ label }}\n    </span>\n  }\n</div>\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }], encapsulation: i0.ViewEncapsulation.None });
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n    [ngClass]=\"[\r\n    checkboxClass,\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n@if(label){\r\n  <span\r\n    [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n    class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n}\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'brickclay-checkbox', standalone: true, imports: [CommonModule, BKTooltipDirective], encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'brickclay-checkbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
-                            multi: true,
-                        },
-                    ], template: "<div\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\n  (click)=\"toggle()\"\n  (keydown.enter)=\"toggle()\"\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\n  tabindex=\"0\"\n  [attr.aria-disabled]=\"disabled\"\n>\n  <div\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\n    [ngClass]=\"[\n      checkboxClass,\n      isChecked && !disabled ? 'bg-black border-black' : '',\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"3.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\n      [class.opacity-0]=\"!isChecked\"\n      [class.opacity-100]=\"isChecked\"\n    >\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\n    </svg>\n  </div>\n  @if (label) {\n    <span\n      [bkTooltip]=\"'test label'\"\n      [bkTooltipPosition]=\"'top'\"\n      [ngClass]=\"disabled ? 'text-gray-400' : ''\"\n      class=\"font-medium text-xs text-[#1B223A] select-none {{ labelClass }}\"\n    >\n      {{ label }}\n    </span>\n  }\n</div>\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"] }]
+                            multi: true
+                        }
+                    ], template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n    [ngClass]=\"[\r\n    checkboxClass,\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n@if(label){\r\n  <span\r\n    [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n    class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n}\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"] }]
         }], propDecorators: { checkboxClass: [{
                 type: Input
             }], label: [{
@@ -3811,133 +3534,410 @@ class BkDialogClose {
             this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
         }
     }
-    ngOnChanges(changes) {
-        const proxiedChange = changes['_bkDialogClose'] || changes['dialogResult'];
-        if (proxiedChange) {
-            this.dialogResult = proxiedChange.currentValue;
+    ngOnChanges(changes) {
+        const proxiedChange = changes['_bkDialogClose'] || changes['dialogResult'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    _onButtonClick(_event) {
+        this._dialogRef?.close(this.dialogResult);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogClose, isStandalone: true, selector: "[bk-dialog-close], [bkDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["bk-dialog-close", "dialogResult"], _bkDialogClose: ["bkDialogClose", "_bkDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["bkDialogClose"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-close], [bkDialogClose]',
+                    standalone: true,
+                    exportAs: 'bkDialogClose',
+                    host: {
+                        '(click)': '_onButtonClick($event)',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['bk-dialog-close']
+            }], _bkDialogClose: [{
+                type: Input,
+                args: ['bkDialogClose']
+            }] } });
+
+/**
+ * BkDialogModule
+ *
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Follows the exact same pattern as Angular Material's `MatDialogModule`
+ * and `@brickclay-org/ui`'s `CalendarModule`:
+ *
+ *  • All components/directives are **standalone**.
+ *  • This module simply imports + re-exports them for convenience.
+ *  • `DialogService` is `providedIn: 'root'`, so it does NOT need to
+ *    be listed in `providers` here — it is tree-shakeable and available
+ *    app-wide automatically.
+ *
+ * Two usage styles:
+ *
+ * ───────── Module-based (NgModule) ─────────
+ * ```ts
+ * import { BkDialogModule } from '@shared/components/dialog';
+ *
+ * @NgModule({ imports: [BkDialogModule] })
+ * export class FuelCostModule {}
+ * ```
+ *
+ * ───────── Standalone ──────────────────────
+ * ```ts
+ * @Component({
+ *   standalone: true,
+ *   imports: [BkDialogContent, BkDialogActions, BkDialogClose],
+ * })
+ * export class MyDialog {}
+ * ```
+ *
+ * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-module.ts
+ */
+class BkDialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule,
+            // ── Our standalone pieces ───────────────────────────────────────
+            DialogContainerComponent,
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose], exports: [
+            // ── Public API for template usage ───────────────────────────────
+            // Consumers import BkDialogModule and get these directives in
+            // their templates automatically — just like MatDialogModule.
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // ── CDK foundations ──────────────────────────────────────────────
+                        DialogModule,
+                        OverlayModule,
+                        PortalModule,
+                        // ── Our standalone pieces ───────────────────────────────────────
+                        DialogContainerComponent,
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                    exports: [
+                        // ── Public API for template usage ───────────────────────────────
+                        // Consumers import BkDialogModule and get these directives in
+                        // their templates automatically — just like MatDialogModule.
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                }]
+        }] });
+
+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 triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
+        const padding = 10;
+        let top = 0, left = 0;
+        // Position logic — using viewport-relative coords (getBoundingClientRect)
+        // since the tooltip uses position: fixed (no scroll offset needed)
+        switch (this.tooltipPosition) {
+            case 'right':
+            case 'left':
+                top = hostRect.top + hostRect.height / 2;
+                left =
+                    this.tooltipPosition === 'right'
+                        ? hostRect.right + padding
+                        : hostRect.left - tooltipRect.width - padding;
+                // Auto flip if out of viewport
+                if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
+                    left = hostRect.left - tooltipRect.width - padding;
+                }
+                else if (this.tooltipPosition === 'left' && left < 0) {
+                    left = hostRect.right + padding;
+                }
+                this.setStyle(this.tooltipElement, {
+                    transform: 'translateY(-50%)',
+                });
+                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left);
+                break;
+            case 'top':
+            case 'bottom':
+                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+                top =
+                    this.tooltipPosition === 'top'
+                        ? hostRect.top - tooltipRect.height - padding
+                        : hostRect.bottom + 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);
     }
-    _onButtonClick(_event) {
-        this._dialogRef?.close(this.dialogResult);
+    removeTooltip() {
+        if (this.tooltipElement) {
+            this.renderer.removeChild(document.body, this.tooltipElement);
+            this.tooltipElement = null;
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogClose, isStandalone: true, selector: "[bk-dialog-close], [bkDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["bk-dialog-close", "dialogResult"], _bkDialogClose: ["bkDialogClose", "_bkDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["bkDialogClose"], usesOnChanges: true, ngImport: i0 });
+    // 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: BkDialogClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bk-dialog-close], [bkDialogClose]',
+                    selector: '[bkTooltip]',
                     standalone: true,
-                    exportAs: 'bkDialogClose',
-                    host: {
-                        '(click)': '_onButtonClick($event)',
-                        '[attr.aria-label]': 'ariaLabel || null',
-                        '[attr.type]': 'type',
-                    },
                 }]
-        }], propDecorators: { ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], type: [{
-                type: Input
-            }], dialogResult: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipContent: [{
                 type: Input,
-                args: ['bk-dialog-close']
-            }], _bkDialogClose: [{
+                args: ['bkTooltip']
+            }], tooltipPosition: [{
                 type: Input,
-                args: ['bkDialogClose']
+                args: ['bkTooltipPosition']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onWindowChange: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
-/**
- * BkDialogModule
- *
- * Optional NgModule wrapper for projects that prefer module-based usage.
- *
- * Architecture Decision:
- * ─────────────────────
- * Follows the exact same pattern as Angular Material's `MatDialogModule`
- * and `@brickclay-org/ui`'s `CalendarModule`:
- *
- *  • All components/directives are **standalone**.
- *  • This module simply imports + re-exports them for convenience.
- *  • `DialogService` is `providedIn: 'root'`, so it does NOT need to
- *    be listed in `providers` here — it is tree-shakeable and available
- *    app-wide automatically.
- *
- * Two usage styles:
- *
- * ───────── Module-based (NgModule) ─────────
- * ```ts
- * import { BkDialogModule } from '@shared/components/dialog';
- *
- * @NgModule({ imports: [BkDialogModule] })
- * export class FuelCostModule {}
- * ```
- *
- * ───────── Standalone ──────────────────────
- * ```ts
- * @Component({
- *   standalone: true,
- *   imports: [BkDialogContent, BkDialogActions, BkDialogClose],
- * })
- * export class MyDialog {}
- * ```
- *
- * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-module.ts
- */
-class BkDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
-            // ── CDK foundations ──────────────────────────────────────────────
-            DialogModule,
-            OverlayModule,
-            PortalModule,
-            // ── Our standalone pieces ───────────────────────────────────────
-            DialogContainerComponent,
-            BkDialogTitle,
-            BkDialogContent,
-            BkDialogActions,
-            BkDialogClose], exports: [
-            // ── Public API for template usage ───────────────────────────────
-            // Consumers import BkDialogModule and get these directives in
-            // their templates automatically — just like MatDialogModule.
-            BkDialogTitle,
-            BkDialogContent,
-            BkDialogActions,
-            BkDialogClose] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
-            // ── CDK foundations ──────────────────────────────────────────────
-            DialogModule,
-            OverlayModule,
-            PortalModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        // ── CDK foundations ──────────────────────────────────────────────
-                        DialogModule,
-                        OverlayModule,
-                        PortalModule,
-                        // ── Our standalone pieces ───────────────────────────────────────
-                        DialogContainerComponent,
-                        BkDialogTitle,
-                        BkDialogContent,
-                        BkDialogActions,
-                        BkDialogClose,
-                    ],
-                    exports: [
-                        // ── Public API for template usage ───────────────────────────────
-                        // Consumers import BkDialogModule and get these directives in
-                        // their templates automatically — just like MatDialogModule.
-                        BkDialogTitle,
-                        BkDialogContent,
-                        BkDialogActions,
-                        BkDialogClose,
-                    ],
-                }]
-        }] });
-
 /*
  * Public API Surface of brickclay-lib
  */