Cedies Simulator

Javascript for component in assets tab

<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 -large -form">
                                    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 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 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 -large -form">
                                            Salaire

                                        </label>
                                        <div class="sds-select">
                                            <select id="cediesSimulator-studentSalary" class="sds-select form-control">

                                                <option value="opt-0">&lt;= 2508.24 €</option>

                                                <option value="opt-1">2 508.24 € - 8 778.84 €</option>

                                                <option value="opt-2">&gt;= 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 -large -form">
                            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 -large -form">
                            Taux nominal

                        </label>
                        <div class="sds-select">
                            <select id="cediesSimulator-revenu" class="sds-select form-control">

                                <option value="opt-0">&lt;= 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">&gt;= 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 -large -form">
                            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 -large -form">
                            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 -elevated 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 -elevated {{ 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>
  • Content:
    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');
    
    		})
    
    	}
    
    }
    
  • URL: /components/raw/spk-cedies-simulator/CediesSimulator.js
  • Filesystem Path: components/spuerkeess-site/organisms/simulators/cedies-simulator/CediesSimulator.js
  • Size: 562 Bytes
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/spk-cedies-simulator/_cedies-simulator.scss
  • Filesystem Path: components/spuerkeess-site/organisms/simulators/cedies-simulator/_cedies-simulator.scss
  • Size: 1.1 KB