<div class="documents-summary">
<div class="documents-summary__filter">
<div class="wrap">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Titulares</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select-net">
<select name="select">
<option value="option0" selected>1º Titular</option>
<option value="option2">Nombre muy largo del Titular 2</option>
</select>
</div>
<div class="field-bottom">
</div>
</div>
<a class="btn
btn_secondary
" href="#" id="">
Añade un 2º Titular
<svg class="icon icon-16_plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_plus"></use>
</svg>
</a>
</div>
<div class="content__btn">
<a class="btn
" href="#" id="">
Añade documentos
</a>
</div>
</div>
<ul class="documents-summary__list">
<li class="documents-summary__list__item">
<div class="card card__document uploaded">
<div class="card__heading">
<h3 class="title-m">DNI</h3>
<span class="state earring caption-label">pendiente</span>
</div>
<div class="card__footer">
<ul class="card__footer__total-file">
<li class="item filled"></li>
<li class="item filled"></li>
<li class="item empty"></li>
</ul>
<p class="card__footer__info">
<span class="caption-label">2/3 documentos</span>
<span class="bodycopy-s">2 documentos pendientes de añadir</span>
</p>
</div>
<div class="card__options">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn " id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_menu-olives ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
</svg>
</button>
</div>
<div class="dropdown-menu__overlay "></div>
<div class="dropdown-menu " tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<nav class="dropdown-menu__list">
</nav>
</div>
</div>
</div>
</div>
</li>
<li class="documents-summary__list__item">
<div class="card card__document uploaded">
<div class="card__heading">
<h3 class="title-m">DNI</h3>
<span class="state error caption-label">error</span>
</div>
<div class="card__footer">
<ul class="card__footer__total-file">
<li class="item rejected"></li>
</ul>
<p class="card__footer__info">
<span class="caption-label">1/1 documentos</span>
<span class="bodycopy-s">El documento ha sido rechazado por su agente</span>
</p>
</div>
<div class="card__options">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn " id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_menu-olives ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
</svg>
</button>
</div>
<div class="dropdown-menu__overlay "></div>
<div class="dropdown-menu " tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<nav class="dropdown-menu__list">
</nav>
</div>
</div>
</div>
</div>
</li>
<li class="documents-summary__list__item">
<div class="card card__document uploaded">
<div class="card__heading">
<h3 class="title-m">Nóminas</h3>
<span class="state earring caption-label">pendiente</span>
</div>
<div class="card__footer">
<ul class="card__footer__total-file">
<li class="item filled"></li>
<li class="item filled"></li>
<li class="item filled"></li>
</ul>
<p class="card__footer__info">
<span class="caption-label">3/3 documentos</span>
<span class="bodycopy-s">Añadido el 03/01/2024</span>
</p>
</div>
<div class="card__options">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn " id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_menu-olives ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
</svg>
</button>
</div>
<div class="dropdown-menu__overlay "></div>
<div class="dropdown-menu " tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<nav class="dropdown-menu__list">
</nav>
</div>
</div>
</div>
</div>
</li>
<li class="documents-summary__list__item">
<div class="card card__document uploaded">
<div class="card__heading">
<h3 class="title-m">Vida laboral</h3>
<span class="state validated caption-label">Valido</span>
</div>
<div class="card__footer">
<ul class="card__footer__total-file">
<li class="item filled"></li>
<li class="item filled"></li>
</ul>
<p class="card__footer__info">
<span class="caption-label">2/2 documentos</span>
<span class="bodycopy-s">El documento ha sido validado</span>
</p>
</div>
<div class="card__options">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn " id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_menu-olives ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
</svg>
</button>
</div>
<div class="dropdown-menu__overlay dropdown-menu--open"></div>
<div class="dropdown-menu dropdown-menu--open" tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<h3 class="dropdown-menu__heading title-m">DNI</h3>
<nav class="dropdown-menu__list">
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Ver documento</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Descargar documento</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--disabled" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Eliminar documento</span>
</a>
</nav>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="documents-summary__link">
<a class="link
" href="#">
<span>Ver detalle de todos los documentos</span>
</a>
</div>
</div>
<div class="documents-summary">
<div class="documents-summary__filter">
<div class="wrap">
{{> '@form-select' headline}}
{{#if btn-second-holder}}
{{> '@btn' btn-second-holder}}
{{/if}}
</div>
<div class="content__btn">
{{> '@btn' btn }}
</div>
</div>
<ul class="documents-summary__list">
{{#each item}}
<li class="documents-summary__list__item">
{{> '@card' card }}
</li>
{{/each}}
</ul>
<div class="documents-summary__link">
{{> '@link' link }}
</div>
</div>
{
"headline": {
"field-top": {
"label": {
"text": "Titulares"
}
},
"net": true,
"select": {
"option": [
{
"value": "option0",
"text": "1º Titular",
"selected": true
},
{
"value": "option2",
"text": "Nombre muy largo del Titular 2"
}
]
}
},
"btn-second-holder": {
"href": "#",
"text": "Añade un 2º Titular",
"isSecondary": true,
"icon-after": {
"name": "16_plus",
"isAfter": true
}
},
"btn": {
"href": "#",
"text": "Añade documentos"
},
"item": [
{
"card": {
"isDocument": true,
"uploaded": true,
"upload": false,
"heading": "DNI",
"text-state": "pendiente",
"state": "earring",
"file-info": "2 documentos pendientes de añadir",
"fraction": "2/3",
"totalItem": [
{
"state": "filled"
},
{
"state": "filled"
},
{
"state": "empty"
}
],
"options": {
"isOpen": "",
"iconBtn": {
"text": "",
"icon-before": {
"name": "16_menu-olives",
"iconButton": true
},
"bottomless": true
}
}
}
},
{
"card": {
"isDocument": true,
"uploaded": true,
"upload": false,
"heading": "DNI",
"text-state": "error",
"state": "error",
"file-info": "El documento ha sido rechazado por su agente",
"fraction": "1/1",
"totalItem": [
{
"state": "rejected"
}
],
"options": {
"isOpen": "",
"iconBtn": {
"text": "",
"icon-before": {
"name": "16_menu-olives",
"iconButton": true
},
"bottomless": true
}
}
}
},
{
"card": {
"isDocument": true,
"uploaded": true,
"upload": false,
"heading": "Nóminas",
"text-state": "pendiente",
"state": "earring",
"file-info": "Añadido el 03/01/2024",
"fraction": "3/3",
"totalItem": [
{
"state": "filled"
},
{
"state": "filled"
},
{
"state": "filled"
}
],
"options": {
"isOpen": "",
"iconBtn": {
"text": "",
"icon-before": {
"name": "16_menu-olives",
"iconButton": true
},
"bottomless": true
}
}
}
},
{
"card": {
"isDocument": true,
"uploaded": true,
"upload": false,
"heading": "Vida laboral",
"text-state": "Valido",
"state": "validated",
"file-info": "El documento ha sido validado",
"fraction": "2/2",
"totalItem": [
{
"state": "filled"
},
{
"state": "filled"
}
],
"options": {
"isOpen": "dropdown-menu--open",
"iconBtn": {
"text": "",
"icon-before": {
"name": "16_menu-olives",
"iconButton": true
},
"bottomless": true
},
"hasTitle": true,
"heading": "DNI",
"menuList": [
{
"state": "active",
"text": "Ver documento"
},
{
"state": "active",
"text": "Descargar documento"
},
{
"state": "disabled",
"text": "Eliminar documento"
}
]
}
}
}
],
"link": {
"href": "#",
"text": "Ver detalle de todos los documentos"
}
}
.documents-summary {
&__filter {
display:flex;
flex-flow: wrap;
justify-content: space-between;
align-items: flex-end;
.btn{
margin-bottom: 20px;
}
.wrap{
display: flex;
align-items: flex-end;
gap: 30px;
@media (--viewport-xs-max) {
width: 100%;
gap: 4px;
flex-direction: column;
align-items: flex-start;
.form-select{
width: 100%;
}
.btn{
justify-content: center;
width: 100%;
}
}
}
@media (--viewport-xs-max) {
.content__btn {
width: 100%;
.btn {
width: 100%;
text-align: center;
justify-content: center;
}
}
}
.access-select-net {
min-width: max-content;
}
}
&__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
@media (--viewport-xs-max) {
display:flex;
flex-flow:column;
}
&__item {
flex-basis: 100%;
}
}
&__link {
margin-top: 60px;
}
}
No notes defined.