<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="ageRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="ageRangeInput" type="text" name="" title="Cuál es tu edad" min='18' max='67' data-default='30'>
<div class="range-slider__symbol" for="ageRangeInput">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderEdad"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
67 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="ingresosMes" type="text" name="" title="" value="0">
<div class="form-input__symbol" for="ingresosMes">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="gastosMes" type="text" name="" title="" value="0">
<div class="form-input__symbol" for="gastosMes">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-select " id="where">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="where-input">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="where-input">
<div class="access-select__option access-select__chosen-option"></div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where1" type="radio" title="MADRID" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
MADRID
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="BARCELONA" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
BARCELONA
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="ALICANTE" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
ALICANTE
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="viviendaElegida">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="tipoVivienda">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageHousePriceRangeInput" type="text" name="" title="Importe de la vivienda" min='100000' max='1000000' data-default='200000' step='1000'>
<div class="range-slider__symbol" for="MortgageHousePriceRangeInput">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderPrice"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
100.000€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="reforma">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input" style="display:none">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="importeReforma" type="text" name="" title="" value="0">
<div class="form-input__symbol" for="importeReforma">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHouseDurationRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageHouseDurationRangeInput" type="text" name="" title="Duración de la hipoteca" min='7' max='30' data-default='30'>
<div class="range-slider__symbol" for="MortgageHouseDurationRangeInput">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderDuracion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="duracion-start" class="bodycopy-xs
">
7 años
</div>
</div>
<div class="range-slider__legend-end">
<div id="duracion-end" class="bodycopy-xs
">
30 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="TINRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="TINRangeSliderInput" type="text" name="" title="Duración de la hipoteca" min='1' max='8' data-default='3'>
<div class="range-slider__symbol" for="TINRangeSliderInput">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="range-slider__slider" id="TINsliderDuracion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="tin-start" class="bodycopy-xs
">
1%
</div>
</div>
<div class="range-slider__legend-end">
<div id="tin-end" class="bodycopy-xs
">
8%
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="tae" type="text" name="" title="" value="-" disabled>
<div class="form-input__symbol" for="tae">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<ul class="form-list calculator-form-list row" {{#if hasID}}id="{{idComponent}}"{{/if}}>
{{#each this.form-list}}
<li class="col
form-list__item
{{#if this.extraClasses}}
{{ this.extraClasses }}
{{/if}}
{{#if isFourcol}}
col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3
{{else if isFourcolcentered}}
col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3 col-ms-mr-ml
{{else if isThreecol}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
{{else if isThreecolcentered}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4 col-ms-mr-ml
{{else if isTwocol}}
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
{{else if isTwocolcentered}}
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6 col-ms-mr-ml
{{else if isOnecol}}
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
{{else}}
col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-3
{{/if}}
">
{{#if this.isTwoColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div
class="form-list__field
{{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}}
{{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}}
{{#if this.isHidden-1}}hidden{{/if}}
{{#if this.isRequired-1}}required{{/if}}"
{{#if this.id-1}}
id="{{ id-1 }}"
{{/if}}
>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div
class="form-list__field
{{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}}
{{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}}
{{#if this.isHidden-2}}hidden{{/if}}
{{#if this.isRequired-2}}required{{/if}}"
{{#if this.id-2}}
id="{{ id-2 }}"
{{/if}}
>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isOneColumn}}
<div class="row">
<div class="{{ col }}">
<div
class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}"
{{#if this.id}}
id="{{ id }}"
{{/if}}
>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.calculator-form-result}}
{{> @calculator-form-result this.calculator-form-result }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasTwoFields}}
{{#each this.field}}
<div
class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}"
{{#if this.id}}
id="{{ id }}"
{{/if}}
>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.calculator-form-result}}
{{> @calculator-form-result this.calculator-form-result }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
</div>
{{/each}}
{{else}}
<div
class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}"
{{#if this.id}}
id="{{ id }}"
{{/if}}
>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.calculator-form-result}}
{{> @calculator-form-result this.calculator-form-result }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{
"hasID": false,
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"tooltip-label": {
"isLabel": true,
"label": {
"text": "¿Cuál es tu edad?"
},
"tooltip": {
"title": {
"text": "¿Cuál es tu edad?",
"isP": true
},
"bodycopy": {
"text": "Edad del mayor de los titulares."
}
}
},
"range-slider": {
"id": "ageRangeSlider",
"inputId": "ageRangeInput",
"sliderId": "sliderEdad",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='67' data-default='30'",
"label": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "67 años"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"id": "ingresos-Mes",
"tooltip-label": {
"isLabel": true,
"label": {
"text": "INGRESOS MENSUALES TOTALES NETOS"
},
"tooltip": {
"title": {
"text": "Ingresos mensuales netos",
"isP": true
},
"bodycopy": {
"text": "Suma total de los ingresos de todos los titulares de la hipoteca."
}
}
},
"inputValue": "0",
"inputId": "ingresosMes",
"label": {
"text": "€"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"id": "gastos-Mes",
"tooltip-label": {
"isLabel": true,
"label": {
"text": "GASTOS MENSUALES OTROS PRÉSTAMOS"
},
"tooltip": {
"title": {
"text": "Gastos otros préstamos",
"isP": true
},
"bodycopy": {
"text": "Suma total de otros préstamos, deudas, hipotecas o pensiones."
}
}
},
"inputValue": "0",
"inputId": "gastosMes",
"label": {
"text": "€"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-select": {
"tooltip-label": {
"notit": true
},
"id": "where",
"select": {
"chosen-label": "¿Dónde quieres comprar?",
"id": "where-input",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "MADRID"
},
{
"id": "where2",
"select-name": "where",
"text": "BARCELONA"
},
{
"id": "where3",
"select-name": "where",
"text": "ALICANTE"
}
]
},
"error-message": {
"text": "Elige provincia, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"tooltip-label": {
"label": {
"text": "¿Tienes vivienda elegida?"
}
},
"id": "viviendaElegida",
"radio-group": [
{
"id": "viviendaElegidaSi",
"title": "Si",
"name": "Vivienda elegida",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "viviendaElegidaNo",
"title": "No",
"name": "Vivienda elegida",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
],
"error-message": {
"text": "Elige una opción, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"tooltip-label": {
"label": {
"text": "Tipo de inmueble"
}
},
"id": "tipoVivienda",
"radio-group": [
{
"id": "tipoViviendaNueva",
"title": "Nuevo",
"name": "Tipo de inmueble",
"additionalAttributes": "checked",
"label": {
"text": "Nuevo",
"type": "-placeholder-m"
}
},
{
"id": "tipoViviendaSegundaMano",
"title": "Segunda mano",
"name": "Tipo de inmueble",
"label": {
"text": "2ª mano",
"type": "-placeholder-m"
}
}
],
"error-message": {
"text": "Elige una opción, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"tooltip-label": {
"label": {
"text": "Importe de la vivienda"
}
},
"range-slider": {
"id": "MortgageHousePriceRangeSlider",
"inputId": "MortgageHousePriceRangeInput",
"sliderId": "sliderPrice",
"inputTitle": "Importe de la vivienda",
"validationAttributes": "min='100000' max='1000000' data-default='200000' step='1000'",
"label": {
"text": "€"
},
"legend-start": {
"text": "100.000€"
},
"legend-end": {
"text": "1.000.000€"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"tooltip-label": {
"label": {
"text": "¿Quieres reformar?"
}
},
"id": "reforma",
"radio-group": [
{
"id": "reformaSi",
"title": "Si",
"name": "Quieres reformar",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "reformaNo",
"title": "No",
"name": "Quieres reformar",
"additionalAttributes": "checked",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
],
"error-message": {
"text": "Elige una opción, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"isHidden": true,
"tooltip-label": {
"label": {
"text": "Importe de la reforma"
}
},
"id": "DivReformaSN",
"inputValue": "0",
"inputId": "importeReforma",
"label": {
"text": "€"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"tooltip-label": {
"label": {
"text": "Duración de la hipoteca"
}
},
"range-slider": {
"id": "MortgageHouseDurationRangeSlider",
"inputId": "MortgageHouseDurationRangeInput",
"sliderId": "sliderDuracion",
"inputTitle": "Duración de la hipoteca",
"validationAttributes": "min='7' max='30' data-default='30'",
"label": {
"text": "años"
},
"legend-start": {
"Id": "duracion-start",
"text": "7 años"
},
"legend-end": {
"Id": "duracion-end",
"text": "30 años"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"tooltip-label": {
"label": {
"text": "Tipo de interés"
},
"tooltip": {
"title": {
"text": "Tipo de interés (TIN)",
"isP": true
},
"bodycopy": {
"text": "Este es el tipo de interés es con el que vamos a calcular tu hipoteca. Puede que no sea parte de nuestra oferta comercial, te recomendamos que explores nuestra web-"
},
"link": {
"href": "https://hipotecas.com/es/nuestras-hipotecas/",
"text": "Ir a Nuestras hipotecas"
}
}
},
"range-slider": {
"id": "TINRangeSlider",
"inputId": "TINRangeSliderInput",
"sliderId": "TINsliderDuracion",
"inputTitle": "Duración de la hipoteca",
"validationAttributes": "min='1' max='8' data-default='3'",
"label": {
"text": "%"
},
"legend-start": {
"Id": "tin-start",
"text": "1%"
},
"legend-end": {
"Id": "tin-end",
"text": "8%"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"id": "datoTAE",
"isDisabled": true,
"tooltip-label": {
"label": {
"text": "TAE"
},
"tooltip": {
"title": {
"text": "TAE",
"isP": true
},
"bodycopy": {
"text": "Tasa Anual Equivalente. Se calcula automáticamente. Es el coste anual de tu hipoteca e incluye el interés nominal, algunos gastos de constitución y las comisiones bancarias."
}
}
},
"inputValue": "-",
"inputId": "tae",
"disabled": true,
"label": {
"text": "%"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
}
]
}
.calculator-form-list {
li{
&.col-sm-4, &.col-md-4, &.col-lg-4{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
&:nth-child(3) .form-list__field {
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.col-sm-6, &.col-md-6, &.col-lg-6{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.onecolumn{
}
.form-list__field{
position: relative;
}
.form-range-slider {
flex-grow: 0;
}
/*.access-select__chosen-option, .form-fieldset {
margin-top: 32px;
@media (--viewport-xs-max) {margin-top: 0;}
}*/
&:last-child{
.form-list__field{margin-bottom: 0;}
}
}
/*.form-list__error-message {
opacity: 1;
}
.input-validation-error {
border-color: #e4002b;
color: #e4002b;
}*/
.hidden {
display: none;
&-xs {
@media (--viewport-xs-max) {
display: none;
}
&-ms {
@media (--viewport-ms-max) {
display: none;
}
}
}
&-ms {
@media (--viewport-ms-only) {
display: none;
}
&-min {
@media (--viewport-ms-min) {
display: none;
}
}
}
&-sm {
@media (--viewport-sm-only) {
display: none;
}
&-min {
@media (--viewport-sm-min) {
display: none;
}
}
}
}
}
Variantes: Default, Onecol, Twocol, Threecol, Fourcol