@vallift/ngl 0.0.20 → 0.0.22

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/context-menu-button/context-menu-button.component.d.ts

@@ -7,7 +7,7 @@ export declare class ContextMenuButtonComponent implements OnDestroy {
     overlay: Overlay;
     dialog: Dialog;
     actions: import("@angular/core").InputSignal<ContextMenuButtonAction[] | undefined>;
-    positionPreference: import("@angular/core").InputSignal<"topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom" | "center">;
+    positionPreference: import("@angular/core").InputSignal<"center" | "topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom">;
     onActionClicked: import("@angular/core").OutputEmitterRef<string>;
     private basePanelClass;
     private dialogRef?;

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,9 @@
-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;
+    tooltipClass: string | string[] | Set<string> | {
+        [klass: string]: any;
+    };
     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; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,24 @@
+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<"top" | "bottom" | "left" | "right" | "before" | "after">;
+    tooltipClass: import("@angular/core").InputSignal<string | Set<string> | string[] | {
+        [klass: string]: any;
+    }>;
+    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; }; "tooltipClass": { "alias": "tooltipClass"; "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';
@@ -3589,42 +3589,153 @@ 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 = '';
+    tooltipClass = [];
     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", tooltipClass: "tooltipClass" }, 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     [ngClass]=\"tooltipClass\">\n  {{ text }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tooltip', standalone: true, imports: [
+            args: [{ selector: 'lib-tooltip', 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: () => [] });
+                    ], 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     [ngClass]=\"tooltipClass\">\n  {{ text }}\n</div>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], tooltipClass: [{
+                type: Input
+            }] } });
+
+class TooltipDirective {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    positionBuilder = inject(OverlayPositionBuilder);
+    overlayRef = null;
+    longPressTimeout = null;
+    // tooltipText = input<string>('');
+    libTooltip = '';
+    tooltipPosition = input('bottom');
+    tooltipClass = input({ alias: 'tooltipClass' });
+    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;
+        tooltipRef.instance.tooltipClass = this.tooltipClass();
+    }
+    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 }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", 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();
@@ -6481,5 +6592,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