@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.17

package/src/lib/fields/descriptors.ts

@@ -1,122 +0,0 @@
-import type { RenderDescriptor } from '../core/registry/render-registry';
-import type { FieldType } from '../core/models/schema.model';
-
-import { descriptor as booleanDescriptor } from './boolean/boolean.descriptor';
-import { descriptor as colorDescriptor } from './color/color.descriptor';
-import { descriptor as currencyDescriptor } from './currency/currency.descriptor';
-import { descriptor as dateDescriptor } from './date/date.descriptor';
-import { descriptor as emailDescriptor } from './email/email.descriptor';
-import { descriptor as fileDescriptor } from './file/file.descriptor';
-import { descriptor as groupDescriptor } from './group/group.descriptor';
-import { descriptor as imageDescriptor } from './image/image.descriptor';
-import { descriptor as keyValueDescriptor } from './key-value/key-value.descriptor';
-import { descriptor as listDescriptor } from './list/list.descriptor';
-import { descriptor as multiselectDescriptor } from './multiselect/multiselect.descriptor';
-import { descriptor as numberDescriptor } from './number/number.descriptor';
-import { descriptor as phoneDescriptor } from './phone/phone.descriptor';
-import { descriptor as readonlyTextDescriptor } from './readonly-text/readonly-text.descriptor';
-import { descriptor as relationDescriptor } from './relation/relation.descriptor';
-import { descriptor as richSelectDescriptor } from './rich-select/rich-select.descriptor';
-import { descriptor as selectDescriptor } from './select/select.descriptor';
-import { descriptor as dropdownDescriptor } from './dropdown/dropdown.descriptor';
-import { descriptor as slugDescriptor } from './slug/slug.descriptor';
-import { descriptor as stringListDescriptor } from './string-list/string-list.descriptor';
-import { descriptor as textDescriptor } from './text/text.descriptor';
-import { descriptor as textareaDescriptor } from './textarea/textarea.descriptor';
-import { descriptor as timeDescriptor } from './time/time.descriptor';
-import { descriptor as urlDescriptor } from './url/url.descriptor';
-
-/**
- * Tripwire de compilación (R1.7 · D17): que la unión `FieldType` y los
- * tipos que la UI sabe dibujar sigan diciendo lo mismo.
- *
- *   · un valor que no esté en la unión `FieldSchema` ⇒ `satisfies` falla;
- *   · un tipo de la unión que falte acá ⇒ `FaltaEnLaUi` no es `never`.
- *
- * **No es una fuente de verdad en runtime.** El catálogo vive en
- * `core/registry/render-registry.ts`, alimentado por los descriptores de
- * abajo. Esta lista sólo existe para que `npm run build` y `npm test` vean
- * la aserción por igual, sin depender de que un test la ejecute.
- *
- * **Exportada en R3.7** para que `core/registry/contract.spec.ts` pueda
- * verificar además el sentido que este archivo no cubre — que cada nombre de
- * la lista tenga **descriptor**: aquí sólo se comprueba que está en la unión,
- * y un tipo declarado en la lista pero ausente del manifiesto se vería en el
- * primer schema que lo use.
- *
- * **Mudado acá en R3.8.** Vivía en `field-host/field-host.ts`, y §0 es
- * explícito: «si añadir un tipo obliga a editar `FieldHost`, el motor no
- * está terminado». Estaba sin uso en runtime — sólo servía a este tripwire —
- * así que trasladarlo acá no cambia comportamiento y deja el registro y su
- * aserción en el **mismo archivo**: añadir un tipo toca una carpeta y una
- * línea de este manifiesto, y el host no se entera.
- */
-export const SUPPORTED_FIELD_TYPE_LIST = [
-  'text',
-  'textarea',
-  'slug',
-  'number',
-  'currency',
-  'boolean',
-  'select',
-  'multiselect',
-  'url',
-  'email',
-  'phone',
-  'date',
-  'time',
-  'readonly-text',
-  'group',
-  'list',
-  'string-list',
-  'key-value',
-  'relation',
-  'image',
-  'file',
-  'color',
-  'rich-select',
-  'dropdown',
-] as const satisfies readonly FieldType[];
-
-type FaltaEnLaUi = Exclude<FieldType, (typeof SUPPORTED_FIELD_TYPE_LIST)[number]>;
-const _exhaustivo: FaltaEnLaUi extends never
-  ? true
-  : ['Falta en SUPPORTED_FIELD_TYPE_LIST', FaltaEnLaUi] = true;
-
-/**
- * Manifiesto de descriptores de campo (R3.3 · registro único de render).
- *
- * Una línea por tipo: el registro los recoge al importar este módulo. Es la
- * **única** lista manual del catálogo de campos — `import.meta.glob` no
- * sobrevive a `ng build`, así que D9-1 se resuelve con «registro manual de
- * una línea». Ver `core/registry/render-registry.ts`.
- *
- * Añadir un tipo de campo ⇒ crear la carpeta + su `.descriptor.ts` + una
- * línea acá. **Ningún host se toca** (R3.8).
- */
-export const fieldDescriptors: readonly RenderDescriptor[] = [
-  booleanDescriptor,
-  colorDescriptor,
-  currencyDescriptor,
-  dateDescriptor,
-  emailDescriptor,
-  fileDescriptor,
-  groupDescriptor,
-  imageDescriptor,
-  keyValueDescriptor,
-  listDescriptor,
-  multiselectDescriptor,
-  numberDescriptor,
-  phoneDescriptor,
-  readonlyTextDescriptor,
-  relationDescriptor,
-  selectDescriptor,
-  slugDescriptor,
-  stringListDescriptor,
-  textDescriptor,
-  textareaDescriptor,
-  timeDescriptor,
-  urlDescriptor,
-  richSelectDescriptor,
-  dropdownDescriptor,
-];

