device-display

Paquetes: @tiendana/ngx-core/ui @tiendana/api-types

Template para mostrar un dispositivo registrado: una terminal POS, una pantalla de cocina (KDS) o un kiosko de autoservicio. Se usa como plantilla de ítem en tdn-select o de forma independiente en listados. Es el único display template para dispositivos y forma parte de la familia de Display Templates.

Antes terminal-pos-display

Desde ngx-core 0.8.0 el selector terminal-pos-display y la clase TerminalPosDisplayComponent ya no existen. Reemplaza por device-display y DeviceDisplayComponent. Los inputs (data, full) no cambian.

Características

✅ Cubre los tres tipos de app que comparten el registro: POS, KDS y Kiosko
✅ Etiqueta con la app que corre el dispositivo, calculada desde type_app
✅ Icono del tipo de dispositivo (type_device)
✅ Segunda línea con ID, versión de la app, prefijo de factura y marca
✅ Modo full que añade el modelo
✅ Standalone, OnPush y signal inputs

API

Inputs

Input	Tipo	Default	Descripción
data	InputSignal<TerminalPOS | undefined | null>	requerido	Dispositivo a mostrar, de cualquier TypeApp. null dibuja una carcasa vacía
full	InputSignal<boolean | undefined | null>	false	Muestra además el modelo y agrega la clase full al host

Signals

Signal	Tipo	Descripción
appLabel	Signal<string>	Nombre de la app que corre el dispositivo. Cadena vacía si el registro no lo indica

Qué dibuja

Primera línea. El icono del tipo de dispositivo, el nombre (name, o prefix_invoice si no hay nombre) y la etiqueta de la app.

type_app (TypeApp)	Etiqueta
POS	POS
KDS	KDS
KIOSK	Kiosko
ausente o desconocido	sin etiqueta

Un dispositivo cuya app no se conoce no se dibuja como POS: la ausencia de etiqueta se lee como un dato pendiente, mientras que «POS» se leería como un hecho.

Segunda línea. Solo se muestran los datos que la fila tiene, cada uno con un title en español que nombra el campo:

Dato	Prefijo visible	title
id	ID:	ID
current_version	v	Versión de App
prefix_invoice	P:	Prefijo
brand	M:	Marca
model (solo con full)	M:	Modelo

Marca y modelo comparten el prefijo M:; solo el tooltip los distingue.

Icono por type_device. El icono se pinta con la clase .type.type-N:

type_device	Valor	Imagen
ANDROID	1	android.svg
IOS	2	apple.svg
WEB	3	android.svg
DESKTOP	4	windows.svg

Textos fijos

Las etiquetas (POS, KDS, Kiosko) y los title son cadenas fijas en español, no claves de traducción.

Uso

Dentro de tdn-select

<tdn-select formControlName="device" [data]="devices()" simple labelKey="name">
  <ng-template #listItem let-item="item">
    <device-display [data]="item" />
  </ng-template>
</tdn-select>

Encabezado de detalle, con el modelo

<device-display [data]="device()" [full]="true" />

Importación

import { Component, input } from '@angular/core';
import { TerminalPOS } from '@tiendana/api-types';
import { DeviceDisplayComponent } from '@tiendana/ngx-core/ui';

@Component({
  selector: 'app-device-row',
  imports: [DeviceDisplayComponent],
  template: `<device-display [data]="device()" />`
})
export class DeviceRowComponent {
  readonly device = input.required<TerminalPOS>();
}

Estilos

Sin full, el host usa una fuente de 11px; con full la primera línea hereda la fuente del contenedor y la segunda línea se mantiene en 11px. La etiqueta de app usa --bg-2dp, 10px y mayúsculas. Los datos de la segunda línea (salvo el ID) se separan con un borde izquierdo de --border-accn-color, una variable que define la app (no @tiendana/web-foundation): sin ella el separador no se dibuja. La marca se muestra con la primera letra en mayúscula.

Accesibilidad

• El icono del tipo de dispositivo es una imagen de fondo sin texto alternativo: el nombre del dispositivo y la etiqueta de app llevan la información.
• Los datos de la segunda línea exponen su significado en el atributo title, que los lectores de pantalla no siempre anuncian; en vistas de detalle incluye también el texto visible de cada dato.

Ver También

• Display Templates: resto de templates de entidades
• tdn-select: selector que usa estos templates como ítems