<div class="sds-cediesSimulator" id="cediesSimulator">
<div class="row">
<div class="col-12 col-lg-6">
<fieldset class="sds-stack3xl">
<h2 class="h2">Calculez vos aides financières !</h2>
<div class="sds-stackLg">
<div class="form-group-xl">
<fieldset>
<legend>
<div class="sds-label -labelLarge -labelForm">
Prix du bien
</div>
</legend>
<div class="form-group">
<ul class="list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-1 row-cols-xl-2 row-xs align-items-stretch-immediate">
<li class="col">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="cediesSimulator-poorStudent" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-laluxstudycover.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<p><label class="sds-spotSelect__checkItemLabel" for="cediesSimulator-poorStudent">Etudiant non salarié</label></p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="cediesSimulator-slightlyLessPoorStudent" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-unlockloan.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<p><label class="sds-spotSelect__checkItemLabel" for="cediesSimulator-slightlyLessPoorStudent">Etudiant salarié</label></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="cediesSimulator-studentCollapse" class="sds-collapse collapse fade">
<div class="sds-cediesSimulator__collapseInner">
<div class="form-group-xl">
<label for="cediesSimulator-studentSalary" class="sds-label -labelLarge -labelForm">
Salaire
</label>
<div class="sds-select">
<select id="cediesSimulator-studentSalary" class="sds-select form-control">
<option value="opt-0"><= 2508.24 €</option>
<option value="opt-1">2 508.24 € - 8 778.84 €</option>
<option value="opt-2">>= 8 778.84 €</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group-xl">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="cediesSimulator-studentCheckbox"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="cediesSimulator-studentCheckbox">Je fais des études en dehors de mon pays de résidence et je paye un loyer</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
<div class="form-group-xl">
<label for="cediesSimulator-studentSwitch" class="sds-label -labelLarge -labelForm">
Je fais des études en dehors de mon pays de résidence et je paye un loyer
</label>
<label class="sds-switch" for="cediesSimulator-studentSwitch">
<input type="checkbox" class="sds-switch__input custom-control-input" id="cediesSimulator-studentSwitch">
<span class="sds-switch__shape custom-control custom-switch">
<span aria-hidden="true" class="sds-switch__text sds-switch__textActive">OUI</span>
<span aria-hidden="true" class="sds-switch__text sds-switch__textInactive">NON</span>
</span>
</label>
</div>
<div class="form-group-xl">
<label for="cediesSimulator-revenu" class="sds-label -labelLarge -labelForm">
Taux nominal
</label>
<div class="sds-select">
<select id="cediesSimulator-revenu" class="sds-select form-control">
<option value="opt-0"><= 30 098.88 €</option>
<option value="opt-1">30 098.88 € - 45 148.32 €</option>
<option value="opt-2">45 148.32 € - 60 197.76 €</option>
<option value="opt-3">60 197.76 € - 75 247.20 €</option>
<option value="opt-4">75 247.20 € - 90 296.64 €</option>
<option value="opt-5">90 296.64 € - 105 346.08 €</option>
<option value="opt-6">105 346.08 € - 135 444.96 €</option>
<option value="opt-7">>= 135 444.96 €</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
<div class="form-group-xl">
<label for="cediesSimulator-studentRange" class="sds-label -labelLarge -labelForm">
Nombre d'enfants du ménage qui font des études
</label>
<div class="sds-range -hasIndicator">
<div class="sds-range__body">
<input type="range" class="custom-range" id="cediesSimulator-studentRange" value="2" min="1" max="10">
<div class="sds-range__indicator">
<span>2</span>
</div>
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>1</span>
</span>
<span class="sds-range__max">
<span>10</span>
</span>
</div>
</div>
</div>
<div class="form-group-xl">
<label for="cediesSimulator-inscription" class="sds-label -labelLarge -labelForm">
Frais d'inscription (montant annuel)
</label>
<div class="sds-input -hasShadow">
<input id="cediesSimulator-inscription" class="sds-input form-control" type="number" placeholder="0" value="00,00">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
00,00
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-12 col-lg-6 sds-stackSm">
<div class="sds-box -insetLg -boxSunken sds-stackXl -stackBorder">
<h3 class="h4">Récapitulatif</h3>
<div class="sds-stackLg">
<!-- First info table group -->
<h4 class="h4">Bourse</h4>
<table class="sds-infoTable table -hasTotal">
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Bourse de base
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">1.199,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Bourse de mobilité
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">0,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Bourse sociale
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">1.630,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Bourse familiale
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">287,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Total semestriel des bourses
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">3.116,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</table>
<!-- Second info table group -->
<h4 class="h4">Prêt</h4>
<table class="sds-infoTable table -hasTotal -noBorder">
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Prê de base
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">3.250,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<th class="sds-infoTable__cellAlignTop" colspan="2">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Prêt additionnel
</div>
</div>
<table class="sds-infoTable table -noBorder -itemInsetSpacingSm">
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<span class="sds-infoTable__labelIcon sds-icon sds-icon-arrownext"></span>
<div class="sds-label">
Pour une bourse sociale
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">3.116,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<span class="sds-infoTable__labelIcon sds-icon sds-icon-arrownext"></span>
<div class="sds-label">
Pour revenu supérieur au SSM
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">0,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</table>
</th>
</tr>
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Total semestriel du prêt étudiant
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">3.941,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</table>
<!-- Third info table group -->
<h4 class="h4">Majoration annuelle pour frais d'inscription</h4>
<table class="sds-infoTable table -noBorder">
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pour bourse
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">0,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pour prêt
</div>
</div>
</td>
<td class="sds-infoTable__cellAlignTop">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg">
<span class="sds-amount__value">0,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</table>
<div class="sds-exceptionStackMd sds-stackMd d-flex flex-column justify-content-center align-items-center text-center">
<a href="" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Demande de prêt au logement</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">J'ai déjà ma lettre d'acceptation du Service Aides financières</span>
</a>
</div>
</div>
</div>
<p class="sds-formDisclaimer -small -insetHorizLg">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement Spuerkeess. Pour une proposition concrète, nous vous prions de soumettre votre demande au Service Aides financières.
</p>
</div>
</div>
</div>
<div class="{{ namespace }}cediesSimulator{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="cediesSimulator">
<div class="row">
<div class="col-12 col-lg-6">
<fieldset class="{{ namespace }}stack3xl">
<h2 class="h2">Calculez vos aides financières !</h2>
<div class="{{ namespace }}stackLg">
<div class="form-group-xl">
<fieldset>
<legend>
{% render "@label--form-large",{
eltType: "div",
text: "Prix du bien"
},true %}
</legend>
<div class="form-group">
<ul class="list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-1 row-cols-xl-2 row-xs align-items-stretch-immediate">
<li class="col">
{% render "@spot-select", {
title: false,
text: "Etudiant non salarié",
spotSelectID: "cediesSimulator-poorStudent",
checked: true,
internalResource: false,
img: "https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-laluxstudycover.svg"
}, true %}
</li>
<li class="col">
{% render "@spot-select", {
title: false,
text: "Etudiant salarié",
internalResource: false,
spotSelectID: "cediesSimulator-slightlyLessPoorStudent",
img: "https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-unlockloan.svg"
}, true %}
</li>
</ul>
</div>
<div id="cediesSimulator-studentCollapse" class="{{ namespace }}collapse collapse fade">
<div class="{{ namespace }}cediesSimulator__collapseInner">
<div class="form-group-xl">
{% render "@label--form-large", {
labelFor: "cediesSimulator-studentSalary",
text: "Salaire"
} ,true %}
{% render "@select", {
options: selectOptionsStudentSalary,
id: "cediesSimulator-studentSalary"
} ,true %}
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group-xl">
{% render '@checkbox',{
text: "Je fais des études en dehors de mon pays de résidence et je paye un loyer",
id: "cediesSimulator-studentCheckbox"
}, true %}
</div>
<div class="form-group-xl">
{% render "@label--form-large",{
text: "Je fais des études en dehors de mon pays de résidence et je paye un loyer",
labelFor: "cediesSimulator-studentSwitch"
},true %}
{% render "@switch",{
id: "cediesSimulator-studentSwitch"
},true %}
</div>
<div class="form-group-xl">
{% render "@label--form-large",{
text: "Taux nominal",
labelFor: "cediesSimulator-revenu"
},true %}
{% render "@select",{options: selectOptions, id: "cediesSimulator-revenu"},true %}
</div>
<div class="form-group-xl">
{% render "@label--form-large",{
text: "Nombre d'enfants du ménage qui font des études",
labelFor: "cediesSimulator-studentRange"
},true %}
{% render "@range--has-indicator",{
minValue: "1",
minValueText: "1",
maxValue: "10",
maxValueText: "10",
currentValue: "2",
indicatorValueType: "",
id: "cediesSimulator-studentRange"
},true %}
</div>
<div class="form-group-xl">
{% render "@label--form-large",{
labelFor: "cediesSimulator-inscription",
text: "Frais d'inscription (montant annuel)"
},true %}
{% render "@input--shadow",{
id: "cediesSimulator-inscription",
value: "00,00"
},true %}
</div>
</div>
</fieldset>
</div>
<div class="col-12 col-lg-6 {{ namespace }}stackSm">
<div class="{{ namespace }}box -insetLg -boxSunken {{ namespace }}stackXl -stackBorder">
<h3 class="h4">Récapitulatif</h3>
<div class="{{ namespace }}stackLg">
<!-- First info table group -->
<h4 class="h4">Bourse</h4>
<table class="{{ namespace }}infoTable table -hasTotal">
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Bourse de base"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "1.199,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Bourse de mobilité"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "0,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Bourse sociale"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "1.630,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Bourse familiale"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "287,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Total semestriel des bourses"
},true %}
</div>
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "3.116,00"
},true %}
</div>
</td>
</tr>
</table>
<!-- Second info table group -->
<h4 class="h4">Prêt</h4>
<table class="{{ namespace }}infoTable table -hasTotal -noBorder">
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Prê de base"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "3.250,00"
},true %}
</div>
</td>
</tr>
<tr>
<th class="{{ namespace }}infoTable__cellAlignTop" colspan="2">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Prêt additionnel"
},true %}
</div>
<table class="{{ namespace }}infoTable table -noBorder -itemInsetSpacingSm">
<tr>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<span class="{{ namespace }}infoTable__labelIcon {{ namespace }}icon {{ namespace }}icon-arrownext"></span>
{% render "@label",{
eltType: "div",
text: "Pour une bourse sociale"
},true %}
</div>
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "3.116,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<span class="{{ namespace }}infoTable__labelIcon {{ namespace }}icon {{ namespace }}icon-arrownext"></span>
{% render "@label",{
eltType: "div",
text: "Pour revenu supérieur au SSM"
},true %}
</div>
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "0,00"
},true %}
</div>
</td>
</tr>
</table>
</th>
</tr>
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Total semestriel du prêt étudiant"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large", {
text: "3.941,00"
},true %}
</div>
</td>
</tr>
</table>
<!-- Third info table group -->
<h4 class="h4">Majoration annuelle pour frais d'inscription</h4>
<table class="{{ namespace }}infoTable table -noBorder">
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Pour bourse"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "0,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Pour prêt"
},true %}
</div>
</td>
<td class="{{ namespace }}infoTable__cellAlignTop">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--large",{
text: "0,00"
},true %}
</div>
</td>
</tr>
</table>
<div class="{{ namespace }}exceptionStackMd {{ namespace }}stackMd d-flex flex-column justify-content-center align-items-center text-center">
{% render '@btn-primary--icon-right', {
eltType: "a",
icon: "icon-arrownext",
text: "Demande de prêt au logement"
}, true %}
{% render '@btn-secondary-inverse', {
eltType: "a",
text: "J'ai déjà ma lettre d'acceptation du Service Aides financières"
}, true %}
</div>
</div>
</div>
{% render '@form-disclaimer--small', {
text: "La présente simulation est uniquement fournie à titre indicatif et n'engage nullement Spuerkeess. Pour une proposition concrète, nous vous prions de soumettre votre demande au Service Aides financières.",
modifiers: ["-small", "-insetHorizLg"]
}, true %}
</div>
</div>
</div>
export default class CediesSimulator {
constructor() {
this.handleSpotSelectCollapse();
}
handleSpotSelectCollapse () {
console.log("cedies")
let collapseShow = document.querySelector("#cediesSimulator-slightlyLessPoorStudent");
let collapseHide = document.querySelector("#cediesSimulator-poorStudent");
collapseShow.addEventListener("click", (e) => {
$("#cediesSimulator-studentCollapse").collapse('show');
})
collapseHide.addEventListener("click", (e) => {
$("#cediesSimulator-studentCollapse").collapse('hide');
})
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}cediesSimulator {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// cediesSimulator__collapseInner
&__collapseInner {
// follows same logic as parent
padding-top: $form-group-xl-margin-top-mobile;
@include media-breakpoint-up("lg") {
padding-top: $form-group-xl-margin-top;
}
}
/* modifiers */
// cediesSimulator -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}