tailjng 0.1.6 → 0.1.7

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

@@ -1,63 +1,93 @@
 import {
-  Directive,
-  ElementRef,
-  Input,
-  HostListener,
   ApplicationRef,
   ComponentRef,
-  EnvironmentInjector,
   createComponent,
-  TemplateRef
+  Directive,
+  ElementRef,
+  EnvironmentInjector,
+  HostListener,
+  Input,
+  OnDestroy,
+  TemplateRef,
 } from '@angular/core';
 import { JCoachMarkComponent } from './coach-mark.component';
-
-// Define CoachPosition localmente para coincidir con los valores de posición permitidos
-type CoachPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
+import { CoachPosition, CoachTrigger } from './coach-mark.types';
+
+export type { CoachPosition, CoachTrigger } from './coach-mark.types';
+
+/**
+ * Contextual coach mark directive on the host element.
+ *
+ * Usage:
+ * ```html
+ * <JButton
+ *   jCoachMark
+ *   coachTitle="First step"
+ *   coachDescription="Click here to get started"
+ *   coachPosition="bottom"
+ * />
+ * ```
+ */
 @Directive({
-  selector: '[jCoachMark]'
+  selector: '[jCoachMark]',
 })
-export class JCoachMarkDirective {
-  @Input() coachTitle: string = '';
-  @Input() coachDescription: string = '';
-  @Input() coachContent: any;
+export class JCoachMarkDirective implements OnDestroy {
+  // Card title text
+  @Input() coachTitle = '';
+
+  // Card description text
+  @Input() coachDescription = '';
+
+  // Alternate template (takes priority over title + description)
+  @Input() coachContent?: TemplateRef<unknown>;
+
+  // Alias for coachContent
   @Input() contentTemplate?: TemplateRef<unknown>;
 
-  @Input() coachTrigger: 'click' | 'hover' = 'click'; // 'click' o 'hover'
-  @Input() coachPosition: CoachPosition = 'bottom'; // Posición del coach
-  @Input() coachSpotlight: boolean = true;
-  @Input() coachDisabled: boolean = false;
+  // click = toggle on host click; hover = open on mouse enter
+  @Input() coachTrigger: CoachTrigger = 'click';
+
+  // Card position relative to the host
+  @Input() coachPosition: CoachPosition = 'bottom';
+
+  // true = spotlight cutout over the host
+  @Input() coachSpotlight = true;
+
+  // true = do not open the overlay
+  @Input() coachDisabled = false;
 
-  @Input() coachWidth: string = '300px';
-  @Input() coachMaxWidth: string = '340px';
+  @Input() coachWidth = '300px';
+  @Input() coachMaxWidth = '340px';
   @Input() coachHeight: string | null = null;
   @Input() coachMaxHeight: string | null = null;
-  @Input() coachRadius: string = '12px';
-  @Input() coachOffset: number = 12; // Desplazamiento para la posición
 
-  @Input() isDescriptionFormatted: boolean = false;
+  // Spotlight border-radius
+  @Input() coachRadius = '12px';
+
+  // Gap in px between host and card
+  @Input() coachOffset = 12;
+
+  // true = preserve line breaks in description (<pre>)
+  @Input() isDescriptionFormatted = false;
 
   private overlayRef: ComponentRef<JCoachMarkComponent> | null = null;
   private isOpen = false;
 
   constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    private appRef: ApplicationRef,
-    private injector: EnvironmentInjector
-  ) { }
-
-  // Agregamos un HostListener para capturar el evento click y abrir el CoachMark
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly appRef: ApplicationRef,
+    private readonly injector: EnvironmentInjector,
+  ) {}
+
+  /**
+   * Toggles the overlay when `coachTrigger` is `click`.
+   * @param event Host click event.
+   */
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
-    if (this.coachTrigger !== 'click') return;
+    if (this.coachTrigger !== 'click') {
+      return;
+    }
 
     event.stopPropagation();
     this.isOpen ? this.close() : this.open();
@@ -67,24 +97,34 @@ export class JCoachMarkDirective {
     });
   }
 
+  /** Opens the overlay on mouse enter when `coachTrigger` is `hover`. */
   @HostListener('mouseenter')
   onMouseEnter() {
-    if (this.coachTrigger === 'hover') this.open();
+    if (this.coachTrigger === 'hover') {
+      this.open();
+    }
   }
 
+  /** Closes the overlay on mouse leave when `coachTrigger` is `hover`. */
   @HostListener('mouseleave')
   onMouseLeave() {
-    if (this.coachTrigger === 'hover') this.close();
+    if (this.coachTrigger === 'hover') {
+      this.close();
+    }
   }
 
+  /**
+   * Closes when clicking outside the host, card, or an open alert dialog.
+   * @param event Document click event.
+   */
   private documentClickHandler = (event: MouseEvent) => {
     const host = this.elementRef.nativeElement;
     const cardElement = this.overlayRef?.location.nativeElement.querySelector(
-      '.j-coach-card'
+      '.j-coach-card',
     ) as HTMLElement | null;
 
     const alertDialogElement = document.querySelector(
-      '.j-alert-dialog'
+      '.j-alert-dialog',
     ) as HTMLElement | null;
 
     const target = event.target as Node;
@@ -98,30 +138,32 @@ export class JCoachMarkDirective {
     }
   };
 