package/src/lib/fields/display/display-badge.ts

@@ -1,65 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { Badge, type BadgeKind } from '../../shared/components/badge/badge';
-import type { FieldSchema, SelectField } from '../../core/models/schema.model';
-
-/**
- * Display por defecto de `boolean` y `select` (R4.1 · modo `display`).
- *
- * Absorbe `formatValue` + `resolveBadgeKind` de `detail-view` (R4.2): los
- * estados siguen clasificándose con el mismo vocabulario —
- * `PENDIENTE/WAITING/EN_PROCESO/PROCESSING` en `warning`,
- * `ENTREGADO/DELIVERED/…` en `success`, `CANCELADO/REVOCADA/ERROR/…` en
- * `danger` y el resto en `neutral` — porque es el criterio que el operador
- * ya reconoce en la cabecera de la ficha.
- *
- * `boolean` pinta `Sí`/`No` con `success`/`neutral` (la paridad de R4.2);
- * los `trueLabel`/`falseLabel` del schema siguen siendo cosa del control de
- * **edición**, y de la columna de lista (R4.3), que sí los usa.
- */
-@Component({
-  selector: 'app-field-display-badge',
-  imports: [Badge],
-  template: `<app-badge [label]="label()" [kind]="kind()" />`,
-})
-export class FieldDisplayBadge {
-  readonly field = input.required<FieldSchema>();
-  readonly value = input<unknown>(null);
-  /** El chip de la cabecera ya es este componente: se ignora. */
-  readonly chip = input(false);
-
-  protected readonly label = computed(() => {
-    if (this.field().type === 'boolean') {
-      return this.value() ? 'Sí' : 'No';
-    }
-    const opciones = (this.field() as SelectField).options ?? [];
-    const encontrada = opciones.find((o) => o.value === String(this.value()));
-    return encontrada ? encontrada.label : String(this.value());
-  });
-
-  protected readonly kind = computed<BadgeKind>(() => {
-    if (this.field().type === 'boolean') {
-      return this.value() ? 'success' : 'neutral';
-    }
-    return resolveBadgeKind(String(this.value()));
-  });
-}
-
-/**
- * Clasificación de estados, común al display de detalle (acá) y al
- * timeline del historial (`display-list`). Exportada para que R4.3 pueda
- * reusarla si la columna de lista decide alinearse con este criterio.
- */
-export function resolveBadgeKind(valor: string): BadgeKind {
-  const upper = String(valor).toUpperCase();
-  if (['PENDIENTE', 'WAITING', 'EN_PROCESO', 'PROCESSING'].includes(upper)) return 'warning';
-  if (
-    ['ENTREGADO', 'DELIVERED', 'ACTIVA', 'ACTIVE', 'COMPLETADO', 'SUCCESS', 'SI', 'SÍ'].includes(
-      upper,
-    )
-  )
-    return 'success';
-  if (['CANCELADO', 'CANCELLED', 'REVOCADA', 'REVOKED', 'ERROR', 'NO'].includes(upper))
-    return 'danger';
-  return 'neutral';
-}

