angular-dev-utils 1.0.1 → 1.0.2

package/src/lib/components/card/card.component.ts

@@ -1,101 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'adu-card',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div [class]="cardClasses">
-      <div *ngIf="hasHeader" class="adu-card-header">
-        <ng-content select="[card-header]"></ng-content>
-      </div>
-      
-      <div class="adu-card-body">
-        <ng-content></ng-content>
-      </div>
-      
-      <div *ngIf="hasFooter" class="adu-card-footer">
-        <ng-content select="[card-footer]"></ng-content>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .adu-card {
-      @apply rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-sm;
-    }
-
-    .adu-card-hoverable:hover {
-      @apply shadow-md;
-    }
-
-    .adu-card-shadow-sm {
-      @apply shadow-sm;
-    }
-
-    .adu-card-shadow-md {
-      @apply shadow-md;
-    }
-
-    .adu-card-shadow-lg {
-      @apply shadow-lg;
-    }
-
-    .adu-card-shadow-xl {
-      @apply shadow-xl;
-    }
-
-    .adu-card-header {
-      @apply flex flex-col space-y-1.5 p-6;
-    }
-
-    .adu-card-body {
-      @apply p-6 pt-0;
-    }
-
-    .adu-card-body-compact {
-      @apply p-4 pt-0;
-    }
-
-    .adu-card-body-spacious {
-      @apply p-8 pt-0;
-    }
-
-    .adu-card-footer {
-      @apply flex items-center p-6 pt-0;
-    }
-  `]
-})
-export class CardComponent {
-  @Input() shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
-  @Input() hoverable = false;
-  @Input() padding: 'compact' | 'normal' | 'spacious' = 'normal';
-  @Input() hasHeader = false;
-  @Input() hasFooter = false;
-
-  get cardClasses(): string {
-    const classes = ['adu-card'];
-
-    if (this.shadow !== 'none') {
-      classes.push(`adu-card-shadow-${this.shadow}`);
-    }
-
-    if (this.hoverable) {
-      classes.push('adu-card-hoverable');
-    }
-
-    return classes.join(' ');
-  }
-
-  get bodyClasses(): string {
-    const classes = ['adu-card-body'];
-
-    if (this.padding === 'compact') {
-      classes.push('adu-card-body-compact');
-    } else if (this.padding === 'spacious') {
-      classes.push('adu-card-body-spacious');
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,141 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { InputType, InputSize } from '../../models/types';
-
-@Component({
-  selector: 'adu-input',
-  standalone: true,
-  imports: [CommonModule],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputComponent),
-      multi: true
-    }
-  ],
-  template: `
-    <div class="adu-input-wrapper">
-      <label *ngIf="label" [for]="id" class="adu-input-label">
-        {{ label }}
-        <span *ngIf="required" class="text-red-500">*</span>
-      </label>
-      
-      <div class="relative">
-        <input
-          [id]="id"
-          [type]="type"
-          [placeholder]="placeholder"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          [value]="value"
-          [class]="inputClasses"
-          (input)="onInputChange($event)"
-          (blur)="onTouched()"
-        />
-        <span *ngIf="icon" class="adu-input-icon">{{ icon }}</span>
-      </div>
-
-      <p *ngIf="error" class="adu-input-error">{{ error }}</p>
-      <p *ngIf="hint && !error" class="adu-input-hint">{{ hint }}</p>
-    </div>
-  `,
-  styles: [`
-    .adu-input-wrapper {
-      @apply w-full;
-    }
-
-    .adu-input-label {
-      @apply block text-sm font-medium text-zinc-900 mb-1.5;
-    }
-
-    .adu-input {
-      @apply flex w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm;
-      @apply ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium;
-      @apply placeholder:text-zinc-500;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2;
-      @apply disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-zinc-50;
-    }
-
-    .adu-input-sm {
-      @apply h-9 px-3 text-sm;
-    }
-
-    .adu-input-md {
-      @apply h-10 px-3 text-sm;
-    }
-
-    .adu-input-lg {
-      @apply h-11 px-4 text-base;
-    }
-
-    .adu-input-error-state {
-      @apply border-red-500 focus-visible:ring-red-500;
-    }
-
-    .adu-input-icon {
-      @apply absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none;
-    }
-
-    .adu-input-error {
-      @apply mt-1.5 text-sm text-red-600 font-medium;
-    }
-
-    .adu-input-hint {
-      @apply mt-1.5 text-sm text-zinc-500;
-    }
-  `]
-})
-export class InputComponent implements ControlValueAccessor {
-  @Input() id = `adu-input-${Math.random().toString(36).substr(2, 9)}`;
-  @Input() label = '';
-  @Input() type: InputType = 'text';
-  @Input() placeholder = '';
-  @Input() size: InputSize = 'md';
-  @Input() disabled = false;
-  @Input() readonly = false;
-  @Input() required = false;
-  @Input() error = '';
-  @Input() hint = '';
-  @Input() icon = '';
-
-  value = '';
-  onChange: (value: string) => void = () => { };
-  onTouched: () => void = () => { };
-
-  get inputClasses(): string {
-    const classes = ['adu-input', `adu-input-${this.size}`];
-
-    if (this.error) {
-      classes.push('adu-input-error-state');
-    }
-
-    if (this.icon) {
-      classes.push('pr-10');
-    }
-
-    return classes.join(' ');
-  }
-
-  onInputChange(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.value = input.value;
-    this.onChange(this.value);
-  }
-
-  writeValue(value: string): void {
-    this.value = value || '';
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-}

package/src/lib/components/modal/modal.component.ts

@@ -1,139 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'adu-modal',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="adu-modal-wrapper" *ngIf="isOpen" (click)="onBackdropClick()">
-      <div [class]="modalClasses" (click)="$event.stopPropagation()">
-        <button 
-          *ngIf="showCloseButton"
-          class="adu-modal-close" 
-          (click)="close()"
-          aria-label="Close modal"
-        >
-          ×
-        </button>
-
-        <div *ngIf="title" class="adu-modal-title">
-          {{ title }}
-        </div>
-
-        <div class="adu-modal-body">
-          <ng-content></ng-content>
-        </div>
-
-        <div *ngIf="hasFooter" class="adu-modal-footer">
-          <ng-content select="[modal-footer]"></ng-content>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .adu-modal-wrapper {
-      @apply fixed inset-0 z-50 flex items-center justify-center p-4;
-      background: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(4px);
-      animation: fadeIn 0.15s ease-out;
-    }
-
-    .adu-modal-content {
-      @apply relative bg-white rounded-lg shadow-lg max-h-[90vh] overflow-hidden;
-      animation: slideUp 0.2s ease-out;
-    }
-
-    .adu-modal-sm {
-      @apply w-full max-w-sm;
-    }
-
-    .adu-modal-md {
-      @apply w-full max-w-lg;
-    }
-
-    .adu-modal-lg {
-      @apply w-full max-w-2xl;
-    }
-
-    .adu-modal-xl {
-      @apply w-full max-w-4xl;
-    }
-
-    .adu-modal-full {
-      @apply w-full h-full max-w-none rounded-none;
-    }
-
-    .adu-modal-close {
-      @apply absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white;
-      @apply transition-opacity hover:opacity-100;
-      @apply focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2;
-      @apply disabled:pointer-events-none;
-      @apply text-zinc-500 hover:text-zinc-900 text-2xl font-light w-6 h-6 flex items-center justify-center;
-    }
-
-    .adu-modal-title {
-      @apply flex flex-col space-y-1.5 text-center sm:text-left p-6 pb-4;
-      @apply text-lg font-semibold leading-none tracking-tight text-zinc-950;
-    }
-
-    .adu-modal-body {
-      @apply p-6 pt-0 overflow-y-auto;
-    }
-
-    .adu-modal-footer {
-      @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 pt-4;
-    }
-
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-
-    @keyframes slideUp {
-      from {
-        opacity: 0;
-        transform: translateY(4px) scale(0.98);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-
-    .animate-fadeIn {
-      animation: fadeIn 0.15s ease-out;
-    }
-
-    .animate-slideUp {
-      animation: slideUp 0.3s ease-out;
-    }
-  `]
-})
-export class ModalComponent {
-  @Input() isOpen = false;
-  @Input() title = '';
-  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'md';
-  @Input() closeOnBackdrop = true;
-  @Input() showCloseButton = true;
-  @Input() hasFooter = false;
-
-  @Output() isOpenChange = new EventEmitter<boolean>();
-  @Output() closed = new EventEmitter<void>();
-
-  get modalClasses(): string {
-    return ['adu-modal-content', `adu-modal-${this.size}`].join(' ');
-  }
-
-  close(): void {
-    this.isOpen = false;
-    this.isOpenChange.emit(false);
-    this.closed.emit();
-  }
-
-  onBackdropClick(): void {
-    if (this.closeOnBackdrop) {
-      this.close();
-    }
-  }
-}

