@mcp-elements/angular 0.1.0 → 0.1.2

package/src/select.component.ts

@@ -1,106 +0,0 @@
-import { Component, input, output, signal, computed, ElementRef, viewChild, HostListener } from '@angular/core'
-import { createSelect, type SelectOption } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-select',
-  standalone: true,
-  template: `
-    <div class="relative" #container>
-      <button
-        class="mcpe-select-trigger"
-        [attr.aria-expanded]="isOpen()"
-        aria-haspopup="listbox"
-        (click)="toggle()"
-        (keydown)="onKeyDown($event)"
-      >
-        <span>{{ selectedLabel() || placeholder() }}</span>
-        <svg class="h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </button>
-      @if (isOpen()) {
-        <div class="mcpe-select-content absolute top-full mt-1 w-full">
-          <div class="mcpe-select-viewport" role="listbox">
-            @for (option of options(); track option.value; let i = $index) {
-              <div
-                role="option"
-                [attr.aria-selected]="option.value === selectedValue()"
-                [attr.aria-disabled]="option.disabled"
-                [class]="getItemClasses(option, i)"
-                (click)="selectOption(option)"
-                (mouseenter)="highlightedIndex.set(i)"
-              >
-                {{ option.label }}
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    '(document:click)': 'onDocumentClick($event)',
-  },
-})
-export class SnxSelectComponent {
-  options = input<SelectOption[]>([])
-  placeholder = input('Select...')
-  valueChange = output<string>()
-
-  isOpen = signal(false)
-  selectedValue = signal<string | null>(null)
-  highlightedIndex = signal(0)
-
-  container = viewChild<ElementRef>('container')
-
-  selectedLabel = computed(() => {
-    const val = this.selectedValue()
-    return this.options().find(o => o.value === val)?.label ?? ''
-  })
-
-  toggle() { this.isOpen.update(v => !v) }
-
-  selectOption(option: SelectOption) {
-    if (option.disabled) return
-    this.selectedValue.set(option.value)
-    this.valueChange.emit(option.value)
-    this.isOpen.set(false)
-  }
-
-  getItemClasses(option: SelectOption, index: number): string {
-    return [
-      'mcpe-select-item',
-      index === this.highlightedIndex() ? 'mcpe-select-item-active' : '',
-      option.value === this.selectedValue() ? 'mcpe-select-item-selected' : '',
-    ].filter(Boolean).join(' ')
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    const opts = this.options().filter(o => !o.disabled)
-    if (event.key === 'ArrowDown') {
-      event.preventDefault()
-      if (!this.isOpen()) { this.isOpen.set(true); return }
-      this.highlightedIndex.update(i => (i + 1) % opts.length)
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault()
-      this.highlightedIndex.update(i => (i - 1 + opts.length) % opts.length)
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault()
-      if (this.isOpen()) {
-        const opt = opts[this.highlightedIndex()]
-        if (opt) this.selectOption(opt)
-      } else {
-        this.isOpen.set(true)
-      }
-    } else if (event.key === 'Escape') {
-      this.isOpen.set(false)
-    }
-  }
-
-  onDocumentClick(event: MouseEvent) {
-    const el = this.container()?.nativeElement
-    if (el && !el.contains(event.target as Node)) {
-      this.isOpen.set(false)
-    }
-  }
-}

package/src/separator.component.ts

@@ -1,15 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-separator',
-  standalone: true,
-  template: `<div [class]="classes()" role="separator" [attr.aria-orientation]="orientation()"></div>`,
-})
-export class SnxSeparatorComponent {
-  orientation = input<'horizontal' | 'vertical'>('horizontal')
-  class = input('')
-
-  classes = computed(() =>
-    ['mcpe-separator', `mcpe-separator-${this.orientation()}`, this.class()].filter(Boolean).join(' ')
-  )
-}

package/src/skeleton.component.ts

@@ -1,11 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-skeleton',
-  standalone: true,
-  template: `<div [class]="classes()"></div>`,
-})
-export class SnxSkeletonComponent {
-  class = input('')
-  classes = computed(() => ['mcpe-skeleton', this.class()].filter(Boolean).join(' '))
-}

package/src/source-card.component.ts

@@ -1,34 +0,0 @@
-import { Component, input } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-source-cards',
-  standalone: true,
-  template: `<div class="mcpe-source-cards"><ng-content /></div>`,
-})
-export class SnxSourceCardsComponent {}
-
-@Component({
-  selector: 'mcpe-source-card',
-  standalone: true,
-  template: `
-    <a [href]="href()" class="mcpe-source-card" target="_blank" rel="noopener noreferrer">
-      @if (favicon()) {
-        <img class="mcpe-source-card-favicon" [src]="favicon()" [alt]="domain()" />
-      }
-      <div class="mcpe-source-card-body">
-        <p class="mcpe-source-card-title">{{ title() }}</p>
-        <p class="mcpe-source-card-domain">{{ domain() }}</p>
-      </div>
-      @if (index()) {
-        <span class="mcpe-source-card-index">{{ index() }}</span>
-      }
-    </a>
-  `,
-})
-export class SnxSourceCardComponent {
-  href = input.required<string>()
-  favicon = input('')
-  title = input('')
-  domain = input('')
-  index = input<number | undefined>(undefined)
-}

package/src/streaming-text.component.ts

@@ -1,43 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-streaming-text',
-  standalone: true,
-  template: `<div class="mcpe-streaming-text-cursor"><ng-content /></div>`,
-})
-export class SnxStreamingTextComponent {}
-
-@Component({
-  selector: 'mcpe-streaming-text-fade-in',
-  standalone: true,
-  template: `<span class="mcpe-streaming-text-fade-in"><ng-content /></span>`,
-})
-export class SnxStreamingTextFadeInComponent {}
-
-@Component({
-  selector: 'mcpe-streaming-text-word',
-  standalone: true,
-  template: `<span class="mcpe-streaming-text-word"><ng-content /></span>`,
-})
-export class SnxStreamingTextWordComponent {}
-
-@Component({
-  selector: 'mcpe-streaming-text-line',
-  standalone: true,
-  template: `<div class="mcpe-streaming-text-line"><ng-content /></div>`,
-})
-export class SnxStreamingTextLineComponent {}
-
-@Component({
-  selector: 'mcpe-streaming-text-skeleton',
-  standalone: true,
-  template: `<div class="mcpe-streaming-text-skeleton"><ng-content /></div>`,
-})
-export class SnxStreamingTextSkeletonComponent {}
-
-@Component({
-  selector: 'mcpe-streaming-text-skeleton-line',
-  standalone: true,
-  template: `<div class="mcpe-streaming-text-skeleton-line"></div>`,
-})
-export class SnxStreamingTextSkeletonLineComponent {}

package/src/suggestion-chips.component.ts

@@ -1,23 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-type SuggestionChipVariant = 'default' | 'primary' | 'outline'
-
-@Component({
-  selector: 'mcpe-suggestion-chips',
-  standalone: true,
-  template: `<div class="mcpe-suggestion-chips"><ng-content /></div>`,
-})
-export class SnxSuggestionChipsComponent {}
-
-@Component({
-  selector: 'mcpe-suggestion-chip',
-  standalone: true,
-  template: `<button [class]="classes()" type="button"><ng-content /></button>`,
-})
-export class SnxSuggestionChipComponent {
-  variant = input<SuggestionChipVariant>('default')
-  class = input('')
-  classes = computed(() =>
-    ['mcpe-suggestion-chip', `mcpe-suggestion-chip-${this.variant()}`, this.class()].filter(Boolean).join(' ')
-  )
-}

package/src/switch.component.ts

@@ -1,32 +0,0 @@
-import { Component, input, output, signal, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-switch',
-  standalone: true,
-  template: `
-    <button
-      type="button"
-      role="switch"
-      [attr.aria-checked]="checked()"
-      [attr.aria-disabled]="disabled()"
-      [disabled]="disabled()"
-      [class]="'mcpe-switch'"
-      (click)="toggle()"
-      (keydown.space)="$event.preventDefault(); toggle()"
-      (keydown.enter)="$event.preventDefault(); toggle()"
-    >
-      <span class="mcpe-switch-thumb"></span>
-    </button>
-  `,
-})
-export class SnxSwitchComponent {
-  checked = signal(false)
-  disabled = input(false)
-  checkedChange = output<boolean>()
-
-  toggle() {
-    if (this.disabled()) return
-    this.checked.update(v => !v)
-    this.checkedChange.emit(this.checked())
-  }
-}

package/src/tabs.component.ts

@@ -1,95 +0,0 @@
-import { Component, input, output, signal, computed, effect, contentChildren, ElementRef } from '@angular/core'
-import { createTabs, type TabItem } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-tabs',
-  standalone: true,
-  template: `<div><ng-content /></div>`,
-})
-export class SnxTabsComponent {
-  items = input<TabItem[]>([])
-  defaultValue = input<string>('')
-  activeValue = signal('')
-
-  private api = computed(() =>
-    createTabs(this.items(), {
-      defaultValue: this.defaultValue(),
-      onValueChange: (v) => this.activeValue.set(v),
-    })
-  )
-
-  constructor() {
-    effect(() => {
-      const def = this.defaultValue()
-      const items = this.items()
-      if (def) {
-        this.activeValue.set(def)
-      } else if (items.length > 0) {
-        this.activeValue.set(items[0].value)
-      }
-    })
-  }
-
-  getTabProps(value: string) {
-    return this.api().getTriggerProps(value, this.activeValue())
-  }
-
-  getPanelProps(value: string) {
-    return this.api().getPanelProps(value, this.activeValue())
-  }
-
-  isActive(value: string): boolean {
-    return this.activeValue() === value
-  }
-
-  select(value: string) {
-    this.activeValue.set(value)
-  }
-}
-
-@Component({
-  selector: 'mcpe-tabs-list',
-  standalone: true,
-  template: `<div role="tablist" class="mcpe-tabs-list"><ng-content /></div>`,
-})
-export class SnxTabsListComponent {}
-
-@Component({
-  selector: 'mcpe-tabs-trigger',
-  standalone: true,
-  template: `
-    <button
-      role="tab"
-      [class]="classes()"
-      [attr.aria-selected]="isActive()"
-      [attr.tabindex]="isActive() ? 0 : -1"
-      (click)="onClick.emit()"
-    >
-      <ng-content />
-    </button>
-  `,
-})
-export class SnxTabsTriggerComponent {
-  isActive = input(false)
-  onClick = output<void>()
-  class = input('')
-
-  classes = computed(() =>
-    ['mcpe-tabs-trigger', this.isActive() ? 'mcpe-tabs-trigger-active' : '', this.class()]
-      .filter(Boolean)
-      .join(' ')
-  )
-}
-
-@Component({
-  selector: 'mcpe-tabs-content',
-  standalone: true,
-  template: `
-    @if (isActive()) {
-      <div role="tabpanel" class="mcpe-tabs-content"><ng-content /></div>
-    }
-  `,
-})
-export class SnxTabsContentComponent {
-  isActive = input(false)
-}

package/src/textarea.component.ts

@@ -1,22 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-textarea',
-  standalone: true,
-  template: `
-    <textarea
-      [class]="classes()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [rows]="rows()"
-    ><ng-content /></textarea>
-  `,
-})
-export class SnxTextareaComponent {
-  placeholder = input('')
-  disabled = input(false)
-  rows = input(3)
-  class = input('')
-
-  classes = computed(() => ['mcpe-textarea', this.class()].filter(Boolean).join(' '))
-}

package/src/toast.component.ts

@@ -1,62 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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()
-  }
-}