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

Combine multiple image into and create single combined image

<div x-data="configuratorTabs" class="d-flex flex-column flex-grow-1">
    <div class="position-relative d-flex flex-column flex-grow-1">
        <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 z-index-2 position-relative mb-0 d-flex flex-column flex-grow-1">
            <ul class="nav nav-tabs editor-interface__tab__desktop border-bottom-0 d-flex flex-column flex-grow-1" role="tablist"
                @get-active-tab.window="$dispatch('emit-active-tab', {activeTab})"
                @go-to-tab.window="setActiveTab($event.detail.tab)">
                <li class="nav-item w-100" @click="setActiveTab('picture')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" 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 flex-column">
                                <span class="d-block mb-2"><i class="fa-solid fa-image mb-2 fa-xl"></i></span>
                                <span x-text="getTranslatedHTML('media')"></span>
                            </div>
                        </button>
                    </div>
                </li>
                <li class="nav-item" @click="setActiveTab('motive')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" 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 flex-column" x-data="{shapes: []}" @set-shapes-length.window="shapes = $event.detail.shapes">
                                <span class="d-block mb-2"><i class="fa-solid fa-shapes mb-2 fa-xl  "></i></span>
                                <span x-html="getTranslatedHTML('motiveTabTitle')"></span>
                            </div>
                        </button>
                    </div>
                </li>
                <li class="nav-item" @click="setActiveTab('label')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="labelling-tab"
                        data-bs-target="#labelling"
                        :class="activeTab === 'label'? 'active' : ''"
                        :aria-selected="activeTab === 'label'? true : false">
                            <div class="d-flex align-items-center flex-column">
                                <span class="d-block mb-2"><i class="bugano-mobile-tab-3-icon mb-2 fa-xl"></i></span>
                                <span x-text="getTranslatedHTML('textTabTitle')"></span>
                            </div>
                        </button>
                    </div>
                </li>
                <li class="nav-item" @click="setActiveTab('layer')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="layering-tab"
                        data-bs-target="#layering"
                        :class="activeTab === 'layer' ? 'active':''"
                        :aria-selected="activeTab === 'layer'? true : false">
                            <div class="d-flex align-items-center flex-column">
                                <span class="d-block mb-2"><i class="fas fa-layer-group mb-2 fa-xl"></i></span>
                                <span x-text="getTranslatedHTML('layersTabTitle')"></span>
                            </div>
                        </button>
                    </div>
                </li>
                <li class="nav-item" @click="setActiveTab('history')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="history-tab"
                        data-bs-target="#history"
                        :class="activeTab === 'history' ? 'active':''"
                        :aria-selected="activeTab === 'history'">
                            <div class="d-flex align-items-center flex-column">
                                <span class="d-block mb-2"><i class="bugano-clock-rotate-left mb-2 fa-xl"></i></span>
                                <span x-text="getTranslatedHTML('restoreVersionBlockTitle')"></span>
                            </div>
                        </button>
                    </div>
                </li>
                <li class="nav-item" @click="setActiveTab('ai')">
                    <div class="ratio ratio-1x1">
                        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" id="ai-tab"
                        data-bs-target="#ai"
                        :class="activeTab === 'ai' ? 'active':''"
                        :aria-selected="activeTab === 'ai'">
                            <div class="d-flex align-items-center flex-column">
                                <span class="d-block mb-2"><i class="bugano-stars-ai mb-2 fa-xl"></i></span>
                                <span x-text="getTranslatedHTML('aiTabTitle')"></span>
                            </div>
                        </button>
                    </div>
                </li>
            </ul>
            
            <div class="tab-content position-absolute start-100 top-0 h-100" :class="activeTab === 'ai' ? 'largewidth':''">
                
                <div class="tab-pane position-relative bg-white h-100" id="canvas-picture" role="tabpanel" aria-labelledby="canvas-picture-tab"  
                    :class="activeTab === 'picture'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <picture-tab datatemplateurl="./pictureTab.html"  styles="global" shadow="true"></picture-tab>
                </div>

                <div class="tab-pane position-relative bg-white h-100" id="own-shape" role="tabpanel" aria-labelledby="own-shape-tab" 
                    :class="activeTab === 'motive'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <own-shape-tab datatemplateurl="./ownShapeTab.html" styles="global" shadow="true"></own-shape-tab>
                </div>
                <div class="tab-pane position-relative bg-white h-100" id="labelling" role="tabpanel" aria-labelledby="labelling-tab"
                    :class="activeTab === 'label'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <labelling-tab datatemplateurl="./labellingTab.html" styles="global" shadow="true"></labelling-tab>
                </div>
                <div class="tab-pane position-relative bg-white h-100" id="layering" role="tabpanel" aria-labelledby="layering-tab"
                    :class="activeTab === 'layer'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <layering-tab datatemplateurl="./layeringTab.html" styles="global" shadow="true"></layering-tab>  
                </div>
                <div class="tab-pane position-relative bg-white h-100" id="history" role="tabpanel" aria-labelledby="history-tab"
                    :class="activeTab === 'history'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <version-panel datatemplateurl="./versionPanel.html" styles="global" shadow="true"></version-panel>
                </div>
                <div class="tab-pane position-relative bg-white h-100" id="ai" role="tabpanel" aria-labelledby="ai-tab"
                    :class="activeTab === 'ai'? 'active' : ''">
                    <span class="position-absolute end-0 top-0 mt-3 me-3 z-index-1">
                        <a class="text-body" href="javascript:void(0)" @click="activeTab = null"><i class="fas fa-times"></i></a></span>
                    <ai-tab datatemplateurl="./aiTab.html" styles="global" shadow="true"></ai-tab>
                </div>
            </div>
        </div>
    </div>


    

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

    
    
    <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>