package/src/lib/fields/display/display-date.ts

@@ -1,39 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { Badge } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-
-const FORMATO_FECHA = new Intl.DateTimeFormat('es-PE', { dateStyle: 'medium', timeZone: 'UTC' });
-
-/**
- * Display por defecto de `date` (R4.1 · modo `display`).
- *
- * Misma fórmula que `formatValue` de `detail-view` antes de R4.2: `es-PE`,
- * `dateStyle: 'medium'`, **UTC** para que la fecha no se corra un día según
- * el huso de quien abra la ficha, y texto crudo si no es parseable.
- */
-@Component({
-  selector: 'app-field-display-date',
-  imports: [Badge],
-  template: `
-    @if (chip()) {
-      <app-badge [label]="texto()" />
-    } @else {
-      {{ texto() }}
-    }
-  `,
-})
-export class FieldDisplayDate {
-  readonly field = input.required<FieldSchema>();
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: la fecha se pinta como chip compacto. */
-  readonly chip = input(false);
-
-  protected readonly texto = computed(() => {
-    const d = new Date(String(this.value()));
-    if (Number.isNaN(d.getTime())) {
-      return String(this.value());
-    }
-    return FORMATO_FECHA.format(d);
-  });
-}

package/src/lib/fields/display/display-defaults.ts

