@vallift/ngl 0.0.19 → 0.0.21

package/components/button/button.component.d.ts

@@ -8,7 +8,7 @@ export declare class ButtonComponent {
     type: import("@angular/core").InputSignal<"submit" | "button" | "reset">;
     disabled: import("@angular/core").InputSignal<boolean>;
     fullWidth: import("@angular/core").InputSignal<boolean>;
-    appearance: import("@angular/core").InputSignal<"outline" | "textType" | "primary" | "primaryRounded" | "outlineRounded">;
+    appearance: import("@angular/core").InputSignal<"textType" | "primary" | "outline" | "primaryRounded" | "outlineRounded">;
     loading: import("@angular/core").InputSignal<boolean>;
     iconSize: import("@angular/core").InputSignal<number>;
     iconSrc: import("@angular/core").InputSignal<string | null | undefined>;

package/components/shimmer/shimmer.component.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class ShimmerComponent {
-    type: import("@angular/core").InputSignal<"list" | "grid" | "single-line" | "multiline">;
+    type: import("@angular/core").InputSignal<"grid" | "list" | "single-line" | "multiline">;
     count: import("@angular/core").InputSignal<number>;
     loop: import("@angular/core").Signal<number[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ShimmerComponent, never>;

package/components/tooltip/tooltip.component.d.ts

@@ -1,15 +1,6 @@
-import { OnInit } from '@angular/core';
-import { TooltipPosition, TooltipTheme } from "./tooltip.enums";
 import * as i0 from "@angular/core";
-export declare class TooltipComponent implements OnInit {
-    tooltipPosition: TooltipPosition;
-    tooltipTheme: TooltipTheme;
-    tooltip: string;
-    left: number;
-    top: number;
-    visible: boolean;
-    constructor();
-    ngOnInit(): void;
+export declare class TooltipComponent {
+    text: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "app-tooltip", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "lib-tooltip", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/tooltip/tooltip.directive.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+export declare class TooltipDirective {
+    private overlay;
+    private elementRef;
+    private positionBuilder;
+    private overlayRef;
+    private longPressTimeout;
+    libTooltip: string;
+    tooltipPosition: import("@angular/core").InputSignal<"bottom" | "top" | "left" | "right" | "before" | "after">;
+    constructor();
+    private showTooltip;
+    private hideTooltip;
+    private getPosition;
+    private isTouch;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[libTooltip]", never, { "libTooltip": { "alias": "libTooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/fesm2022/vallift-ngl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, viewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, effect, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { retry, throwError, Subject, debounceTime, fromEvent, filter as filter$1, take, of } from 'rxjs';
@@ -8,11 +8,11 @@ import * as i1 from '@angular/forms';
 import { FormControl, NgControl, FormGroupDirective, FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
-import { Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { NgClass, DOCUMENT, NgStyle, CommonModule, DatePipe } from '@angular/common';
 import { SvgIconComponent } from 'angular-svg-icon';
-import { CdkPortal } from '@angular/cdk/portal';
+import { CdkPortal, ComponentPortal } from '@angular/cdk/portal';
 import { NgxMaskDirective } from 'ngx-mask';
 import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import * as i2 from '@angular/platform-browser';
@@ -2746,13 +2746,6 @@ class TextInputComponent extends BaseControlValueAccessor {
     isFocused = signal(false);
     ngControl = inject(NgControl, { optional: true, self: true });
     searchSubject = new Subject();
-    get placeholderSizeClass() {
-        return {
-            'placeholder-small': this.size() === 'small',
-            'placeholder-medium': this.size() === 'medium',
-            'placeholder-large': this.size() === 'large',
-        };
-    }
     constructor() {
         super();
         if (this.ngControl) {
@@ -2823,7 +2816,7 @@ class TextInputComponent extends BaseControlValueAccessor {
         this.isFocused.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"[getClass(), {\n      'placeholder:text-xs': size() === 'small',\n      'placeholder:text-base': size() === 'medium',\n      'placeholder:text-lg': size() === 'large'\n    }]\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -2835,7 +2828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CommonModule,
                         BaseInputComponent,
                         NgxMaskDirective
-                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"[getClass(), {\n      'placeholder:text-xs': size() === 'small',\n      'placeholder:text-base': size() === 'medium',\n      'placeholder:text-lg': size() === 'large'\n    }]\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
+                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
@@ -3596,42 +3589,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster fixed top-1 right-1 px-3 py-2\">\n  @for (toast of currentToasts; track toast; let i = $index) {\n    <div>\n      <app-toast\n        [type]=\"toast.type\"\n        [title]=\"toast.title\"\n        [message]=\"toast.message\"\n        [duration]=\"toast.duration\"\n        (disposeEvent)=\"dispose(i)\"\n        [themeType]=\"toast.themeType ?? 'light'\"\n      ></app-toast>\n    </div>\n  }\n</div>\n", styles: [".toaster{z-index:2000}\n"] }]
         }], ctorParameters: () => [{ type: ToastService }, { type: i0.ChangeDetectorRef }] });
 
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition["ABOVE"] = "above";
-    TooltipPosition["BELOW"] = "below";
-    TooltipPosition["LEFT"] = "left";
-    TooltipPosition["RIGHT"] = "right";
-    TooltipPosition["DYNAMIC"] = "dynamic";
-    TooltipPosition["DEFAULT"] = "above";
-})(TooltipPosition || (TooltipPosition = {}));
-var TooltipTheme;
-(function (TooltipTheme) {
-    TooltipTheme["DARK"] = "dark";
-    TooltipTheme["LIGHT"] = "light";
-    TooltipTheme["DEFAULT"] = "dark";
-})(TooltipTheme || (TooltipTheme = {}));
-
 class TooltipComponent {
-    tooltipPosition = TooltipPosition.DEFAULT;
-    tooltipTheme = TooltipTheme.DEFAULT;
-    tooltip = '';
-    left = 0;
-    top = 0;
-    visible = false;
-    constructor() {
-    }
-    ngOnInit() {
-    }
+    text = '';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", ngImport: i0, template: "<div class=\"tooltip\"\n     [ngClass]=\"['tooltip--'+tooltipPosition, 'tooltip--'+tooltipTheme]\"\n     [class.tooltip--visible]=\"visible\"\n     [style.left]=\"left + 'px'\"\n     [style.top]=\"top + 'px'\">\n  {{tooltip}}\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;font-size:13px;opacity:0;z-index:100000}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-top:-7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\">\n  {{ text }}\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tooltip', standalone: true, imports: [
-                        NgClass
-                    ], template: "<div class=\"tooltip\"\n     [ngClass]=\"['tooltip--'+tooltipPosition, 'tooltip--'+tooltipTheme]\"\n     [class.tooltip--visible]=\"visible\"\n     [style.left]=\"left + 'px'\"\n     [style.top]=\"top + 'px'\">\n  {{tooltip}}\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;font-size:13px;opacity:0;z-index:100000}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-top:-7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'lib-tooltip', imports: [], template: "<div class=\"bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\">\n  {{ text }}\n</div>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class TooltipDirective {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    positionBuilder = inject(OverlayPositionBuilder);
+    overlayRef = null;
+    longPressTimeout = null;
+    // tooltipText = input<string>('');
+    libTooltip = '';
+    tooltipPosition = input('bottom');
+    constructor() {
+        effect(() => {
+            this.hideTooltip();
+        });
+    }
+    showTooltip() {
+        if (this.overlayRef?.hasAttached())
+            return;
+        const position = this.getPosition(this.tooltipPosition());
+        const positionStrategy = this.positionBuilder
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions([position]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const tooltipPortal = new ComponentPortal(TooltipComponent);
+        const tooltipRef = this.overlayRef.attach(tooltipPortal);
+        tooltipRef.instance.text = this.libTooltip;
+    }
+    hideTooltip() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+    }
+    getPosition(position) {
+        switch (position) {
+            case 'bottom':
+                return {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'top',
+                    offsetY: 8,
+                };
+            case 'left':
+            case 'before':
+                return {
+                    originX: 'start',
+                    originY: 'center',
+                    overlayX: 'end',
+                    overlayY: 'center',
+                    offsetX: -8,
+                };
+            case 'right':
+            case 'after':
+                return {
+                    originX: 'end',
+                    originY: 'center',
+                    overlayX: 'start',
+                    overlayY: 'center',
+                    offsetX: 8,
+                };
+            default: // 'top'
+                return {
+                    originX: 'center',
+                    originY: 'top',
+                    overlayX: 'center',
+                    overlayY: 'bottom',
+                    offsetY: -8,
+                };
+        }
+    }
+    isTouch() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+    // 👉 Hover for desktop
+    onMouseEnter() {
+        if (!this.isTouch()) {
+            this.showTooltip();
+        }
+    }
+    onMouseLeave() {
+        if (!this.isTouch()) {
+            this.hideTooltip();
+        }
+    }
+    // 👉 Long press for mobile
+    onTouchStart() {
+        if (this.isTouch()) {
+            this.longPressTimeout = setTimeout(() => {
+                this.showTooltip();
+            }, 500);
+        }
+    }
+    onTouchEnd() {
+        if (this.longPressTimeout) {
+            clearTimeout(this.longPressTimeout);
+            this.longPressTimeout = null;
+        }
+        this.hideTooltip();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: { classPropertyName: "libTooltip", publicName: "libTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libTooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { libTooltip: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart']
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend']
+            }, {
+                type: HostListener,
+                args: ['touchcancel']
+            }] } });
 
 class ClickOutsideDirective {
     clickOutside = new EventEmitter();
@@ -6488,5 +6585,5 @@ function provideNglConfig(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
 //# sourceMappingURL=vallift-ngl.mjs.map