online-energieausweis/src/components/Ausweis/Warmwasseranteil.svelte

<script lang="ts">

import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";

export let ausweis;



</script>

<div id="warmwasser" class="bereich-box grid 
	grid-cols-1 gap-x-4 gap-y-8
	sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
	xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
	">


	<div class="input-standard order-1 md:order-1 xl:order-1">
	<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>

    <div class="input-row items-center gap-2">

<div class="grid grid-cols-[max-content_40px] gap-x-2 items-center justify-items-start">
	<input
    id="warmwasser_enthalten"
	type="checkbox"
	class="checkbox"
	name="warmwasser_enthalten"
	data-test="warmwasser_enthalten"
	bind:checked={ausweis.warmwasser_enthalten}
	/>
    <label for="warmwasser_enthalten" class="cursor-pointer">Ja</label>
</div>

<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
	<input
    id="warmwasser_anteil_bekannt"
	type="checkbox"
	class="checkbox"
	name="warmwasser_anteil_bekannt"
	data-test="warmwasser_anteil_bekannt"
	bind:checked={ausweis.warmwasser_anteil_bekannt}
	disabled={!ausweis.warmwasser_enthalten}
/>
    <label for="warmwasser_anteil_bekannt" class="cursor-pointer">Anteil bekannt</label>
</div>

</div>

<div class="help-label">
	<HelpLabel>
		TEXT FEHLT
	</HelpLabel>
</div>

</div>


<!-- % Anteil Warmwasser -->

<div class="input-standard order-2 md:order-2 xl:order-2">
	<Inputlabel title="% Anteil Warmwasser"></Inputlabel>

    <input
    name="anteil_warmwasser_1"
    data-test="anteil_warmwasser_1"
    maxlength="2"
    type="number"
    bind:value={ausweis.anteil_warmwasser_1}
    disabled={!ausweis.warmwasser_anteil_bekannt || 
        !ausweis.warmwasser_enthalten}
    autocomplete="off"
    />

		<div class="help-label">
				<HelpLabel>
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
				</HelpLabel>
			</div>
</div>


<!--zusätzliche Heizquelle -->

<div class="input-standard order-3 md:order-3 xl:order-3">
	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>

    <input
    name="anteil_warmwasser_2"
    data-test="anteil_warmwasser_2"
    maxlength="3"
    type="number"
    autocomplete="off"
    bind:value={ausweis.anteil_warmwasser_2}
    disabled={!ausweis.zusaetzliche_heizquelle ||
        !ausweis.warmwasser_anteil_bekannt ||
        !ausweis.warmwasser_enthalten}
    />

		<div class="help-label">
				<HelpLabel>
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
					ein Anteil von 18% angenommen.
				</HelpLabel>
		</div>
</div>


<!--Alternative Energieversorgungssyteme -->

<div class="input-standard order-4 md:order-4 xl:order-4 sm:col-span-2 items-center">
    <Inputlabel title="Alternative Energieversorgungssyteme"></Inputlabel>

<div class="input-row items-center gap-2 lg:gap-20 xl:gap-24">

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
    <input
    id="alternative_heizung"
    type="checkbox"
    name="alternative_heizung"
    data-test="alternative_heizung"
    bind:checked={ausweis.alternative_heizung}
    value="Heizung"
    />
    <label for="alternative_heizung" class="checkbox-inline cursor-pointer">Heizung</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">

<input
    id="alternative_warmwasser"
    type="checkbox"
    name="alternative_warmwasser"
    data-test="alternative_warmwasser"
    bind:checked={ausweis.alternative_warmwasser}
    value="Warmwasser"
    />
    <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer">Warmwasser</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
<input
    id="alternative_lueftung"
    type="checkbox"
    name="alternative_lueftung"
    data-test="alternative_lueftung"
    bind:checked={ausweis.alternative_lueftung}
    value="Lüftung"
/>
<label for="alternative_lueftung" class="checkbox-inline cursor-pointer">Lüftung</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">

<input
    id="alternative_kuehlung"
    type="checkbox"
    name="alternative_kuehlung"
    data-test="alternative_kuehlung"
    bind:checked={ausweis.alternative_kuehlung}
    value="Kühlung"
/>
<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer">Kühlung</label>
</div>

</div>

<div class="help-label">
    <HelpLabel>
        Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
        von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
        ein Anteil von 18% angenommen.
    </HelpLabel>

</div>

</div>







</div>