aico-image-editor/src/components/configuratorTabs/configuratorTabs.html

Combine multiple image into and create single combined image

<div x-data="configuratorTabs">
    <div class="position-relative mb-4 mb-lg-4">
        <span class="closebtn d-lg-none" @click="productBlockVisibleMobile = true">
            <a href="javascript:void(0)" class="closebtn__link">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </span>
        <div class="block block-rounded rounded-5 z-index-2 position-relative mb-0">
            <ul class="nav nav-tabs nav-tabs-alt-custom editor-interface__tab__desktop" role="tablist"
                @go-to-tab.window="setActiveTab($event.detail.tab)">
                <span class="dotted-background"></span>
                <li class="nav-item" @click="setActiveTab('picture')">
                    <button type="button" class="nav-link text-primary" data-bs-toggle="tab" role="tab" id="canvas-picture-tab"
                    data-bs-target="#canvas-picture" 
                    :class="activeTab === 'picture'? 'active' : ''"
                    :aria-selected="activeTab === 'picture'? true : false">
                        <div class="d-flex align-items-center" x-data="{backgrounds: []}" @set-bg-length.window="backgrounds = $event.detail.backgrounds">
                            <span class="nav-tabs-alt-border" x-text="getTranslatedHTML('pictures')"></span>
                        </div>
                    </button>
                </li>
                <li class="nav-item" @click="setActiveTab('motive')">
                    <button type="button" class="nav-link text-primary" data-bs-toggle="tab" role="tab" id="own-shape-tab"
                    data-bs-target="#own-shape"
                    :class="activeTab === 'motive'? 'active' : ''"
                    :aria-selected="activeTab === 'motive'? true : false">
                        <div class="d-flex align-items-center" x-data="{shapes: []}" @set-shapes-length.window="shapes = $event.detail.shapes">
                            <span class="nav-tabs-alt-border" x-html="getTranslatedHTML('motiveTabTitle')"></span> 
                            <span class="number ms-2 flex-shrink-0" x-text="shapes.length">32</span>
                        </div>
                    </button>
                </li>
                <li class="nav-item" @click="setActiveTab('label')">
                    <button type="button" class="nav-link text-primary" data-bs-toggle="tab" role="tab" id="labelling-tab"
                    data-bs-target="#labelling"
                    :class="activeTab === 'label'? 'active' : ''"
                    :aria-selected="activeTab === 'label'? true : false">
                        <span class="nav-tabs-alt-border" x-text="getTranslatedHTML('textTabTitle')"></span>
                    </button>
                </li>
                <li class="nav-item" @click="setActiveTab('layer')">
                    <button type="button" class="nav-link text-primary" data-bs-toggle="tab" role="tab" id="layering-tab"
                    data-bs-target="#layering"
                    :class="activeTab === 'layer' ? 'active':''"
                    :aria-selected="activeTab === 'layer'? true : false">
                        <span class="nav-tabs-alt-border" x-text="getTranslatedHTML('layersTabTitle')"></span>
                        <span class="number ms-2 flex-shrink-0" x-text="$store.canvas.layers.length"></span>
                    </button>
                </li>
            </ul>
            
            <div class="block-content block-content-full tab-content editor-interface__scroll bg-custom-gradient-bottom" :class="activeTab === 'label' ? 'bg-custom-gradient-bottom':''">
                <div class="tab-pane position-relative" id="canvas-picture" role="tabpanel" aria-labelledby="canvas-picture-tab"  
                    :class="activeTab === 'picture'? 'active' : ''"> 
                    <picture-tab datatemplateurl="./pictureTab.html"  styles="global" shadow="true"></picture-tab>
                </div>

                <div class="tab-pane position-relative" id="own-shape" role="tabpanel" aria-labelledby="own-shape-tab" 
                    :class="activeTab === 'motive'? 'active' : ''">
                    <own-shape-tab datatemplateurl="./ownShapeTab.html" styles="global" shadow="true"></own-shape-tab>
                </div>
                <div class="tab-pane position-relative" id="labelling" role="tabpanel" aria-labelledby="labelling-tab"
                    :class="activeTab === 'label'? 'active' : ''">
                    <labelling-tab datatemplateurl="./labellingTab.html" styles="global" shadow="true"></labelling-tab>
                </div>
                <div class="tab-pane position-relative" id="layering" role="tabpanel" aria-labelledby="layering-tab"
                    :class="activeTab === 'layer'? 'active' : ''">
                    <layering-tab datatemplateurl="./layeringTab.html" styles="global" shadow="true"></layering-tab>  
                </div>
                
                
                <div class="server-loader position-absolute w-100 h-100 start-0 top-0 pe-none bg-white-75 justify-content-center align-items-center"
                    :class="$store.canvas.isServerLoaderTabVisible ? 'd-flex':'d-none'">
                    <i class="fas fa-spinner fa-pulse"></i>
                </div>
            </div>
        </div>
        <div class="block editor-interface__block__offset rounded-5 position-absolute w-100 h-100 z-index-1 d-none "></div>
        <div class="block editor-interface__block__offset rounded-5 position-absolute w-100 h-100 z-index-0 d-none "></div>
    </div>


    

    <canvas-controls datatemplateurl="" styles="global" shadow="true"></canvas-controls>

    <div class="mt-3">
        <version-panel datatemplateurl="./versionPanel.html" styles="global" shadow="true"></version-panel>
    </div>
    
    <div class="d-lg-block d-none">
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
    </div>


    <configurator-tabs-mobile datatemplateurl="./configuratorTabsMobile.html"  styles="global" shadow="true"></configurator-tabs-mobile>
    
</div>