package/src/lib/components/spinner/spinner.component.ts

@@ -1,64 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SpinnerSize, SpinnerColor } from '../../models/types';
-
-@Component({
-  selector: 'adu-spinner',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div *ngIf="overlay" class="adu-spinner-overlay">
-      <div [class]="spinnerClasses"></div>
-      <p *ngIf="message" class="adu-spinner-message">{{ message }}</p>
-    </div>
-
-    <div *ngIf="!overlay" [class]="spinnerClasses"></div>
-  `,
-  styles: [`
-    .adu-spinner {
-      @apply inline-block border-2 border-zinc-200 border-t-zinc-900 rounded-full animate-spin;
-    }
-
-    .adu-spinner-sm {
-      @apply w-4 h-4 border-2;
-    }
-
-    .adu-spinner-md {
-      @apply w-6 h-6 border-2;
-    }
-
-    .adu-spinner-lg {
-      @apply w-10 h-10 border-[3px];
-    }
-
-    .adu-spinner-primary {
-      @apply border-zinc-200 border-t-zinc-900;
-    }
-
-    .adu-spinner-secondary {
-      @apply border-zinc-300 border-t-zinc-600;
-    }
-
-    .adu-spinner-white {
-      @apply border-zinc-100 border-t-white;
-    }
-
-    .adu-spinner-overlay {
-      @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex flex-col items-center justify-center z-50;
-    }
-
-    .adu-spinner-message {
-      @apply mt-4 text-white text-sm font-medium;
-    }
-  `]
-})
-export class SpinnerComponent {
-  @Input() size: SpinnerSize = 'md';
-  @Input() color: SpinnerColor = 'primary';
-  @Input() overlay = false;
-  @Input() message = '';
-
-  get spinnerClasses(): string {
-    return ['adu-spinner', `adu-spinner-${this.size}`, `adu-spinner-${this.color}`].join(' ');
-  }
-}

package/src/lib/components/table/table.component.ts

@@ -1,240 +0,0 @@
-import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TableColumn, TableConfig } from '../../models/types';
-
-@Component({
-  selector: 'adu-table',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="adu-table-container">
-      <table class="adu-table" [class.adu-table-striped]="config.striped" [class.adu-table-hoverable]="config.hoverable">
-        <thead class="adu-table-header">
-          <tr>
-            <th 
-              *ngFor="let column of columns"
-              [style.width]="column.width"
-              [class.adu-table-sortable]="column.sortable && config.sortable"
-              (click)="onSort(column)"
-              class="adu-table-th"
-            >
-              <div class="flex items-center justify-between">
-                <span>{{ column.label }}</span>
-                <span *ngIf="column.sortable && config.sortable" class="adu-table-sort-icon">
-                  <span *ngIf="sortColumn === column.key">
-                    {{ sortDirection === 'asc' ? '↑' : '↓' }}
-                  </span>
-                  <span *ngIf="sortColumn !== column.key" class="text-gray-300">↕</span>
-                </span>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="adu-table-body">
-          <tr *ngFor="let row of paginatedData; let i = index" class="adu-table-row">
-            <td *ngFor="let column of columns" class="adu-table-td">
-              <ng-container *ngIf="cellTemplate; else defaultCell">
-                <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row, column: column }"></ng-container>
-              </ng-container>
-              <ng-template #defaultCell>
-                {{ getCellValue(row, column) }}
-              </ng-template>
-            </td>
-          </tr>
-          <tr *ngIf="paginatedData.length === 0" class="adu-table-empty">
-            <td [attr.colspan]="columns.length" class="text-center py-8 text-gray-500">
-              <ng-content select="[empty-state]"></ng-content>
-              <span *ngIf="!hasEmptyState">No data available</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Pagination -->
-      <div *ngIf="config.pageable && totalPages > 1" class="adu-table-pagination">
-        <button 
-          class="adu-pagination-btn" 
-          [disabled]="currentPage === 1"
-          (click)="goToPage(currentPage - 1)"
-        >
-          Previous
-        </button>
-
-        <div class="adu-pagination-info">
-          Page {{ currentPage }} of {{ totalPages }}
-        </div>
-
-        <button 
-          class="adu-pagination-btn"
-          [disabled]="currentPage === totalPages"
-          (click)="goToPage(currentPage + 1)"
-        >
-          Next
-        </button>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .adu-table-container {
-      @apply w-full overflow-x-auto rounded-md border border-zinc-200;
-    }
-
-    .adu-table {
-      @apply w-full caption-bottom text-sm;
-    }
-
-    .adu-table-header {
-      @apply border-b border-zinc-200;
-    }
-
-    .adu-table-th {
-      @apply h-12 px-4 text-left align-middle font-medium text-zinc-500;
-      @apply [&:has([role=checkbox])]:pr-0;
-    }
-
-    .adu-table-sortable {
-      @apply cursor-pointer hover:text-zinc-900 transition-colors;
-    }
-
-    .adu-table-sort-icon {
-      @apply ml-2 inline-block text-zinc-400;
-    }
-
-    .adu-table-body {
-      @apply [&_tr:last-child]:border-0;
-    }
-
-    .adu-table-row {
-      @apply border-b border-zinc-200 transition-colors;
-      @apply hover:bg-zinc-50/50;
-      @apply data-[state=selected]:bg-zinc-100;
-    }
-
-    .adu-table-striped .adu-table-row:nth-child(even) {
-      @apply bg-zinc-50/30;
-    }
-
-    .adu-table-hoverable .adu-table-row:hover {
-      @apply bg-zinc-50;
-    }
-
-    .adu-table-td {
-      @apply p-4 align-middle text-zinc-900;
-      @apply [&:has([role=checkbox])]:pr-0;
-    }
-
-    .adu-table-empty {
-      @apply text-center py-10 text-zinc-500;
-    }
-
-    .adu-table-pagination {
-      @apply flex items-center justify-between px-4 py-3 border-t border-zinc-200 bg-zinc-50/50;
-    }
-
-    .adu-pagination-btn {
-      @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
-      @apply ring-offset-white transition-colors;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2;
-      @apply disabled:pointer-events-none disabled:opacity-50;
-      @apply border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900;
-      @apply h-9 px-4 py-2;
-    }
-
-    .adu-pagination-info {
-      @apply text-sm text-zinc-600 font-medium;
-    }
-  `]
-})
-export class TableComponent<T = any> {
-  @Input() data: T[] = [];
-  @Input() columns: TableColumn<T>[] = [];
-  @Input() config: TableConfig = {
-    sortable: true,
-    pageable: true,
-    pageSize: 10,
-    striped: true,
-    hoverable: true
-  };
-
-  @ContentChild('cellTemplate') cellTemplate?: TemplateRef<any>;
-  @Output() rowClicked = new EventEmitter<T>();
-  @Output() sortChanged = new EventEmitter<{ column: string; direction: 'asc' | 'desc' }>();
-
-  sortColumn = '';
-  sortDirection: 'asc' | 'desc' = 'asc';
-  currentPage = 1;
-  hasEmptyState = false;
-
-  ngOnInit() {
-    this.config = { ...this.getDefaultConfig(), ...this.config };
-  }
-
-  get sortedData(): T[] {
-    if (!this.config.sortable || !this.sortColumn) {
-      return this.data;
-    }
-
-    return [...this.data].sort((a, b) => {
-      const aVal = this.getNestedValue(a, this.sortColumn);
-      const bVal = this.getNestedValue(b, this.sortColumn);
-
-      if (aVal < bVal) return this.sortDirection === 'asc' ? -1 : 1;
-      if (aVal > bVal) return this.sortDirection === 'asc' ? 1 : -1;
-      return 0;
-    });
-  }
-
-  get paginatedData(): T[] {
-    if (!this.config.pageable) {
-      return this.sortedData;
-    }
-
-    const start = (this.currentPage - 1) * (this.config.pageSize || 10);
-    const end = start + (this.config.pageSize || 10);
-    return this.sortedData.slice(start, end);
-  }
-
-  get totalPages(): number {
-    return Math.ceil(this.data.length / (this.config.pageSize || 10));
-  }
-
-  onSort(column: TableColumn<T>): void {
-    if (!column.sortable || !this.config.sortable) return;
-
-    if (this.sortColumn === column.key) {
-      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-    } else {
-      this.sortColumn = column.key;
-      this.sortDirection = 'asc';
-    }
-
-    this.sortChanged.emit({ column: column.key, direction: this.sortDirection });
-  }
-
-  goToPage(page: number): void {
-    if (page >= 1 && page <= this.totalPages) {
-      this.currentPage = page;
-    }
-  }
-
-  getCellValue(row: T, column: TableColumn<T>): any {
-    if (column.cellTemplate) {
-      return column.cellTemplate(row);
-    }
-    return this.getNestedValue(row, column.key);
-  }
-
-  private getNestedValue(obj: any, path: string): any {
-    return path.split('.').reduce((current, prop) => current?.[prop], obj);
-  }
-
-  private getDefaultConfig(): TableConfig {
-    return {
-      sortable: true,
-      pageable: true,
-      pageSize: 10,
-      striped: true,
-      hoverable: true
-    };
-  }
-}