shirkasoft-ui-components 1.0.1 → 1.0.5

package/fesm2022/shirkasoft-ui-components.mjs

@@ -2681,11 +2681,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 class TooltipComponent {
     text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    mode = input('hover', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : /* istanbul ignore next */ []));
+    tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : /* istanbul ignore next */ []));
+    onMouseEnter() {
+        if (this.mode() !== 'fixed')
+            return;
+        const host = this.elementRef.nativeElement;
+        const container = host.querySelector('.group');
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const off = this.offset();
+        if (this.position() === 'right') {
+            this.tooltipX.set(rect.right + off);
+            this.tooltipY.set(rect.top + rect.height / 2);
+        }
+        else if (this.position() === 'bottom') {
+            this.tooltipX.set(rect.left + rect.width / 2);
+            this.tooltipY.set(rect.bottom + off);
+        }
+        else {
+            this.tooltipX.set(rect.left + rect.width / 2);
+            this.tooltipY.set(rect.top - off);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0, template: `
     <div class="relative group inline-flex">
       <ng-content></ng-content>
-      @if (text()) {
+      @if (text() && mode() === 'hover') {
         <span
           class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
           [class.top-full]="position() === 'bottom'"
@@ -2702,6 +2729,16 @@ class TooltipComponent {
           {{ text() }}
         </span>
       }
+      @if (text() && mode() === 'fixed') {
+        <span
+          class="fixed px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
+          [style.top.px]="tooltipY()"
+          [style.left.px]="tooltipX()"
+          [style.transform]="position() === 'right' ? 'translateY(-50%)' : ''"
+        >
+          {{ text() }}
+        </span>
+      }
     </div>
   `, isInline: true });
 }
@@ -2713,7 +2750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     template: `
     <div class="relative group inline-flex">
       <ng-content></ng-content>
-      @if (text()) {
+      @if (text() && mode() === 'hover') {
         <span
           class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
           [class.top-full]="position() === 'bottom'"
@@ -2730,10 +2767,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
           {{ text() }}
         </span>
       }
+      @if (text() && mode() === 'fixed') {
+        <span
+          class="fixed px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
+          [style.top.px]="tooltipY()"
+          [style.left.px]="tooltipX()"
+          [style.transform]="position() === 'right' ? 'translateY(-50%)' : ''"
+        >
+          {{ text() }}
+        </span>
+      }
     </div>
   `,
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
 
 /* Theme — import theme.css in your global styles.css:
    @import '@shirkasoft/ui-components/theme.css';