aico-image-editor/src/components/canvasControls/gradientControl/gradientControl.html

Combine multiple image into and create single combined image

<div x-data="gradientControl" class="px-2">
    <div class="form-check form-switch form-check-inline mb-3">
        <input class="form-check-input" type="checkbox"  id="canvas-gradient" name="canvas-gradient" x-model="isGradientToCanvasBackground"
            @change="applyGradient()"/>
        <label class="form-check-label" for="canvas-gradient" x-text="getTranslatedHTML('canvasGradientSwitchLabel')"></label>
    </div>
    <div class="row px-2">
        <div class="col">
            <div class="gradient-slider">
                <div class="gradient-slider__inner border border-gray" :style="getBackgroundGradientStyles()" x-bind="gradientTrigger"></div>
                <template x-for="colorStop in colorStops">
                    <div class="colorstop" :id="colorStop.id" x-data="draggable"  @click="colorStopClickHandler(colorStop.id)" @mousedown="mouseDownHandler"  :data-color="colorStop.color"
                        :style="{left: colorStop.posX + '%'}" :class="colorStop.id === activeColorStopId ? 'active':''">
                        <div class="dragheader" data-move-vertical="false">
                            <span class="colorstop-icon shadow" :style="{backgroundColor: colorStop.color}">
                                <span :style="getActiveDotColor(colorStop.color)" class="position-absolute top-50 start-50 translate-middle"
                                    x-show="colorStop.id === activeColorStopId">
                                    &#9679;</span>
                                <span class="colorstop-icon__triangle" :style="{backgroundColor: colorStop.color}"></span>
                            </span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="col-3">
            <label class="form-label" x-text="getTranslatedHTML('gradientAngle')"></label>
            <input type="number" class="form-control form-control-sm border border-primary" x-model="gradientAngle" min="0" max="360" 
                @change="applyGradient()"/>
        </div>
    </div>
    <div class="block block-transparent position-relative mb-0 innerpopup-block mt-5">
        <span class="innerpopup-block__drag__handle d-lg-none" @click="hideColorPickerBlock()">
            <a href="javascript:void(0)" class="innerpopup-block__drag__link"></a>
        </span>
        <color-picker datatemplateurl="./colorPicker.html"  styles="global" shadow="true" key="1" eventname="gradientcolor"></color-picker>
    </div>
</div>