<div class="container" tabindex="-1">
    <div
        ng-transclude="prepend"
        class="prepend">
    </div>
    <div class="infix">
        <div class="fix prefix"></div>
        <div class="control"></div>
        <div class="fix suffix"></div>
        <label>
            <span translate>{{$ctrl.label}}</span>
            <span class="required">*</span>
        </label> 
    </div>
    <div class="icons pre">
        <vn-icon
            icon="clear"
            ng-show="::$ctrl.clearDisabled != true"
            translate-attr="{title: 'Clear'}"
            ng-click="$ctrl.onClear($event)">
        </vn-icon>
        <vn-icon
            ng-if="::$ctrl.info != null"
            icon="info_outline"
            vn-tooltip="{{::$ctrl.info}}">
        </vn-icon>
    </div>
    <div
        ng-transclude="append"
        class="append">
    </div>
    <div class="icons post">
        <vn-icon 
            ng-if="$ctrl.displayControls"
            icon="remove" 
            ng-click="$ctrl.onStep($event, 'down')"
            translate-attr="{title: 'Remove'}">
        </vn-icon>
        <vn-icon 
            ng-if="$ctrl.displayControls"
            icon="add" 
            ng-click="$ctrl.onStep($event, 'up')"
            translate-attr="{title: 'Add'}">
        </vn-icon>
    </div>
    <div class="underline blur"></div>
    <div class="underline focus"></div>
</div>
<div class="hint"></div>