md2/colorpicker/colorpicker.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<div class="md2-colorpicker-trigger"><div class="color-picker-selector" [class.color-error]="isInputValidColor && required"><div class="md2-colorpicker-preview" (click)="toggle()"><div class="color-fill" [style.background-color]="color"></div></div><div class="md2-colorpicker-input" [class.input-focused]="isInputFocus"><span class="md2-colorpicker-placeholder" [class.has-value]="color">{{ placeholder }}</span> <input class="md2-colorpicker-value" autocomplete="off" value="color" [tabindex]="tabindex" [disabled]="disabled" [(ngModel)]="color" (focus)="isInputFocus=true" (blur)="checkInputVal()"> <span *ngIf="color && !required && !disabled" class="color-clear" (click)="clearColor($event)"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span></div></div></div><ng-template #portal><div class="md2-colorpicker-panel" tabindex="0" [attr.container]="container"><div class="md2-colorpicker-content"><div class="md2-colorpicker-wrapper"><div class="md2-color-picker"><div class="selected-color"><div class="selected-color-bg" [style.background]="outputColor"><div class="color-input"><div [hidden]="format!=2" class="hsla-text"><input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="360" [rg]="360" (newValue)="setHue($event)" [value]="hslaText.h"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="100" [rg]="100" (newValue)="setSaturation($event)" [value]="hslaText.s"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="100" [rg]="100" (newValue)="setLightness($event)" [value]="hslaText.l"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [rg]="1" (newValue)="setAlpha($event)" [value]="hslaText.a"></div><div [hidden]="format!=1" class="rgba-text"><input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setR($event)" [value]="rgbaText.r"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setG($event)" [value]="rgbaText.g"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setB($event)" [value]="rgbaText.b"> <input [text] type="number" [style.color]="fontColor" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [rg]="1" (newValue)="setAlpha($event)" [value]="rgbaText.a"></div><div [hidden]="format!=0" class="hex-text"><input [text] (newValue)="setColorFromString($event)" [style.color]="fontColor" [value]="hexText"></div></div><div class="color-bar" [class.dark]="_isDark"><div [style.color]="fontColor" class="clearfix"><div class="type-policy" [class.active]="format==0" (click)="formatPolicy(0)">HEX</div><div class="type-policy" [class.active]="format==1" (click)="formatPolicy(1)">RGBA</div><div class="type-policy" [class.active]="format==2" (click)="formatPolicy(2)">HSLA</div></div></div></div></div><div class="input-color-content"><div [colorpicker-slider] [style.background-color]="_hueSliderColor" [point-x]="1" [point-y]="1" (change)="setSaturationAndBrightness($event)" class="saturation-lightness"><div [style.left.px]="slider.s" [style.top.px]="slider.v" class="cursor"></div></div><div [colorpicker-slider] [point-x]="1" (change)="setHue($event)" class="hue"><div [style.left.px]="slider.h" class="color-picker-marker"></div></div><div [colorpicker-slider] [point-x]="1" (change)="setAlpha($event)" class="alpha"><div class="alpha-main" [ngStyle]="setGradient"><div [style.left.px]="slider.a" class="color-picker-marker"></div></div></div></div><div class="md2-color-picker-actions"><div class="md2-button" (click)="cancelColor()">Cancel</div><div class="md2-button" (click)="clickOk()">Ok</div></div></div></div></div></div></ng-template>