@omnia/foundation/extensibility/typings/directives/ColorPicker.html

Provide omnia foundation typings and tooling work on client side for omnia extension.

<div class="omf-colorpicker" omfClick [omfClickOut]="colorPicker.clickoutHandler">
    <div [class.input-group]="colorPicker.favouriteColor.length > 0 ">
        <span>
            <input omfClick [omfClickIn]="colorPicker.clickInHandler"
                   [(colorPicker)]="color"
                   [style.background]="color"
                   [style.color]="textColor"
                   [value]="color"
                   [cpPosition]="position"
                   [(ngModel)]="color"
                   (ngModelChange)="onInputChange($event)"
                   class="form-control omf-colorpicker-textbox"
                   (colorPickerChange)="onSelectColorChange($event)" />
        </span>
        <span class="input-group-btn" *ngIf="colorPicker.favouriteColor.length > 0">
            <button class="btn btn-default omf-singlepicker-button" type="button" (click)="colorPicker.toggleDropdown()"><i class="fa fa-caret-down"></i></button>
        </span>
    </div>
    <div class="omf-colorpicker-choices" [ngClass]="{top: colorPicker.isTopPosition()}" [style.display]="colorPicker.dropdownVisible ? 'block' : 'none'">
        <div class="omf-colorpicker-choice clearfix" *ngFor="let color of colorPicker.favouriteColor" (click)="colorPicker.select(color)">
            <div class="omf-color-text">{{color}}</div>
            <div class="omf-color-preview" [style.background-color]="color"></div>
        </div>
        <div class="omf-colorpicker-choice">
            <a href="javascript:void(0)" (click)="colorPicker.pickCustomColor($event)">{{'Components.ColorPicker.PickOthers' | omfLocalize}}</a>
        </div>
    </div>
</div>