@@ -1,84 +0,0 @@
-import type { Type } from '@angular/core';
-
-import type { FieldType } from '../../core/models/schema.model';
-
-/** Carga perezosa del componente que pinta un valor en modo `display`. */
-export type DisplayLoader = () => Promise<Type<any>>;
-
-const TEXTO: DisplayLoader = () =>
-  import('./display-text').then((module) => module.FieldDisplayText);
-const FECHA: DisplayLoader = () =>
-  import('./display-date').then((module) => module.FieldDisplayDate);
-const NUMERO: DisplayLoader = () =>
-  import('./display-number').then((module) => module.FieldDisplayNumber);
-const BADGE: DisplayLoader = () =>
-  import('./display-badge').then((module) => module.FieldDisplayBadge);
-const IMAGEN: DisplayLoader = () =>
-  import('./display-image').then((module) => module.FieldDisplayImage);
-const ARCHIVO: DisplayLoader = () =>
-  import('./display-file').then((module) => module.FieldDisplayFile);
-const LISTA: DisplayLoader = () =>
-  import('./display-list').then((module) => module.FieldDisplayList);
-
-/**
- * **Tabla de display por defecto según `field.type`** (F3 de
- * `doc/refactormotor.md`, R4.1 del plan): «cada descriptor declara si sabe
- * pintarse en `display`; si no, usa un `display` por defecto según tipo».
- *
- * La declaración vive en el descriptor (`surfaces: ['form', 'display']`) y
- * el componente sale de acá: un solo sitio decide qué pinta cada tipo en la
- * ficha de detalle. Es la misma familia de cambio que la tabla de formato
- * de columna de R4.4 — «declarada, no implícita».
- *
- * `Record<FieldType, …>` es el **tripwire de exhaustividad en compilación**:
- * un tipo nuevo obliga a elegir su display antes de que el build pase, y un
- * tipo retirado obliga a limpiar la entrada. En runtime el acceso pasa por
- * `displayLoader()`, que no lanza si el `type` viene de un schema mal
- * escrito.
- *
- * Paridad con el `formatValue` que vivía en `detail-view` (R4.2):
- * `text/textarea/slug/url/email/phone/readonly-text/relation/group/
- * key-value/string-list/multiselect/time` → texto crudo · `date` → fecha ·
- * `number/currency` → número · `boolean/select` → badge · `image` →
- * miniatura · `list` → timeline.
- */
-const DISPLAY_POR_DEFECTO: Record<FieldType, DisplayLoader> = {
-  text: TEXTO,
-  textarea: TEXTO,
-  slug: TEXTO,
-  url: TEXTO,
-  email: TEXTO,
-  phone: TEXTO,
-  'readonly-text': TEXTO,
-  relation: TEXTO,
-  group: TEXTO,
-  'key-value': TEXTO,
-  'string-list': TEXTO,
-  multiselect: TEXTO,
-  time: TEXTO,
-  date: FECHA,
-  number: NUMERO,
-  currency: NUMERO,
-  boolean: BADGE,
-  select: BADGE,
-  image: IMAGEN,
-  file: ARCHIVO,
-  list: LISTA,
-  color: TEXTO,
-  // Un rich-select se muestra con el label de la opción elegida.
-  'rich-select': TEXTO,
-  // Un dropdown se muestra con el label de la opción elegida.
-  dropdown: TEXTO,
-};
-
-/**
- * Componente de display para un `type`, o `undefined` si no está en la
- * tabla (tipo fuera de la unión — p. ej. un schema con un `type` mal
- * escrito). Ese `undefined` es lo que el host traduce en la degradación
- * controlada de R1.10: en dev se avisa, en producción se omite.
- */
-export function displayLoader(type: string): DisplayLoader | undefined {
-  return Object.prototype.hasOwnProperty.call(DISPLAY_POR_DEFECTO, type)
-    ? DISPLAY_POR_DEFECTO[type as FieldType]
-    : undefined;
-}

package/src/lib/fields/display/display-file.ts

@@ -1,41 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { Badge } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-
-/**
- * Display por defecto de `file` (R4.1 · modo `display` · R9.5.3).
- *
- * Un archivo no tiene miniatura: el valor es la URL pública, y lo honesto
- * en la ficha de detalle es un enlace que lo abre (mismo lenguaje que el
- * «Abrir» de `url`). En la cabecera (`chip`) va como badge con la URL, la
- * paridad con el resto de los displays.
- */
-@Component({
-  selector: 'app-field-display-file',
-  imports: [Badge],
-  template: `
-    @if (chip()) {
-      <app-badge [label]="url()" />
-    } @else {
-      <a
-        class="font-medium text-primary hover:underline"
-        [href]="url()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Abrir archivo
-      </a>
-    }
-  `,
-})
-export class FieldDisplayFile {
-  /** Campo que se pinta. Lo usa el tipo; acá sólo tipa la forma común. */
-  readonly field = input.required<FieldSchema>();
-  /** Valor crudo del registro (la URL pública). El host ya filtró el vacío. */
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: la URL se pinta como chip compacto. */
-  readonly chip = input(false);
-
-  protected readonly url = computed(() => String(this.value()));
-}

package/src/lib/fields/display/display-image.ts

