unicorn-components/src/components/forms/time-picker/time-picker.component.html

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

<div class="uni-time-picker__container" (clickOutside)="opened = (!floating ? opened : false)">
    <div class="uni-time-picker__inputs">
        <uni-input type="time" icon="alarm" class="uni-time-picker__input clear-webkit-controls" [maxValue]="max" [minValue]="min" [label]="label"
            [clear]="true" [model]="model" (modelChange)="onTimeChanges($event)" (uniFocus)="onFocus($event)" (uniBlur)="onBlur($event)"
            (uniKeypress)="onKeyPress($event)">
        </uni-input>
    </div>
    <div *ngIf="opened || !floating" class="uni-time-picker__controls" [class.uni-time-picker__controls--floating]="floating" [class.uni-time-picker__controls--left]="side === 'left'"
        [class.uni-time-picker__controls--right]="side === 'right'">
        <uni-clock [min]="min" [max]="max" [model]="model" (modelChange)="onTimeChanges($event)">
        </uni-clock>
    </div>
</div>