primeng/colorpicker/primeng-colorpicker.metadata.json

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

{"__symbolic":"module","version":4,"metadata":{"COLORPICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":7,"character":13},"useExisting":{"__symbolic":"reference","name":"ColorPicker"},"multi":true},"ColorPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"p-colorPicker","template":"\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'p-colorpicker p-component':true,'p-colorpicker-overlay':!inline,'p-colorpicker-dragging':colorDragging||hueDragging}\">\n            <input #input type=\"text\" *ngIf=\"!inline\" class=\"p-colorpicker-preview p-inputtext\" readonly=\"readonly\" [ngClass]=\"{'p-disabled': disabled}\"\n                (focus)=\"onInputFocus()\" (click)=\"onInputClick()\" (keydown)=\"onInputKeydown($event)\" [attr.id]=\"inputId\" [attr.tabindex]=\"tabindex\" [disabled]=\"disabled\"\n                [style.backgroundColor]=\"inputBgColor\">\n            <div *ngIf=\"inline || overlayVisible\" [ngClass]=\"{'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel':!inline, 'p-disabled': disabled}\" (click)=\"onPanelClick()\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"inline === true\" \n                    (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\">\n                <div class=\"p-colorpicker-content\">\n                    <div #colorSelector class=\"p-colorpicker-color-selector\" (touchstart)=\"onColorTouchStart($event)\" (touchmove)=\"onMove($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\">\n                        <div class=\"p-colorpicker-color\">\n                            <div #colorHandle class=\"p-colorpicker-color-handle\"></div>\n                        </div>\n                    </div>\n                    <div #hue class=\"p-colorpicker-hue\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueTouchStart($event)\" (touchmove)=\"onMove($event)\" (touchend)=\"onDragEnd()\">\n                        <div #hueHandle class=\"p-colorpicker-hue-handle\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":36,"character":8},"arguments":["overlayAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":37,"character":12},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":38,"character":16},"arguments":[{"opacity":0,"transform":"scaleY(0.8)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":16},"arguments":["{{showTransitionParams}}"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":41,"character":14},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":42,"character":16},"arguments":["{{hideTransitionParams}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":52},"arguments":[{"opacity":0}]}]}]]}]]}],"providers":[{"__symbolic":"reference","name":"COLORPICKER_VALUE_ACCESSOR"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":47,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":48,"character":19},"member":"None"},"styles":[".p-colorpicker{display:inline-block}.p-colorpicker-dragging{cursor:pointer}.p-colorpicker-overlay{position:relative}.p-colorpicker-panel{height:166px;position:relative;width:193px}.p-colorpicker-overlay-panel{position:absolute}.p-colorpicker-preview{cursor:pointer}.p-colorpicker-panel .p-colorpicker-content{position:relative}.p-colorpicker-panel .p-colorpicker-color-selector{height:150px;left:8px;position:absolute;top:8px;width:150px}.p-colorpicker-panel .p-colorpicker-color{height:150px;width:150px}.p-colorpicker-panel .p-colorpicker-color-handle{border-radius:100%;border-style:solid;border-width:1px;cursor:pointer;height:10px;left:150px;margin:-5px 0 0 -5px;opacity:.85;position:absolute;top:0;width:10px}.p-colorpicker-panel .p-colorpicker-hue{height:150px;left:167px;opacity:.85;position:absolute;top:8px;width:17px}.p-colorpicker-panel .p-colorpicker-hue-handle{border-style:solid;border-width:2px;cursor:pointer;height:10px;left:0;margin-left:-2px;margin-top:-5px;opacity:.85;position:absolute;top:150px;width:21px}"]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"showTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"hideTransitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":5}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":84,"character":5},"arguments":["container"]}]}],"inputViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":86,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":130,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":130,"character":56},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":130,"character":78}]}],"colorSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":5},"arguments":["colorSelector"]}]}],"colorHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":5},"arguments":["colorHandle"]}]}],"hue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":140,"character":5},"arguments":["hue"]}]}],"hueHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":144,"character":5},"arguments":["hueHandle"]}]}],"onHueMousedown":[{"__symbolic":"method"}],"onHueTouchStart":[{"__symbolic":"method"}],"onColorTouchStart":[{"__symbolic":"method"}],"pickHue":[{"__symbolic":"method"}],"onColorMousedown":[{"__symbolic":"method"}],"onMove":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}],"pickColor":[{"__symbolic":"method"}],"getValueToUpdate":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"updateColorSelector":[{"__symbolic":"method"}],"updateUI":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"onOverlayAnimationStart":[{"__symbolic":"method"}],"onOverlayAnimationEnd":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"togglePanel":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onPanelClick":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"bindDocumentClickListener":[{"__symbolic":"method"}],"unbindDocumentClickListener":[{"__symbolic":"method"}],"bindDocumentMousemoveListener":[{"__symbolic":"method"}],"unbindDocumentMousemoveListener":[{"__symbolic":"method"}],"bindDocumentMouseupListener":[{"__symbolic":"method"}],"unbindDocumentMouseupListener":[{"__symbolic":"method"}],"bindDocumentResizeListener":[{"__symbolic":"method"}],"unbindDocumentResizeListener":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"bindScrollListener":[{"__symbolic":"method"}],"unbindScrollListener":[{"__symbolic":"method"}],"validateHSB":[{"__symbolic":"method"}],"validateRGB":[{"__symbolic":"method"}],"validateHEX":[{"__symbolic":"method"}],"HEXtoRGB":[{"__symbolic":"method"}],"HEXtoHSB":[{"__symbolic":"method"}],"RGBtoHSB":[{"__symbolic":"method"}],"HSBtoRGB":[{"__symbolic":"method"}],"RGBtoHEX":[{"__symbolic":"method"}],"HSBtoHEX":[{"__symbolic":"method"}],"onOverlayHide":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ColorPickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":667,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":668,"character":14}],"exports":[{"__symbolic":"reference","name":"ColorPicker"}],"declarations":[{"__symbolic":"reference","name":"ColorPicker"}]}]}],"members":{}}},"origins":{"COLORPICKER_VALUE_ACCESSOR":"./colorpicker","ColorPicker":"./colorpicker","ColorPickerModule":"./colorpicker"},"importAs":"primeng/colorpicker"}