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

Combine multiple image into and create single combined image

<div class="position-relative overflow-visible" x-data="catalogueSearch" >
    <div @click.stop="showSearchBlock($event)" @click.outside="hideSearchBlock($event, $el)">
        <div class="position-relative">
            <div class="form-group">
                <input type="text" class="form-control editor-interface__background__search" x-model="productSearchText" @input.debounce.500ms="loadProducts(true)" 
                    :placeholder="getTranslatedHTML('catalogueSearchPlaceholder')" :class="products.length && isSearchBlockVisible  ? 'hasProducts':''"/>
            </div>
            <span class="position-absolute start-0 top-50 translate-middle-y ms-2 ps-1 text-gray-500">
                <i class="fa-solid fa-magnifying-glass fa-lg"></i>
            </span>
        </div>
        <div class="position-absolute w-100 top-100 start-0 bg-white z-index-5 shadow-sm px-3 rounded-bottom block" 
            x-show="products.length && isSearchBlockVisible"
            :class="isProductLoading ? 'block-mode-loading':''">
            <div class="row gx-2 editor-interface__scroll__inner less-height">
                <template x-for="(product,productIndex) in products">
                    <div class="col-4 mb-2 text-center position-relative" :class="product.hidden ? 'd-none': ''"
                        x-intersect.once="intersectionObserverHandler(product.id)">
                        <a class="editor-interface__shape" :class="selectedProduct === product.id ? 'editor-interface__shape__selected': ''" href="javascript:void(0)" @click.stop="selectProduct(product.id, product.imageUrl)"
                        data-bs-toggle="tooltip" x-data="tooltip" :title="product.productName">
                        <img :id="product.id" class="img-fluid editor-interface__shape__img" :src="product.imageUrl"  
                            :class="selectedProduct === product.id ? 'selected': ''"  />
                        </a>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>