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

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

<div class="color-picker" [cpHidden]="!show" [style.height.px]="cpHeight" [style.width.px]="cpWidth" [style.top.px]="top" [style.left.px]="left" [style.position]="position" #dialogPopup>
  <div class="arrow arrow-{{cpPosition}}" [style.top.px]="arrowTop"></div>
  <div [slider] [style.background-color]="hueSliderColor" [rgX]="1" [rgY]="1" (newValue)="setSaturationAndBrightness($event)" class="saturation-lightness">
    <div [style.left.px]="slider.s" [style.top.px]="slider.v" class="cursor"></div>
  </div>
  <div class="box">
    <div class="left">
      <div class="selected-color-background"></div>
      <div [style.background-color]="outputColor" class="selected-color"></div>
    </div>
    <div class="right">
      <div [slider] [rgX]="1" (newValue)="setHue($event)" class="hue" #hueSlider>
        <div [style.left.px]="slider.h" class="cursor"></div>
      </div>
      <div [slider] [style.background-color]="alphaSliderColor" [rgX]="1" (newValue)="setAlpha($event)" class="alpha" #alphaSlider>
        <div [style.left.px]="slider.a" class="cursor"></div>
      </div>
    </div>
  </div>
  <div [cpHidden]="format!=2" class="hsla-text">
    <div class="box">
      <input [text] type="number" pattern="[0-9]*" min="0" max="360" [rg]="360" (newValue)="setHue($event)" [value]="hslaText.h" />
      <input [text] type="number" pattern="[0-9]*" min="0" max="100" [rg]="100" (newValue)="setSaturation($event)" [value]="hslaText.s" />
      <input [text] type="number" pattern="[0-9]*" min="0" max="100" [rg]="100" (newValue)="setLightness($event)" [value]="hslaText.l" />
      <input [text] type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [rg]="1" (newValue)="setAlpha($event)" [value]="hslaText.a" />
    </div>
    <div class="box">
      <div>H</div><div>S</div><div>L</div><div>A</div>
    </div>
  </div>
  <div [cpHidden]="format!=1" class="rgba-text">
    <div class="box">
      <input [text] type="number" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setR($event)" [value]="rgbaText.r" />
      <input [text] type="number" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setG($event)" [value]="rgbaText.g" />
      <input [text] type="number" pattern="[0-9]*" min="0" max="255" [rg]="255" (newValue)="setB($event)" [value]="rgbaText.b" />
      <input [text] type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [rg]="1" (newValue)="setAlpha($event)" [value]="rgbaText.a" />
    </div>
    <div class="box">
      <div>R</div><div>G</div><div>B</div><div>A</div>
    </div>
  </div>
  <div [cpHidden]="format!=0" class="hex-text">
    <div class="box">
      <input [text] (newValue)="setColorFromString($event)" [value]="hexText" />
    </div>
    <div class="box">
      <div>Hex</div>
    </div>
  </div>
  <div (click)="formatPolicy()" class="type-policy"></div>
  <div *ngIf="cpPresetColors && cpPresetColors.length" class="preset-area">
    <hr>
    <div class="preset-label">{{cpPresetLabel}}</div>
    <div *ngFor="let color of cpPresetColors" class="preset-color" [style.backgroundColor]="color" (click)="setColorFromString(color)"></div>
  </div>
  <div *ngIf="cpCancelButton" class="button-area">
    <button *ngIf="cpCancelButton" type="button" class="cp-close-button-class" (click)="cancelColor()">×</button>
  </div>
</div>