@vekron/vekron-ui 0.0.0-stage → 0.1.0

package/src/input-text/input-text.component.ts

@@ -0,0 +1,106 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uiFieldClass, uiLabelClass } from '../utils/classes';
+
+@Component({
+  selector: 'ui-input-text',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex w-full flex-col gap-1.5">
+      @if (label().length > 0) {
+        <label [class]="labelClass" [attr.for]="resolvedId()">{{ label() }}</label>
+      }
+      <input
+        [id]="resolvedId()"
+        [attr.name]="resolvedName()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readOnly]="readOnly()"
+        [value]="value()"
+        [class]="fieldClass"
+        (input)="onInput($event)"
+        (blur)="markTouched()"
+      />
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiInputTextComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiInputTextComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly placeholder = input('');
+  readonly name = input('');
+  readonly inputId = input('');
+  readonly type = input<'text' | 'email' | 'search' | 'tel' | 'url'>('text');
+  readonly readOnly = input(false);
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedId = crypto.randomUUID();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly fieldClass = uiFieldClass;
+  readonly labelClass = uiLabelClass;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly resolvedId = computed(() => {
+    const provided = this.inputId();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedId;
+  });
+  readonly resolvedName = computed(() => {
+    const name = this.name();
+    if (name.length === 0) {
+      return null;
+    }
+    return name;
+  });
+
+  onInput(event: Event): void {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      throw new Error('ui-input-text esperaba un HTMLInputElement.');
+    }
+    this.value.set(target.value);
+    this.onChange(target.value);
+  }
+
+  markTouched(): void {
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}

package/src/input-text/public-api.ts

@@ -0,0 +1 @@
+export { UiInputTextComponent } from './input-text.component';

package/src/menu/menu.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { uiPanelClass } from '../utils/classes';
+import { type UiMenuItem } from '../utils/models';
+
+@Component({
+  selector: 'ui-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div [class]="panelClass" role="menu">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="flex w-full rounded-ui px-3 py-2 text-left text-sm hover:bg-accent disabled:opacity-50"
+          role="menuitem"
+          [disabled]="item.disabled === true"
+          (click)="choose(item)"
+        >
+          {{ item.label }}
+        </button>
+      }
+    </div>
+  `,
+})
+export class UiMenuComponent {
+  readonly items = input.required<readonly UiMenuItem[]>();
+  readonly selected = output<UiMenuItem>();
+  readonly panelClass = uiPanelClass;
+
+  choose(item: UiMenuItem): void {
+    if (item.disabled === true) {
+      return;
+    }
+    this.selected.emit(item);
+  }
+}

package/src/menu/public-api.ts

@@ -0,0 +1 @@
+export { UiMenuComponent } from './menu.component';

package/src/message/message.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { uiSeverityClass } from '../utils/classes';
+import { type UiSeverity } from '../utils/models';
+
+@Component({
+  selector: 'ui-message',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div role="status" class="rounded-ui border px-4 py-3 text-sm" [class]="severityClass()">{{ text() }}</div>`,
+})
+export class UiMessageComponent {
+  readonly text = input.required<string>();
+  readonly severity = input<UiSeverity>('info');
+
+  severityClass(): string {
+    return uiSeverityClass[this.severity()];
+  }
+}

package/src/message/public-api.ts

@@ -0,0 +1 @@
+export { UiMessageComponent } from './message.component';

package/src/paginator/paginator.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';
+import { type UiButtonVariant, UiButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'ui-paginator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <nav class="flex items-center gap-2" aria-label="Paginación">
+      <ui-button variant="outline" size="sm" [disabled]="page() <= 1" (pressed)="go(page() - 1)">Anterior</ui-button>
+      @for (pageNumber of pages(); track pageNumber) {
+        <ui-button size="sm" [variant]="variantFor(pageNumber)" (pressed)="go(pageNumber)">
+          {{ pageNumber }}
+        </ui-button>
+      }
+      <ui-button variant="outline" size="sm" [disabled]="page() >= pageCount()" (pressed)="go(page() + 1)">
+        Siguiente
+      </ui-button>
+    </nav>
+  `,
+})
+export class UiPaginatorComponent {
+  readonly page = model(1);
+  readonly pageSize = input(10);
+  readonly total = input.required<number>();
+  readonly pageCount = computed(() => {
+    const pageSize = this.pageSize();
+    if (pageSize < 1) {
+      throw new Error('ui-paginator pageSize debe ser mayor a 0.');
+    }
+    const count = Math.ceil(this.total() / pageSize);
+    if (count < 1) {
+      return 1;
+    }
+    return count;
+  });
+  readonly pages = computed(() => {
+    const count = this.pageCount();
+    const current = this.page();
+    const start = Math.max(1, current - 2);
+    const end = Math.min(count, current + 2);
+    const pageNumbers: number[] = [];
+    for (let pageNumber = start; pageNumber <= end; pageNumber += 1) {
+      pageNumbers.push(pageNumber);
+    }
+    return pageNumbers;
+  });
+
+  variantFor(pageNumber: number): UiButtonVariant {
+    if (pageNumber === this.page()) {
+      return 'primary';
+    }
+    return 'outline';
+  }
+
+  go(nextPage: number): void {
+    if (nextPage < 1 || nextPage > this.pageCount()) {
+      return;
+    }
+    this.page.set(nextPage);
+  }
+}

package/src/paginator/public-api.ts

@@ -0,0 +1 @@
+export { UiPaginatorComponent } from './paginator.component';

package/src/pdf-viewer/pdf-viewer.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ui-pdf-viewer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <iframe class="h-[70vh] w-full rounded-ui border border-border" [title]="title()" [src]="resourceUrl()"></iframe>
+  `,
+})
+export class UiPdfViewerComponent {
+  readonly src = input.required<string>();
+  readonly title = input('Documento PDF');
+  private readonly sanitizer = inject(DomSanitizer);
+  readonly resourceUrl = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(this.src()));
+}