@@ -1,54 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { LucideExternalLink } from '@lucide/angular';
-
-import { Badge } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-
-/**
- * Display por defecto de `image` (R4.1 · modo `display`).
- *
- * Mismo maquetado que la rama `kind === 'image'` de `detail-view` antes de
- * R4.2: miniatura de 7×7 con enlace a la imagen completa y overlay con el
- * icono de «abrir». El `alt` sigue siendo la etiqueta del campo.
- *
- * El host ya se encarga del valor vacío (pinta `—`), así que acá la URL
- * siempre existe.
- */
-@Component({
-  selector: 'app-field-display-image',
-  imports: [Badge, LucideExternalLink],
-  template: `
-    @if (chip()) {
-      <!-- Paridad R4.2: la cabecera siempre mostró el valor formateado
-           como chip, y para una imagen ese valor era la URL. -->
-      <app-badge [label]="url()" />
-    } @else {
-      <a
-        [href]="url()"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group relative inline-block overflow-hidden rounded-xl border border-neutral/20 shadow-xs transition hover:border-primary"
-      >
-        <img
-          [src]="url()"
-          [alt]="field().label"
-          class="h-28 w-28 object-cover transition duration-300 group-hover:scale-105"
-        />
-        <div
-          class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition group-hover:opacity-100"
-        >
-          <svg lucideExternalLink size="18" class="text-white" />
-        </div>
-      </a>
-    }
-  `,
-})
-export class FieldDisplayImage {
-  readonly field = input.required<FieldSchema>();
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: la URL se pinta como chip compacto. */
-  readonly chip = input(false);
-
-  protected readonly url = computed(() => String(this.value()));
-}

package/src/lib/fields/display/display-list.ts

@@ -1,107 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { LucideClock } from '@lucide/angular';
-
-import { Badge, type BadgeKind } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-import { resolveBadgeKind } from './display-badge';
-
-const FORMATO_FECHA_HORA = new Intl.DateTimeFormat('es-PE', {
-  dateStyle: 'medium',
-  timeStyle: 'short',
-  timeZone: 'UTC',
-});
-
-type Item = Record<string, unknown>;
-
-/**
- * Display por defecto de `list` (R4.1 · modo `display`).
- *
- * Es la línea de tiempo del historial: **toda la plantilla de `list` que
- * vivía en `detail-view`** se muda acá, que es lo que R4.2 exige
- * («`detail-view` no tiene plantilla propia de campo»). El agrupador sigue
- * siendo `detail-view`: él decide que este campo va en su bloque con el
- * `<h3>` y el ancho grande; acá sólo se pinta el valor.
- *
- * `itemFields` no participa: el timeline lee `action` / `at` / `detail`
- * directamente, igual que antes.
- */
-@Component({
-  selector: 'app-field-display-list',
-  imports: [Badge, LucideClock],
-  template: `
-    @if (chip()) {
-      <!-- Paridad R4.2: la cabecera siempre mostró el valor formateado
-           como chip, y para una lista ese valor era «N elementos». -->
-      <app-badge [label]="resumen()" />
-    } @else if (items().length > 0) {
-      <div
-        class="relative pl-6 space-y-4 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-neutral/20"
-      >
-        @for (item of items(); track $index) {
-          <div class="relative group">
-            <span
-              class="absolute -left-6 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary/20 ring-4 ring-surface"
-            >
-              <span class="h-1.5 w-1.5 rounded-full bg-primary"></span>
-            </span>
-            <div
-              class="rounded-xl border border-neutral/10 bg-neutral/5 p-3.5 transition hover:border-neutral/20"
-            >
-              <div class="flex flex-wrap items-center justify-between gap-2 mb-1.5">
-                @if (item['action']) {
-                  <app-badge
-                    [label]="etiquetaAccion(item['action'])"
-                    [kind]="kindAccion(item['action'])"
-                  />
-                }
-                @if (item['at']) {
-                  <span class="text-xs text-neutral flex items-center gap-1">
-                    <svg lucideClock size="12" />
-                    {{ fechaHora(item['at']) }}
-                  </span>
-                }
-              </div>
-              @if (item['detail']) {
-                <p class="text-sm text-neutral-light">{{ item['detail'] }}</p>
-              }
-            </div>
-          </div>
-        }
-      </div>
-    } @else {
-      <p class="text-xs italic text-neutral">No hay registros en el historial.</p>
-    }
-  `,
-})
-export class FieldDisplayList {
-  readonly field = input.required<FieldSchema>();
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: el resumen «N elementos» va como chip. */
-  readonly chip = input(false);
-
-  /** El host entrega el valor crudo; sólo un array tiene timeline. */
-  protected readonly items = computed<Item[]>(() =>
-    Array.isArray(this.value()) ? (this.value() as Item[]) : [],
-  );
-
-  /** Mismo texto que daba el formateo de detalle previo a R4.2. */
-  protected resumen(): string {
-    return `${this.items().length} elementos`;
-  }
-
-  protected fechaHora(valor: unknown): string {
-    if (!valor) return '—';
-    const d = new Date(String(valor));
-    return Number.isNaN(d.getTime()) ? String(valor) : FORMATO_FECHA_HORA.format(d);
-  }
-
-  protected etiquetaAccion(valor: unknown): string {
-    if (!valor) return '';
-    return String(valor).replace(/_/g, ' ');
-  }
-
-  protected kindAccion(valor: unknown): BadgeKind {
-    return resolveBadgeKind(String(valor));
-  }
-}

