after.svelte

<script>
    import {onMount} from 'svelte'
    import {layerStore} from "./componentStores.js"

    export let id;
    export let l1_code;
    export let l1_value;

    export let l2_code;
    export let l2_value;
    export let l2_meta;

    export let l3_code;
    export let l3_value;
    export let l3_meta;

    export let l4_code;
    export let l4_value;
    export let l4_meta;

    let rootElement;
    let visibleLayer = "level1";

    onMount(() => {
        layerStore.subscribe(value => visibleLayer = value.replace("layer", "level"));
    });
</script>


<div>
    {#if visibleLayer == "level1"}
        <button class="equalHW level1" id="{id}_l1" data-key-code="{l1_code}">{l1_value}</button>
    {/if}
    {#if visibleLayer == "level2"}
        <button class="equalHW level2 hidden" id="{id + '_l2'}" data-key-code="{l2_code || this.l1_code}"
                data-meta-key-code="{l2_meta}">{l2_value || l1_value}</button>
    {/if}
    {#if visibleLayer == "level3"}
        <button class="equalHW level3 hidden" id="{id + '_l3'}" data-key-code="{l3_code || l1_code}"
                data-meta-key-code="{l3_meta}">{l3_value || l1_value}</button>
    {/if}
    {#if visibleLayer == "level4"}
        <button class="equalHW level4 hidden" id="{id + '_l4'}" data-key-code="{l4_code || l1_code}"
                data-meta-key-code="{l4_meta}">{l4_value || l1_value}</button>
    {/if}
</div>

svelte