package/src/pdf-viewer/public-api.ts

@@ -0,0 +1 @@
+export { UiPdfViewerComponent } from './pdf-viewer.component';

package/src/pick-list/pick-list.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { UiButtonComponent } from '../button/button.component';
+import { type UiOption } from '../utils/models';
+
+@Component({
+  selector: 'ui-pick-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UiButtonComponent],
+  template: `
+    <div class="grid items-stretch gap-3 md:grid-cols-[1fr_auto_1fr]">
+      <ul class="min-h-40 rounded-ui border border-border p-2">
+        @for (option of source(); track option.value) {
+          <li>
+            <button type="button" class="w-full rounded-ui px-2 py-1 text-left text-sm hover:bg-accent" (click)="moveToTarget(option)">
+              {{ option.label }}
+            </button>
+          </li>
+        } @empty {
+          <li class="px-2 py-1 text-sm text-muted-foreground">Sin elementos</li>
+        }
+      </ul>
+      <div class="flex items-center justify-center gap-2 md:flex-col">
+        <ui-button size="sm" variant="outline" (pressed)="moveAllToTarget()">≫</ui-button>
+        <ui-button size="sm" variant="outline" (pressed)="moveAllToSource()">≪</ui-button>
+      </div>
+      <ul class="min-h-40 rounded-ui border border-border p-2">
+        @for (option of target(); track option.value) {
+          <li>
+            <button type="button" class="w-full rounded-ui px-2 py-1 text-left text-sm hover:bg-accent" (click)="moveToSource(option)">
+              {{ option.label }}
+            </button>
+          </li>
+        } @empty {
+          <li class="px-2 py-1 text-sm text-muted-foreground">Sin elementos</li>
+        }
+      </ul>
+    </div>
+  `,
+})
+export class UiPickListComponent {
+  readonly source = model.required<readonly UiOption[]>();
+  readonly target = model<readonly UiOption[]>([]);
+
+  moveToTarget(option: UiOption): void {
+    if (option.disabled === true) {
+      return;
+    }
+    this.source.set(this.source().filter((item) => item.value !== option.value));
+    this.target.set([...this.target(), option]);
+  }
+
+  moveToSource(option: UiOption): void {
+    this.target.set(this.target().filter((item) => item.value !== option.value));
+    this.source.set([...this.source(), option]);
+  }
+
+  moveAllToTarget(): void {
+    const movable = this.source().filter((option) => option.disabled !== true);
+    const blocked = this.source().filter((option) => option.disabled === true);
+    this.target.set([...this.target(), ...movable]);
+    this.source.set(blocked);
+  }
+
+  moveAllToSource(): void {
+    this.source.set([...this.source(), ...this.target()]);
+    this.target.set([]);
+  }
+}

package/src/pick-list/public-api.ts

@@ -0,0 +1 @@
+export { UiPickListComponent } from './pick-list.component';

package/src/popover/popover.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+
+@Component({
+  selector: 'ui-popover',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="relative inline-flex">
+      <div (click)="open.set(!open())">
+        <ng-content select="[uiPopoverTrigger]" />
+      </div>
+      @if (open()) {
+        <div class="absolute top-full left-0 z-50 mt-2 min-w-48 rounded-ui border border-border bg-card p-3 text-sm text-card-foreground shadow-md">
+          <ng-content select="[uiPopoverContent]" />
+        </div>
+      }
+    </div>
+  `,
+  host: { class: 'inline-flex' },
+})
+export class UiPopoverComponent {
+  readonly open = model(false);
+}

package/src/popover/public-api.ts

@@ -0,0 +1 @@
+export { UiPopoverComponent } from './popover.component';

package/src/progress-bar/progress-bar.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'ui-progress-bar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="h-2 w-full overflow-hidden rounded-full bg-muted"
+      role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      [attr.aria-valuenow]="safeValue()"
+    >
+      <div class="h-full bg-primary" [style.width.%]="safeValue()"></div>
+    </div>
+  `,
+})
+export class UiProgressBarComponent {
+  readonly value = input.required<number>();
+  readonly safeValue = computed(() => {
+    const value = this.value();
+    if (value < 0 || value > 100) {
+      throw new Error('ui-progress-bar value debe estar entre 0 y 100.');
+    }
+    return value;
+  });
+}

