<div class="box-content colorpicker">
    <div class="colorpicker-content" ng-show="(!vm.widget.style || vm.widget.style === 'default') && vm.ready">

        <span ng-if="vm.widget.name">{{vm.widget.name}}</span>

        <div class="channel h" data-snap-ignore="true">
        <canvas height="1"></canvas>
        <svg height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
        </div>
        <div class="channel s" data-snap-ignore="true">
        <canvas height="1"></canvas>
        <svg height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
        </div>
        <div class="channel l" data-snap-ignore="true">
        <canvas height="1"></canvas>
        <svg height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
        </div>

    </div>
    <div class="colorpicker-content-flex" ng-show="vm.widget.style === 'aCKolor'">

        <span ng-if="vm.widget.name">{{vm.widget.name}}<br /><br /></span>

        <a-ckolor model="vm.aCKolorModel" blur="vm.widget.blur_background || false" type="hidden" on-change="vm.onACkolorModelChanged"></a-ckolor>
    </div>
</div>
