@mcp-elements/angular 0.1.0

package/src/toast.component.ts

@@ -0,0 +1,62 @@
+import { Component, Injectable, signal } from '@angular/core'
+
+export interface ToastData {
+  id: string
+  title?: string
+  description?: string
+  variant?: 'default' | 'destructive' | 'success'
+}
+
+@Injectable({ providedIn: 'root' })
+export class SnxToastService {
+  toasts = signal<ToastData[]>([])
+  private counter = 0
+
+  show(toast: Omit<ToastData, 'id'>, duration = 5000): string {
+    const id = `toast-${++this.counter}`
+    this.toasts.update(t => [...t, { id, ...toast }])
+    if (duration > 0) {
+      setTimeout(() => this.dismiss(id), duration)
+    }
+    return id
+  }
+
+  success(title: string, description?: string) {
+    return this.show({ title, description, variant: 'success' })
+  }
+
+  error(title: string, description?: string) {
+    return this.show({ title, description, variant: 'destructive' })
+  }
+
+  dismiss(id: string) {
+    this.toasts.update(t => t.filter(x => x.id !== id))
+  }
+}
+
+@Component({
+  selector: 'mcpe-toaster',
+  standalone: true,
+  template: `
+    <div class="mcpe-toaster mcpe-toaster-bottom-right">
+      @for (t of toastService.toasts(); track t.id) {
+        <div
+          [class]="'mcpe-toast group' + (t.variant === 'destructive' ? ' mcpe-toast-destructive' : '') + (t.variant === 'success' ? ' mcpe-toast-success' : '')"
+        >
+          <div class="flex-1">
+            @if (t.title) { <div class="mcpe-toast-title">{{ t.title }}</div> }
+            @if (t.description) { <div class="mcpe-toast-description">{{ t.description }}</div> }
+          </div>
+          <button class="mcpe-toast-close" (click)="toastService.dismiss(t.id)" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+      }
+    </div>
+  `,
+})
+export class SnxToasterComponent {
+  constructor(public toastService: SnxToastService) {}
+}

package/src/tooltip.directive.ts

@@ -0,0 +1,63 @@
+import { Directive, input, HostListener, ElementRef, Renderer2, OnDestroy } from '@angular/core'
+
+@Directive({
+  selector: '[mcpeTooltip]',
+  standalone: true,
+})
+export class SnxTooltipDirective implements OnDestroy {
+  mcpeTooltip = input<string>('')
+  tooltipDelay = input(700)
+
+  private tooltipEl: HTMLElement | null = null
+  private timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('mouseenter')
+  @HostListener('focus')
+  onShow() {
+    this.clearDelay()
+    this.timeoutId = setTimeout(() => this.show(), this.tooltipDelay())
+  }
+
+  @HostListener('mouseleave')
+  @HostListener('blur')
+  onHide() {
+    this.clearDelay()
+    this.hide()
+  }
+
+  private show() {
+    if (this.tooltipEl) return
+    this.tooltipEl = this.renderer.createElement('div')
+    this.renderer.addClass(this.tooltipEl, 'mcpe-tooltip-content')
+    this.renderer.setStyle(this.tooltipEl, 'position', 'absolute')
+    this.renderer.setStyle(this.tooltipEl, 'bottom', '100%')
+    this.renderer.setStyle(this.tooltipEl, 'left', '50%')
+    this.renderer.setStyle(this.tooltipEl, 'transform', 'translateX(-50%)')
+    this.renderer.setStyle(this.tooltipEl, 'margin-bottom', '0.5rem')
+    const text = this.renderer.createText(this.mcpeTooltip())
+    this.renderer.appendChild(this.tooltipEl, text)
+    this.renderer.setStyle(this.el.nativeElement, 'position', 'relative')
+    this.renderer.appendChild(this.el.nativeElement, this.tooltipEl)
+  }
+
+  private hide() {
+    if (this.tooltipEl) {
+      this.renderer.removeChild(this.el.nativeElement, this.tooltipEl)
+      this.tooltipEl = null
+    }
+  }
+
+  private clearDelay() {
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+  }
+
+  ngOnDestroy() {
+    this.clearDelay()
+    this.hide()
+  }
+}