package/src/progress-bar/public-api.ts

@@ -0,0 +1 @@
+export { UiProgressBarComponent } from './progress-bar.component';

package/src/progress-spinner/progress-spinner.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'ui-progress-spinner',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="inline-flex items-center gap-2" role="status">
+      <span [class]="spinnerClass()"></span>
+      <span class="sr-only">{{ label() }}</span>
+    </div>
+  `,
+})
+export class UiProgressSpinnerComponent {
+  readonly label = input('Cargando');
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+
+  spinnerClass(): string {
+    const base = 'animate-spin rounded-full border-2 border-muted border-t-primary';
+    if (this.size() === 'sm') {
+      return `${base} size-4`;
+    }
+    if (this.size() === 'lg') {
+      return `${base} size-12`;
+    }
+    return `${base} size-8`;
+  }
+}

package/src/progress-spinner/public-api.ts

@@ -0,0 +1 @@
+export { UiProgressSpinnerComponent } from './progress-spinner.component';

package/src/public-api.ts

@@ -0,0 +1,46 @@
+export * from './accordion/public-api';
+export * from './autocomplete/public-api';
+export * from './avatar/public-api';
+export * from './badge/public-api';
+export * from './breadcrumb/public-api';
+export * from './button/public-api';
+export * from './carousel/public-api';
+export * from './checkbox/public-api';
+export * from './chip/public-api';
+export * from './confirm-dialog/public-api';
+export * from './confirm-popup/public-api';
+export * from './context-menu/public-api';
+export * from './datepicker/public-api';
+export * from './dialog/public-api';
+export * from './divider/public-api';
+export * from './file-upload/public-api';
+export * from './input-number/public-api';
+export * from './input-otp/public-api';
+export * from './input-password/public-api';
+export * from './input-text/public-api';
+export * from './menu/public-api';
+export * from './message/public-api';
+export * from './paginator/public-api';
+export * from './pdf-viewer/public-api';
+export * from './pick-list/public-api';
+export * from './popover/public-api';
+export * from './progress-bar/public-api';
+export * from './progress-spinner/public-api';
+export * from './radio-button/public-api';
+export * from './scroll-top/public-api';
+export * from './select/public-api';
+export * from './select-button/public-api';
+export * from './skeleton/public-api';
+export * from './split-button/public-api';
+export * from './stepper/public-api';
+export * from './table/public-api';
+export * from './tabs/public-api';
+export * from './tag/public-api';
+export * from './textarea/public-api';
+export * from './toast/public-api';
+export * from './toggle-button/public-api';
+export * from './toggle-switch/public-api';
+export * from './toolbar/public-api';
+export * from './tooltip/public-api';
+export * from './tree/public-api';
+export * from './utils/public-api';

package/src/radio-button/public-api.ts

@@ -0,0 +1 @@
+export { UiRadioButtonComponent, UiRadioGroupComponent } from './radio-button.component';

package/src/radio-button/radio-button.component.ts

@@ -0,0 +1,98 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'ui-radio-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex flex-col gap-2" role="radiogroup" [attr.aria-label]="label()">
+      @if (label().length > 0) {
+        <span class="text-sm font-medium text-foreground">{{ label() }}</span>
+      }
+      <ng-content />
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiRadioGroupComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiRadioGroupComponent implements ControlValueAccessor {
+  readonly value = model('');
+  readonly label = input('');
+  readonly name = input('');
+  readonly disabled = input(false);
+  private readonly formDisabled = signal(false);
+  private readonly generatedName = crypto.randomUUID();
+  private onChange: (value: string) => void = () => undefined;
+  private onTouched: () => void = () => undefined;
+  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());
+  readonly groupName = computed(() => {
+    const provided = this.name();
+    if (provided.length > 0) {
+      return provided;
+    }
+    return this.generatedName;
+  });
+
+  select(value: string): void {
+    this.value.set(value);
+    this.onChange(value);
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    if (value === null) {
+      this.value.set('');
+      return;
+    }
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}
+
+@Component({
+  selector: 'ui-radio-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label class="inline-flex items-center gap-2 text-sm text-foreground">
+      <input
+        type="radio"
+        [name]="group.groupName()"
+        [value]="option()"
+        [checked]="group.value() === option()"
+        [disabled]="group.isDisabled() || disabled()"
+        (change)="group.select(option())"
+      />
+      <ng-content />
+    </label>
+  `,
+})
+export class UiRadioButtonComponent {
+  readonly option = input.required<string>();
+  readonly disabled = input(false);
+  readonly group = inject(UiRadioGroupComponent);
+}