package/src/lib/fields/display/display-number.ts

@@ -1,41 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { Badge } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-
-const FORMATO_NUMERO = new Intl.NumberFormat('es-PE');
-
-/**
- * Display por defecto de `number` y `currency` (R4.1 · modo `display`).
- *
- * Los dos tipos compartían rama en `formatValue` y la comparten acá: miles
- * con separador `es-PE` y sin decimales fijos (el schema controla los
- * decimales con `decimals` en el form; en display manda el valor tal cual
- * viene). Si no es número, se pinta el texto crudo — la degradación que ya
- * hacía `detail-view`.
- */
-@Component({
-  selector: 'app-field-display-number',
-  imports: [Badge],
-  template: `
-    @if (chip()) {
-      <app-badge [label]="texto()" />
-    } @else {
-      {{ texto() }}
-    }
-  `,
-})
-export class FieldDisplayNumber {
-  readonly field = input.required<FieldSchema>();
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: el número se pinta como chip compacto. */
-  readonly chip = input(false);
-
-  protected readonly texto = computed(() => {
-    const n = Number(this.value());
-    if (!Number.isFinite(n)) {
-      return String(this.value());
-    }
-    return FORMATO_NUMERO.format(n);
-  });
-}

package/src/lib/fields/display/display-text.ts

@@ -1,42 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-import { Badge } from '../../shared/components/badge/badge';
-import type { FieldSchema } from '../../core/models/schema.model';
-
-/**
- * Display por defecto de los tipos textuales (R4.1 · modo `display`).
- *
- * Toma el valor crudo del registro —no el árbol del formulario— y lo pinta
- * como texto: el `default` de `formatValue` de `detail-view`, que era donde
- * caían `text`, `textarea`, `slug`, `url`, `email`, `phone`, `readonly-text`,
- * `relation`, `group`, `key-value`, `string-list`, `multiselect` y `time`.
- *
- * `String(raw)` conserva el comportamiento previo (un array sale `a,b`; un
- * objeto sale `[object Object]`): R4.2 pide que «los 7 detalles rendericen
- * igual», así que la paridad manda sobre la estética.
- *
- * Todos los display declaran `field`, `value` y `chip` aunque no los usen:
- * el host les pasa la misma forma a los 6 y `ngComponentOutletInputs` no
- * admite claves que el componente no declare.
- */
-@Component({
-  selector: 'app-field-display-text',
-  imports: [Badge],
-  template: `
-    @if (chip()) {
-      <app-badge [label]="texto()" />
-    } @else {
-      {{ texto() }}
-    }
-  `,
-})
-export class FieldDisplayText {
-  /** Campo que se pinta. Lo usa el tipo; acá sólo tipa la forma común. */
-  readonly field = input.required<FieldSchema>();
-  /** Valor crudo del registro. El host ya filtró el vacío (`—`). */
-  readonly value = input<unknown>(null);
-  /** `true` en la cabecera: el texto se pinta como chip compacto. */
-  readonly chip = input(false);
-
-  protected readonly texto = computed(() => String(this.value()));
-}