+  /**
+   * Creates and attaches the overlay to `document.body`.
+   */
   private open() {
-    if (this.coachDisabled) return;
-    if (this.overlayRef) return;
+    if (this.coachDisabled || this.overlayRef) {
+      return;
+    }
 
-    // Crear el componente overlay de forma dinámica
     this.overlayRef = createComponent(JCoachMarkComponent, {
-      environmentInjector: this.injector
+      environmentInjector: this.injector,
     });
 
-    this.overlayRef.instance.title = this.coachTitle;
-    this.overlayRef.instance.description = this.coachDescription;
-    this.overlayRef.instance.contentTemplate = this.coachContent || this.contentTemplate;
-
-    this.overlayRef.instance.spotlight = this.coachSpotlight;
-    this.overlayRef.instance.position = this.coachPosition;
-    this.overlayRef.instance.isDescriptionFormatted = this.isDescriptionFormatted;
-    this.overlayRef.instance.width = this.coachWidth;
-    this.overlayRef.instance.maxWidth = this.coachMaxWidth;
-    this.overlayRef.instance.height = this.coachHeight;
-    this.overlayRef.instance.maxHeight = this.coachMaxHeight;
-    this.overlayRef.instance.targetRadius = this.coachRadius;
+    const instance = this.overlayRef.instance;
+    instance.title = this.coachTitle;
+    instance.description = this.coachDescription;
+    instance.contentTemplate = this.coachContent ?? this.contentTemplate;
+    instance.spotlight = this.coachSpotlight;
+    instance.position = this.coachPosition;
+    instance.isDescriptionFormatted = this.isDescriptionFormatted;
+    instance.width = this.coachWidth;
+    instance.maxWidth = this.coachMaxWidth;
+    instance.height = this.coachHeight;
+    instance.maxHeight = this.coachMaxHeight;
+    instance.targetRadius = this.coachRadius;
 
     this.appRef.attachView(this.overlayRef.hostView);
-
     document.body.appendChild(this.overlayRef.location.nativeElement);
 
     this.isOpen = true;
@@ -132,28 +174,34 @@ export class JCoachMarkDirective {
     window.addEventListener('resize', this.resizeHandler);
   }
 
+  /**
+   * Recalculates spotlight and card position from the host rect.
+   */
   private updatePosition() {
-    if (!this.overlayRef) return;
+    if (!this.overlayRef) {
+      return;
+    }
 
     const host = this.elementRef.nativeElement;
-    const rect = host.getBoundingClientRect(); // Obtener las coordenadas del elemento
+    const rect = host.getBoundingClientRect();
+
+    const cardElement = this.overlayRef.location.nativeElement.querySelector(
+      '.j-coach-card',
+    ) as HTMLElement | null;
 
-    const cardElement = this.overlayRef.location.nativeElement.querySelector('.j-coach-card') as HTMLElement;
-    if (!cardElement) return;
+    if (!cardElement) {
+      return;
+    }
 
     const cardRect = cardElement.getBoundingClientRect();
 
     let cardTop = 0;
     let cardLeft = 0;
 
-    // Cálculo de la posición
     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 (this.coachPosition) {
       case 'top':
@@ -203,17 +251,20 @@ export class JCoachMarkDirective {
       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;
+    const instance = this.overlayRef.instance;
+    instance.targetTop = rect.top;
+    instance.targetLeft = rect.left;
+    instance.targetWidth = rect.width;
+    instance.targetHeight = rect.height;
+    instance.cardTop = cardTop;
+    instance.cardLeft = cardLeft;
 
     this.overlayRef.changeDetectorRef.detectChanges();
   }
 
+  /**
+   * Destroys the overlay and removes global listeners.
+   */
   private close() {
     this.isOpen = false;
 
@@ -221,23 +272,27 @@ export class JCoachMarkDirective {
     window.removeEventListener('scroll', this.scrollHandler, true);
     window.removeEventListener('resize', this.resizeHandler);
 
-    if (!this.overlayRef) return;
+    if (!this.overlayRef) {
+      return;
+    }
 
     this.appRef.detachView(this.overlayRef.hostView);
     this.overlayRef.destroy();
     this.overlayRef = null;
   }
 
-  // Scroll y resize handlers
+  /** Repositions on scroll (capture phase). */
   private scrollHandler = () => {
     this.updatePosition();
   };
 
+  /** Repositions on window resize. */
   private resizeHandler = () => {
     this.updatePosition();
   };
 
+  /** Closes the overlay when the host is destroyed. */
   ngOnDestroy() {
     this.close();
   }
-}
+}

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

@@ -0,0 +1,12 @@
+/** Positions supported by {@link JCoachMarkDirective} and {@link JCoachMarkComponent}. */
+export type CoachPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'right';
+
+export type CoachTrigger = 'click' | 'hover';

package/src/lib/components/dialog/dialog.component.css

@@ -5,4 +5,106 @@
   max-height: 100vh;
   margin: 0 !important;
   border-radius: 0;
-}
+}
+
+.jdialog-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3.25rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-muted) 28%, var(--color-background)) 0%,
+    var(--color-background) 100%
+  );
+  user-select: none;
+}
+
+:host-context(.dark) .jdialog-header,
+:host-context(html.dark) .jdialog-header {
+  border-bottom-color: var(--color-dark-border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-dark-muted) 35%, var(--color-dark-background)) 0%,
+    var(--color-dark-background) 100%
+  );
+}
+
+.jdialog-header--draggable {
+  cursor: move;
+}
+
+.jdialog-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .jdialog-title,
+:host-context(html.dark) .jdialog-title {
+  color: var(--color-dark-foreground);
+}
+
+.jdialog-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 2rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--color-muted-foreground);
+  line-height: 0;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.jdialog-close:hover {
+  color: var(--color-foreground);
+  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
+}
+
+.jdialog-close:active {
+  transform: scale(0.94);
+}
+
+.jdialog-close:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+:host-context(.dark) .jdialog-close,
+:host-context(html.dark) .jdialog-close {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .jdialog-close:hover,
+:host-context(html.dark) .jdialog-close:hover {
+  color: var(--color-dark-foreground);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
+}
+
+.jdialog-close JIcon,
+.jdialog-close svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.jdialog-content {
+  padding: 1rem;
+}

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

@@ -1,73 +1,53 @@
 @if (openModal) {
+  @if (overlay) {
+    <div class="fixed inset-0 z-[999] bg-black/50 backdrop-blur-[1px]" aria-hidden="true"></div>
+  }
 
-    <!-- Overlay -->
-    @if (overlay) {
-      <div class="fixed inset-0 z-[999] bg-black/50"></div>
-    }
-
-    <!-- Modal -->
-    <div class="fixed inset-0 z-[1000] flex pointer-events-none" [ngClass]="getPositionClass()">
-
-    <div @modalTransition
-        class="pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border"
-        [ngStyle]="getOffsetStyles()"
-        [style.width]="getModalWidth()"
-        [style.min-width]="!isFullScreen() ? '200px' : null"
-        [style.min-height]="!isFullScreen() ? '40px' : null"
-        data-draggable-dialog
+  <div
+    class="fixed inset-0 z-[1000] flex pointer-events-none"
+    [ngClass]="positionClass"
+    role="dialog"
+    [attr.aria-modal]="true"
+    [attr.aria-label]="title"
+  >
+    <div
+      @modalTransition
+      data-draggable-dialog
+      class="jdialog-panel"
+      [ngClass]="panelClasses"
+      [ngStyle]="offsetStyles"
+      [style.width]="modalWidth"
+      [style.min-width]="!isFullScreen ? '200px' : null"
+      [style.min-height]="!isFullScreen ? '40px' : null"
     >
-        <!-- Header draggable -->
-        @if (draggable) {
-          <div
-            class="flex items-center p-1 pl-4 pr-4 gap-2 bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-[10px] font-semibold text-2sm cursor-move select-none"
-            (mousedown)="$event.stopPropagation(); startDrag($event)"
-          >
-            <h3
-              class="flex-1 min-w-0 text-[1em] font-semibold text-white leading-none truncate"
-            >
-              {{ title }}
-            </h3>
-
-            <button
-              type="button"
-              (click)="$event.stopPropagation(); onClose()"
-              class="flex-shrink-0 p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
-            >
-              <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-            </button>
-          </div>
-        }
-
-
-        <!-- Header normal -->
-        @if (!draggable) {
-          <div class="flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-normal select-none">
-            <h3 class="text-[1em] font-semibold text-white leading-none">{{ title }}</h3>
-            <button
-              type="button"
-              (click)="onClose()"
-              class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
-            >
-              <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-            </button>
-          </div>
-        }
-
-        <!-- Content -->
-        <div class="m-2"
-            [ngClass]="{ 'jdialog-full': isFullScreen() }"
-            [ngStyle]="{
-                height: getModalHeight()
-            }"
+      <div
+        class="jdialog-header"
+        [class.jdialog-header--draggable]="draggable"
+        (mousedown)="draggable && startDrag($event)"
+      >
+        <h3 class="jdialog-title">
+          {{ title }}
+        </h3>
+
+        <button
+          type="button"
+          class="jdialog-close"
+          (click)="$event.stopPropagation(); onClose()"
+          aria-label="Cerrar"
         >
-          @if (dialogTemplate) {
-            <ng-container [ngTemplateOutlet]="dialogTemplate"></ng-container>
-          }
-        </div>
-
-
+          <JIcon [icon]="Icons.X" [size]="18" [inheritParentColor]="true" [ariaHidden]="true" />
+        </button>
       </div>
 
+      <div
+        class="jdialog-content"
+        [ngClass]="contentClasses"
+        [ngStyle]="{ height: modalHeight }"
+      >
+        @if (dialogTemplate) {
+          <ng-container [ngTemplateOutlet]="dialogTemplate" />
+        }
+      </div>
     </div>
-
-  }
+  </div>
+}