Select

Paquete: @tiendana/web-foundation

Estilos del selector tdn-select: el campo con sus valores seleccionados y la lista desplegable con búsqueda, agrupación y selección múltiple. En Angular lo renderiza el componente TdnSelect; esta página documenta las clases y variables CSS que lo estilizan.

Características

✅ Selección única o múltiple - Valores como texto o como fichas (tokens)
✅ Lista fuera del formulario - Se aloja en document.body, con posición fija
✅ Ancho configurable - --tdn-select-dropdown-width ensancha la lista respecto al campo
✅ Hoja a pantalla completa en móvil - Activada por .tdn-select__dropdown-list--responsive
✅ Búsqueda, agrupación y selección total - Con sus propios elementos BEM

Demo

El campo cerrado y la lista abierta. En producción la lista tiene position: fixed y la coloca el componente; en esta demo se fuerza position: static solo para verla junto al campo.

Cargando demo...

Ver código

Ancho de la lista

El componente declara el ancho de la lista como var(--tdn-select-dropdown-width, var(--tdn-select-trigger-width, auto)):

Propiedad	Quién la escribe	Descripción
--tdn-select-trigger-width	El componente, en cada posicionamiento	Ancho del campo en px. Es el ancho por defecto de la lista
--tdn-select-dropdown-width	Tú, en el tdn-select o en cualquier ancestro	Ancho propio de la lista, por ejemplo min(420px, 90vw). El componente lee el valor calculado del host y lo copia a la lista

<tdn-select formControlName="product" [data]="products" simple labelKey="name"
            style="--tdn-select-dropdown-width: min(420px, 90vw)" />

Las variantes .document-input y .cellphone de Form Element ya fijan este valor en 200px y 300px.

No fijes el ancho en línea

Un width en línea o con !important sobre la lista anula las dos propiedades. Dimensiona siempre con --tdn-select-dropdown-width.

La lista no vive dentro del select

Mientras está abierta, la lista se mueve a document.body. Un selector que la alcance a través del select o de su contexto (.mis-filtros .tdn-select__dropdown-list) no coincide, y las propiedades CSS personalizadas, salvo --tdn-select-dropdown-width, no se heredan desde donde está el select. Estila la lista con un selector que se sostenga solo.

Hoja a pantalla completa

En ventanas de hasta 600px de ancho, la lista con la clase .tdn-select__dropdown-list--responsive se muestra como hoja a pantalla completa:

• Ocupa todo el viewport (top: 0, left: 0, width y height al 100%) con z-index: var(--z-index-modal).
• Se muestra el botón de volver (__list-filter__icon-back, o __list-container__simple-close cuando no hay búsqueda).
• La lista interior usa toda la altura disponible.

TdnSelect agrega .tdn-select__dropdown-list--responsive salvo que se use noResponsive o dropdownMobileFixed: false; en ese caso el host recibe .tdn-select--no-responsive. La clase requiere @tiendana/web-foundation 0.5.4 o superior: con una versión anterior no estiliza nada.

Referencia de clases

Campo

Clase	Descripción
.tdn-select	Host del selector (position: relative)
.tdn-select--active	La lista está abierta
.tdn-select--disabled	Deshabilitado: opacidad 0.5 y cursor not-allowed
.tdn-select--multiple	Selección múltiple: controles en columna
.tdn-select--controls-column	Fuerza los controles en columna
.tdn-select--no-responsive	Desactiva la hoja a pantalla completa
.tdn-select--ontop	La lista se abrió hacia arriba
.tdn-select__selected-list	Trigger: valores y controles
.tdn-select__selected-list__values	Texto del valor seleccionado
.tdn-select__selected-list__values__token	Ficha de un valor en selección múltiple (fondo verde neón #C6F54F resuelto en compilación, no tematizable con --color-green-neon)
.tdn-select__selected-list__values__token__label	Texto de la ficha
.tdn-select__selected-list__values__token__remove	Botón para quitar una ficha
.tdn-select__selected-list__countplaceholder	Contador +N de valores ocultos
.tdn-select__selected-list__controls__clear-all	Botón para limpiar la selección
.tdn-select__selected-list__controls__chevron	Chevron
.tdn-select__selected-list__controls__chevron--rotate	Chevron rotado (lista abierta)

Lista

Clase	Descripción
.tdn-select__dropdown-list	Panel de la lista: position: fixed, z-index: var(--z-index-dropdown)
.tdn-select__dropdown-list--ontop	La lista se abrió por encima del campo
.tdn-select__dropdown-list--single-select-mode	Modo de selección única (el check usa --select-check-color)
.tdn-select__dropdown-list--responsive	Activa la hoja a pantalla completa en móvil
.tdn-select__dropdown-list__list-filter	Barra de búsqueda (con __icon-back, __icon-search y __icon-clear)
.tdn-select__dropdown-list__select-all	Fila de seleccionar todo
.tdn-select__dropdown-list__list-container	Contenedor de la lista
.tdn-select__dropdown-list__list-container__list	Zona con scroll
.tdn-select__dropdown-list__list-container__list__group	Encabezado de grupo (sticky)
.tdn-select__dropdown-list__list-container__list__item	Opción
.tdn-select__dropdown-list__list-container__list__item--selected	Opción seleccionada
.tdn-select__dropdown-list__list-container__list__item--disabled	Opción deshabilitada
.tdn-select__dropdown-list__list-container__list__loading	Fila de carga en paginación remota
.tdn-select__dropdown-list__list-message	Mensaje de lista vacía
.highlighted-text	Fragmento que coincide con la búsqueda (--color-error)

Propiedades CSS personalizadas

Todas son opcionales y tienen un valor por defecto en la hoja.

Propiedad	Descripción
--select-bg	Fondo de la lista
--select-shadow-color	Color de la sombra de la lista
--select-border	Color de los separadores de la lista
--select-hover-color	Fondo de la opción en hover
--select-selected-bg-color	Fondo de la opción seleccionada
--select-base-color	Color del checkbox
--select-check-color	Color del check en selección única
--select-group-bg-color, --select-group-padding, --select-group-font-weight	Aspecto de los encabezados de grupo

Ver También

• TdnSelect - Componente Angular
• Form Element - Contenedor del campo
• Content Placeholder - Esqueleto usado en la fila de carga