import * as i0 from '@angular/core'; import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core'; import { trigger, transition, style, animate } from '@angular/animations'; import * as i2 from '@angular/common'; import { CommonModule } from '@angular/common'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { ZIndexUtils } from 'primeng/utils'; import * as i1 from 'primeng/api'; const COLORPICKER_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true }; class ColorPicker { constructor(el, renderer, cd, config, overlayService) { this.el = el; this.renderer = renderer; this.cd = cd; this.config = config; this.overlayService = overlayService; this.format = 'hex'; this.autoZIndex = true; this.baseZIndex = 0; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; this.onChange = new EventEmitter(); this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.value = { h: 0, s: 100, b: 100 }; this.defaultColor = 'ff0000'; this.onModelChange = () => { }; this.onModelTouched = () => { }; } set colorSelector(element) { this.colorSelectorViewChild = element; } set colorHandle(element) { this.colorHandleViewChild = element; } set hue(element) { this.hueViewChild = element; } set hueHandle(element) { this.hueHandleViewChild = element; } onHueMousedown(event) { if (this.disabled) { return; } this.bindDocumentMousemoveListener(); this.bindDocumentMouseupListener(); this.hueDragging = true; this.pickHue(event); } onHueTouchStart(event) { if (this.disabled) { return; } this.hueDragging = true; this.pickHue(event, event.changedTouches[0]); } onColorTouchStart(event) { if (this.disabled) { return; } this.colorDragging = true; this.pickColor(event, event.changedTouches[0]); } pickHue(event, position) { let pageY = position ? position.pageY : event.pageY; let top = this.hueViewChild.nativeElement.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); this.value = this.validateHSB({ h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (pageY - top)))) / 150), s: this.value.s, b: this.value.b }); this.updateColorSelector(); this.updateUI(); this.updateModel(); this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() }); } onColorMousedown(event) { if (this.disabled) { return; } this.bindDocumentMousemoveListener(); this.bindDocumentMouseupListener(); this.colorDragging = true; this.pickColor(event); } onMove(event) { if (this.colorDragging) { this.pickColor(event, event.changedTouches[0]); event.preventDefault(); } if (this.hueDragging) { this.pickHue(event, event.changedTouches[0]); event.preventDefault(); } } onDragEnd() { this.colorDragging = false; this.hueDragging = false; this.unbindDocumentMousemoveListener(); this.unbindDocumentMouseupListener(); } pickColor(event, position) { let pageX = position ? position.pageX : event.pageX; let pageY = position ? position.pageY : event.pageY; let rect = this.colorSelectorViewChild.nativeElement.getBoundingClientRect(); let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); let left = rect.left + document.body.scrollLeft; let saturation = Math.floor(100 * (Math.max(0, Math.min(150, ((pageX) - left)))) / 150); let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, ((pageY) - top)))) / 150); this.value = this.validateHSB({ h: this.value.h, s: saturation, b: brightness }); this.updateUI(); this.updateModel(); this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() }); } getValueToUpdate() { let val; switch (this.format) { case 'hex': val = '#' + this.HSBtoHEX(this.value); break; case 'rgb': val = this.HSBtoRGB(this.value); break; case 'hsb': val = this.value; break; } return val; } updateModel() { this.onModelChange(this.getValueToUpdate()); } writeValue(value) { if (value) { switch (this.format) { case 'hex': this.value = this.HEXtoHSB(value); break; case 'rgb': this.value = this.RGBtoHSB(value); break; case 'hsb': this.value = value; break; } } else { this.value = this.HEXtoHSB(this.defaultColor); } this.updateColorSelector(); this.updateUI(); this.cd.markForCheck(); } updateColorSelector() { if (this.colorSelectorViewChild) { const hsb = {}; hsb.s = 100; hsb.b = 100; hsb.h = this.value.h; this.colorSelectorViewChild.nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(hsb); } } updateUI() { if (this.colorHandleViewChild && this.hueHandleViewChild.nativeElement) { this.colorHandleViewChild.nativeElement.style.left = Math.floor(150 * this.value.s / 100) + 'px'; this.colorHandleViewChild.nativeElement.style.top = Math.floor(150 * (100 - this.value.b) / 100) + 'px'; this.hueHandleViewChild.nativeElement.style.top = Math.floor(150 - (150 * this.value.h / 360)) + 'px'; } this.inputBgColor = '#' + this.HSBtoHEX(this.value); } onInputFocus() { this.onModelTouched(); } show() { this.overlayVisible = true; } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': if (!this.inline) { this.overlay = event.element; this.appendOverlay(); if (this.autoZIndex) { ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay); } this.alignOverlay(); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); this.updateColorSelector(); this.updateUI(); } break; case 'void': this.onOverlayHide(); break; } } onOverlayAnimationEnd(event) { switch (event.toState) { case 'visible': if (!this.inline) { this.onShow.emit({}); } break; case 'void': if (this.autoZIndex) { ZIndexUtils.clear(event.element); } this.onHide.emit({}); break; } } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.overlay); else DomHandler.appendChild(this.overlay, this.appendTo); } } restoreOverlayAppend() { if (this.overlay && this.appendTo) { this.el.nativeElement.appendChild(this.overlay); } } alignOverlay() { if (this.appendTo) DomHandler.absolutePosition(this.overlay, this.inputViewChild.nativeElement); else DomHandler.relativePosition(this.overlay, this.inputViewChild.nativeElement); } hide() { this.overlayVisible = false; this.cd.markForCheck(); } onInputClick() { this.selfClick = true; this.togglePanel(); } togglePanel() { if (!this.overlayVisible) this.show(); else this.hide(); } onInputKeydown(event) { switch (event.which) { //space case 32: this.togglePanel(); event.preventDefault(); break; //escape and tab case 27: case 9: this.hide(); break; } } onOverlayClick(event) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); this.selfClick = true; } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { this.disabled = val; this.cd.markForCheck(); } bindDocumentClickListener() { if (!this.documentClickListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => { if (!this.selfClick) { this.overlayVisible = false; this.unbindDocumentClickListener(); } this.selfClick = false; this.cd.markForCheck(); }); } } unbindDocumentClickListener() { if (this.documentClickListener) { this.documentClickListener(); this.documentClickListener = null; } } bindDocumentMousemoveListener() { if (!this.documentMousemoveListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentMousemoveListener = this.renderer.listen(documentTarget, 'mousemove', (event) => { if (this.colorDragging) { this.pickColor(event); } if (this.hueDragging) { this.pickHue(event); } }); } } unbindDocumentMousemoveListener() { if (this.documentMousemoveListener) { this.documentMousemoveListener(); this.documentMousemoveListener = null; } } bindDocumentMouseupListener() { if (!this.documentMouseupListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentMouseupListener = this.renderer.listen(documentTarget, 'mouseup', () => { this.colorDragging = false; this.hueDragging = false; this.unbindDocumentMousemoveListener(); this.unbindDocumentMouseupListener(); }); } } unbindDocumentMouseupListener() { if (this.documentMouseupListener) { this.documentMouseupListener(); this.documentMouseupListener = null; } } bindDocumentResizeListener() { this.documentResizeListener = this.onWindowResize.bind(this); window.addEventListener('resize', this.documentResizeListener); } unbindDocumentResizeListener() { if (this.documentResizeListener) { window.removeEventListener('resize', this.documentResizeListener); this.documentResizeListener = null; } } onWindowResize() { this.hide(); } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, () => { if (this.overlayVisible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } validateHSB(hsb) { return { h: Math.min(360, Math.max(0, hsb.h)), s: Math.min(100, Math.max(0, hsb.s)), b: Math.min(100, Math.max(0, hsb.b)) }; } validateRGB(rgb) { return { r: Math.min(255, Math.max(0, rgb.r)), g: Math.min(255, Math.max(0, rgb.g)), b: Math.min(255, Math.max(0, rgb.b)) }; } validateHEX(hex) { var len = 6 - hex.length; if (len > 0) { var o = []; for (var i = 0; i < len; i++) { o.push('0'); } o.push(hex); hex = o.join(''); } return hex; } HEXtoRGB(hex) { let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); return { r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF) }; } HEXtoHSB(hex) { return this.RGBtoHSB(this.HEXtoRGB(hex)); } RGBtoHSB(rgb) { var hsb = { h: 0, s: 0, b: 0 }; var min = Math.min(rgb.r, rgb.g, rgb.b); var max = Math.max(rgb.r, rgb.g, rgb.b); var delta = max - min; hsb.b = max; hsb.s = max != 0 ? 255 * delta / max : 0; if (hsb.s != 0) { if (rgb.r == max) { hsb.h = (rgb.g - rgb.b) / delta; } else if (rgb.g == max) { hsb.h = 2 + (rgb.b - rgb.r) / delta; } else { hsb.h = 4 + (rgb.r - rgb.g) / delta; } } else { hsb.h = -1; } hsb.h *= 60; if (hsb.h < 0) { hsb.h += 360; } hsb.s *= 100 / 255; hsb.b *= 100 / 255; return hsb; } HSBtoRGB(hsb) { var rgb = { r: null, g: null, b: null }; let h = hsb.h; let s = hsb.s * 255 / 100; let v = hsb.b * 255 / 100; if (s == 0) { rgb = { r: v, g: v, b: v }; } else { let t1 = v; let t2 = (255 - s) * v / 255; let t3 = (t1 - t2) * (h % 60) / 60; if (h == 360) h = 0; if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; } else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; } else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; } else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; } else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; } else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; } else { rgb.r = 0; rgb.g = 0; rgb.b = 0; } } return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) }; } RGBtoHEX(rgb) { var hex = [ rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16) ]; for (var key in hex) { if (hex[key].length == 1) { hex[key] = '0' + hex[key]; } } return hex.join(''); } HSBtoHEX(hsb) { return this.RGBtoHEX(this.HSBtoRGB(hsb)); } onOverlayHide() { this.unbindScrollListener(); this.unbindDocumentResizeListener(); this.unbindDocumentClickListener(); this.overlay = null; } ngOnDestroy() { if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } if (this.overlay && this.autoZIndex) { ZIndexUtils.clear(this.overlay); } this.restoreOverlayAppend(); this.onOverlayHide(); } } ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPicker, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ColorPicker, selector: "p-colorPicker", inputs: { style: "style", styleClass: "styleClass", inline: "inline", format: "format", appendTo: "appendTo", disabled: "disabled", tabindex: "tabindex", inputId: "inputId", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, providers: [COLORPICKER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }, { propertyName: "colorSelector", first: true, predicate: ["colorSelector"], descendants: true }, { propertyName: "colorHandle", first: true, predicate: ["colorHandle"], descendants: true }, { propertyName: "hue", first: true, predicate: ["hue"], descendants: true }, { propertyName: "hueHandle", first: true, predicate: ["hueHandle"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: [".p-colorpicker{display:inline-block}.p-colorpicker-dragging{cursor:pointer}.p-colorpicker-overlay{position:relative}.p-colorpicker-panel{position:relative;width:193px;height:166px}.p-colorpicker-overlay-panel{position:absolute;top:0;left:0}.p-colorpicker-preview{cursor:pointer}.p-colorpicker-panel .p-colorpicker-content{position:relative}.p-colorpicker-panel .p-colorpicker-color-selector{width:150px;height:150px;top:8px;left:8px;position:absolute}.p-colorpicker-panel .p-colorpicker-color{width:150px;height:150px}.p-colorpicker-panel .p-colorpicker-color-handle{position:absolute;top:0px;left:150px;border-radius:100%;width:10px;height:10px;border-width:1px;border-style:solid;margin:-5px 0 0 -5px;cursor:pointer;opacity:.85}.p-colorpicker-panel .p-colorpicker-hue{width:17px;height:150px;top:8px;left:167px;position:absolute;opacity:.85}.p-colorpicker-panel .p-colorpicker-hue-handle{position:absolute;top:150px;left:0px;width:21px;margin-left:-2px;margin-top:-5px;height:10px;border-width:2px;border-style:solid;opacity:.85;cursor:pointer}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPicker, decorators: [{ type: Component, args: [{ selector: 'p-colorPicker', template: `
`, animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], providers: [COLORPICKER_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-colorpicker{display:inline-block}.p-colorpicker-dragging{cursor:pointer}.p-colorpicker-overlay{position:relative}.p-colorpicker-panel{position:relative;width:193px;height:166px}.p-colorpicker-overlay-panel{position:absolute;top:0;left:0}.p-colorpicker-preview{cursor:pointer}.p-colorpicker-panel .p-colorpicker-content{position:relative}.p-colorpicker-panel .p-colorpicker-color-selector{width:150px;height:150px;top:8px;left:8px;position:absolute}.p-colorpicker-panel .p-colorpicker-color{width:150px;height:150px}.p-colorpicker-panel .p-colorpicker-color-handle{position:absolute;top:0px;left:150px;border-radius:100%;width:10px;height:10px;border-width:1px;border-style:solid;margin:-5px 0 0 -5px;cursor:pointer;opacity:.85}.p-colorpicker-panel .p-colorpicker-hue{width:17px;height:150px;top:8px;left:167px;position:absolute;opacity:.85}.p-colorpicker-panel .p-colorpicker-hue-handle{position:absolute;top:150px;left:0px;width:21px;margin-left:-2px;margin-top:-5px;height:10px;border-width:2px;border-style:solid;opacity:.85;cursor:pointer}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }]; }, propDecorators: { style: [{ type: Input }], styleClass: [{ type: Input }], inline: [{ type: Input }], format: [{ type: Input }], appendTo: [{ type: Input }], disabled: [{ type: Input }], tabindex: [{ type: Input }], inputId: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], onChange: [{ type: Output }], onShow: [{ type: Output }], onHide: [{ type: Output }], containerViewChild: [{ type: ViewChild, args: ['container'] }], inputViewChild: [{ type: ViewChild, args: ['input'] }], colorSelector: [{ type: ViewChild, args: ['colorSelector'] }], colorHandle: [{ type: ViewChild, args: ['colorHandle'] }], hue: [{ type: ViewChild, args: ['hue'] }], hueHandle: [{ type: ViewChild, args: ['hueHandle'] }] } }); class ColorPickerModule { } ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, declarations: [ColorPicker], imports: [CommonModule], exports: [ColorPicker] }); ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, imports: [[CommonModule]] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule], exports: [ColorPicker], declarations: [ColorPicker] }] }] }); /** * Generated bundle index. Do not edit. */ export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerModule };