tailjng 0.0.56 → 0.0.57

package/cli/settings/components-list.js

@@ -14,6 +14,10 @@ function getComponentList() {
             path: "src/lib/components/tooltip",
             dependencies: [],
         },
+        'coach-mark': {
+            path: "src/lib/components/coach-mark",
+            dependencies: [],
+        },
         'badge': {
             path: "src/lib/components/badge",
             dependencies: ["tooltip"],

package/cli/settings/header-generator.js

@@ -27,7 +27,7 @@ Authors:
 License:
   This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
 
-Version: 0.0.56
+Version: 0.0.57
 Creation Date: 2025-01-04
 ===============================================`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/src/lib/components/coach-mark/coach-mark.component.html

@@ -0,0 +1,36 @@
+@if (spotlight) {
+  <div
+    class="j-spotlight fixed pointer-events-none border-2 border-white/90 transition-all duration-150 ease-out"
+    [ngStyle]="{
+      top: targetTop + 'px',
+      left: targetLeft + 'px',
+      width: targetWidth + 'px',
+      height: targetHeight + 'px',
+      borderRadius: targetRadius,
+      zIndex: zIndex - 1,
+    }"
+  ></div>
+}
+
+<div
+  class="j-coach-card fixed rounded-2xl border border-slate-400/25 bg-white p-3.5 text-slate-900 shadow-2xl"
+  [ngStyle]="{
+    top: cardTop + 'px',
+    left: cardLeft + 'px',
+    width: width,
+    maxWidth: maxWidth,
+    zIndex: zIndex,
+  }"
+>
+  @if (contentTemplate) {
+    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+  } @else {
+    <div class="mb-1 text-sm font-bold">
+      {{ title }}
+    </div>
+
+    <div class="text-[13px] leading-relaxed opacity-80">
+      {{ description }}
+    </div>
+  }
+</div>

package/src/lib/components/coach-mark/coach-mark.component.scss

@@ -0,0 +1,20 @@
+.j-spotlight {
+  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.68);
+}
+
+.j-coach-card {
+  animation: coachIn 0.14s ease-out;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
+}
+
+@keyframes coachIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/lib/components/coach-mark/coach-mark.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+
+type CoachPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom';
+
+@Component({
+  selector: 'JCoachMarkOverlay',
+  imports: [CommonModule],
+  templateUrl: './coach-mark.component.html',
+  styleUrl: './coach-mark.component.scss'
+})
+export class JCoachMarkComponent {
+  @Input() title = '';
+  @Input() description = '';
+  @Input() contentTemplate?: TemplateRef<unknown>;
+
+  @Input() spotlight = true;
+
+  @Input() cardTop = 0;
+  @Input() cardLeft = 0;
+
+  @Input() targetTop = 0;
+  @Input() targetLeft = 0;
+  @Input() targetWidth = 0;
+  @Input() targetHeight = 0;
+  @Input() targetRadius = '12px';
+
+  @Input() position: CoachPosition = 'bottom';
+
+  @Input() width = '300px';
+  @Input() maxWidth = '340px';
+  @Input() zIndex = 99999;
+}

package/src/lib/components/coach-mark/coach-mark.directive.ts

@@ -0,0 +1,256 @@
+import {
+    ApplicationRef,
+    ComponentRef,
+    Directive,
+    ElementRef,
+    EnvironmentInjector,
+    HostListener,
+    Input,
+    OnDestroy,
+    TemplateRef,
+    createComponent
+} from '@angular/core';
+
+import { JCoachMarkComponent } from './coach-mark.component';
+
+type CoachTrigger = 'hover' | 'click';
+type CoachPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom';
+
+@Directive({
+    selector: '[jCoachMark]',
+    standalone: true
+})
+export class JCoachMarkDirective implements OnDestroy {
+    @Input() coachTitle = '';
+    @Input() coachDescription = '';
+    @Input() coachContent?: TemplateRef<unknown>;
+
+    @Input() coachTrigger: CoachTrigger = 'click';
+    @Input() coachPosition: CoachPosition = 'bottom';
+
+    @Input() coachSpotlight = true;
+    @Input() coachDisabled = false;
+
+    @Input() coachWidth = '300px';
+    @Input() coachMaxWidth = '340px';
+    @Input() coachOffset = 12;
+    @Input() coachRadius = '12px';
+
+    private overlayRef?: ComponentRef<JCoachMarkComponent>;
+    private isOpen = false;
+
+    private scrollHandler = () => this.updatePosition();
+    private resizeHandler = () => this.updatePosition();
+
+    constructor(
+        private elementRef: ElementRef<HTMLElement>,
+        private appRef: ApplicationRef,
+        private injector: EnvironmentInjector
+    ) { }
+
+    @HostListener('mouseenter')
+    onMouseEnter() {
+        if (this.coachTrigger === 'hover') this.open();
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave() {
+        if (this.coachTrigger === 'hover') this.close();
+    }
+
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent) {
+        if (this.coachTrigger !== 'click') return;
+
+        event.stopPropagation();
+
+        this.isOpen ? this.close() : this.open();
+
+        setTimeout(() => {
+            document.addEventListener('click', this.documentClickHandler);
+        });
+    }
+
+    private documentClickHandler = (event: MouseEvent) => {
+        const host = this.elementRef.nativeElement;
+
+        if (!host.contains(event.target as Node)) {
+            this.close();
+        }
+    };
+
+    private open() {
+        if (this.coachDisabled) return;
+        if (this.overlayRef) return;
+
+        this.overlayRef = createComponent(JCoachMarkComponent, {
+            environmentInjector: this.injector
+        });
+
+        this.overlayRef.instance.title = this.coachTitle;
+        this.overlayRef.instance.description = this.coachDescription;
+        this.overlayRef.instance.contentTemplate = this.coachContent;
+
+        this.overlayRef.instance.spotlight = this.coachSpotlight;
+        this.overlayRef.instance.position = this.coachPosition;
+
+        this.overlayRef.instance.width = this.coachWidth;
+        this.overlayRef.instance.maxWidth = this.coachMaxWidth;
+        this.overlayRef.instance.targetRadius = this.coachRadius;
+
+        this.appRef.attachView(this.overlayRef.hostView);
+
+        document.body.appendChild(
+            this.overlayRef.location.nativeElement
+        );
+
+        this.isOpen = true;
+
+        requestAnimationFrame(() => this.updatePosition());
+
+        window.addEventListener('scroll', this.scrollHandler, true);
+        window.addEventListener('resize', this.resizeHandler);
+    }
+
+    private updatePosition() {
+        if (!this.overlayRef) return;
+
+        const host = this.elementRef.nativeElement;
+        const rect = host.getBoundingClientRect();
+
+        const cardElement = this.overlayRef.location.nativeElement
+            .querySelector('.j-coach-card') as HTMLElement;
+
+        if (!cardElement) return;
+
+        const cardRect = cardElement.getBoundingClientRect();
+
+        let cardTop = 0;
+        let cardLeft = 0;
+
+        const position = this.coachPosition;
+
+        const alignCenterX = rect.left + rect.width / 2 - cardRect.width / 2;
+        const alignLeft = rect.left;
+        const alignRight = rect.right - cardRect.width;
+
+        const alignCenterY = rect.top + rect.height / 2 - cardRect.height / 2;
+        const alignTop = rect.top;
+        const alignBottom = rect.bottom - cardRect.height;
+
+        switch (position) {
+            case 'top':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignCenterX;
+                break;
+
+            case 'top-left':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignLeft;
+                break;
+
+            case 'top-right':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignRight;
+                break;
+
+            case 'bottom':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignCenterX;
+                break;
+
+            case 'bottom-left':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignLeft;
+                break;
+
+            case 'bottom-right':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignRight;
+                break;
+
+            case 'left':
+                cardTop = alignCenterY;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'left-top':
+                cardTop = alignTop;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'left-bottom':
+                cardTop = alignBottom;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'right':
+                cardTop = alignCenterY;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+
+            case 'right-top':
+                cardTop = alignTop;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+
+            case 'right-bottom':
+                cardTop = alignBottom;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+        }
+
+        const margin = 10;
+
+        cardLeft = Math.max(margin, cardLeft);
+        cardTop = Math.max(margin, cardTop);
+
+        if (cardLeft + cardRect.width > window.innerWidth - margin) {
+            cardLeft = window.innerWidth - cardRect.width - margin;
+        }
+
+        if (cardTop + cardRect.height > window.innerHeight - margin) {
+            cardTop = window.innerHeight - cardRect.height - margin;
+        }
+
+        this.overlayRef.instance.targetTop = rect.top;
+        this.overlayRef.instance.targetLeft = rect.left;
+        this.overlayRef.instance.targetWidth = rect.width;
+        this.overlayRef.instance.targetHeight = rect.height;
+
+        this.overlayRef.instance.cardTop = cardTop;
+        this.overlayRef.instance.cardLeft = cardLeft;
+
+        this.overlayRef.changeDetectorRef.detectChanges();
+    }
+
+    private close() {
+        this.isOpen = false;
+
+        document.removeEventListener('click', this.documentClickHandler);
+        window.removeEventListener('scroll', this.scrollHandler, true);
+        window.removeEventListener('resize', this.resizeHandler);
+
+        if (!this.overlayRef) return;
+
+        this.appRef.detachView(this.overlayRef.hostView);
+        this.overlayRef.destroy();
+        this.overlayRef = undefined;
+    }
+
+    ngOnDestroy() {
+        this.close();
+    }
+}

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -9,7 +9,7 @@
           type="text"
           [(ngModel)]="searchQuery"
           [placeholder]="searchPlaceholder"
-          class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary"
+          class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
         />
 
         <div

package/src/lib/components/form/form-validation/validation-form.component.html

@@ -1,5 +1,5 @@
 @if (hasErrors) {
-  <div class="flex flex-col text-red-600 dark:text-red-300 text-sm">
+  <div class="flex flex-col text-red-600 dark:text-red-300 text-[12px]">
       @for (message of errors; track $index) {
         <span [class]="classes">{{ message }}</span>
       }

package/src/lib/components/input/input/input.component.html

@@ -11,7 +11,7 @@
         (blur)="onTouched()"
         [ngClass]="combinedNgClass"
         [class]="classes"
-        class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200" 
+        class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed" 
     />
 
     @if (value && clearButton) {

package/src/lib/components/input/input-file/file-input.component.html

@@ -15,13 +15,13 @@
   
   <label    
     [for]="id"    
-    class="input block text-sm dark:text-gray-400 w-full h-[40px] pr-1 bg-background dark:bg-dark-background border border-border dark:border-dark-border flex items-center justify-between text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200 cursor-pointer"
+    class="input block text-sm w-full h-[40px] pr-1 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground dark:placeholder:text-dark-muted-foreground rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-between transition duration-200 cursor-pointer"
   >    
-    <div class="truncate" [ngClass]="{ 'opacity-50' : !innerValue?.name }">    
+    <div class="truncate" [ngClass]="{ 'opacity-80' : !innerValue?.name }">    
       @if (innerValue?.name) {        
         <span>{{ innerValue?.name }}</span>    
       } @else {        
-        <span class="flex items-center gap-2">        
+        <span class="flex items-center gap-2 text-muted-foreground dark:text-dark-muted-foreground">        
           <lucide-icon [name]="iconsService.icons.upload" [size]="15" />        
           Seleccionar archivo...        
         </span>    

package/src/lib/components/input/input-textarea/textarea-input.component.html

@@ -1,21 +1,25 @@
 <div class="relative w-full flex">
-    <textarea
-        [id]="id"
-        [name]="name ?? ''"
-        [placeholder]="placeholder"
-        [value]="value"
-        (input)="onInput($event)"
-        [required]="required"
-        [disabled]="disabled"
-        (blur)="onTouched()"
-        [ngClass]="combinedNgClass"
-        [class]="classes"
-        class="input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200"
-    ></textarea>
+  <textarea
+    [id]="id"
+    [name]="name ?? ''"
+    [placeholder]="placeholder"
+    [value]="value"
+    (input)="onInput($event)"
+    [required]="required"
+    [disabled]="disabled"
+    (blur)="onTouched()"
+    [ngClass]="combinedNgClass"
+    [class]="classes"
+    class="input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+  ></textarea>
 
-    @if (value && clearButton) {
-        <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer" (click)="clearInput()">
-            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
-        </button>
-    }
-</div>
+  @if (value && clearButton) {
+    <button
+      type="button"
+      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+      (click)="clearInput()"
+    >
+      <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+    </button>
+  }
+</div>

package/src/lib/components/select/select-dropdown/dropdown-select.component.html

@@ -10,7 +10,7 @@
                 ngClass: true
             }"
         >
-            <span class="truncate text-black dark:text-white" [ngClass]="{'opacity-50' : selectedValue === null}">{{selectedLabel}}</span>
+            <span class="truncate text-black dark:text-white" [ngClass]="{'opacity-70 text-muted-foreground dark:text-dark-muted-foreground' : selectedValue === null}">{{selectedLabel}}</span>
             
             <div class="flex items-center">
                 @if (showClear && selectedValue !== null) {

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.html

@@ -1,3 +1,4 @@
+
 <div class="relative w-full h-full">
   <div class="w-auto" #selectButton>
     <button
@@ -7,7 +8,7 @@
       class="flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none"
       [ngClass]="{ 'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading }"
     >
-      <span class="truncate text-black dark:text-white" [ngClass]="{ 'opacity-50': selectedValues.length === 0 }">
+      <span class="truncate text-black dark:text-white" [ngClass]="{ 'opacity-70 text-muted-foreground dark:text-dark-muted-foreground': selectedValues.length === 0 }">
         {{ displayLabel }}
       </span>