[59329aa] | 1 | import * as i0 from '@angular/core';
|
---|
| 2 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
|
---|
| 3 | import { trigger, transition, style, animate } from '@angular/animations';
|
---|
| 4 | import * as i2 from '@angular/common';
|
---|
| 5 | import { CommonModule } from '@angular/common';
|
---|
| 6 | import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
---|
| 7 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
---|
| 8 | import { ZIndexUtils } from 'primeng/utils';
|
---|
| 9 | import * as i1 from 'primeng/api';
|
---|
| 10 |
|
---|
| 11 | const COLORPICKER_VALUE_ACCESSOR = {
|
---|
| 12 | provide: NG_VALUE_ACCESSOR,
|
---|
| 13 | useExisting: forwardRef(() => ColorPicker),
|
---|
| 14 | multi: true
|
---|
| 15 | };
|
---|
| 16 | class ColorPicker {
|
---|
| 17 | constructor(el, renderer, cd, config, overlayService) {
|
---|
| 18 | this.el = el;
|
---|
| 19 | this.renderer = renderer;
|
---|
| 20 | this.cd = cd;
|
---|
| 21 | this.config = config;
|
---|
| 22 | this.overlayService = overlayService;
|
---|
| 23 | this.format = 'hex';
|
---|
| 24 | this.autoZIndex = true;
|
---|
| 25 | this.baseZIndex = 0;
|
---|
| 26 | this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
---|
| 27 | this.hideTransitionOptions = '.1s linear';
|
---|
| 28 | this.onChange = new EventEmitter();
|
---|
| 29 | this.onShow = new EventEmitter();
|
---|
| 30 | this.onHide = new EventEmitter();
|
---|
| 31 | this.value = { h: 0, s: 100, b: 100 };
|
---|
| 32 | this.defaultColor = 'ff0000';
|
---|
| 33 | this.onModelChange = () => { };
|
---|
| 34 | this.onModelTouched = () => { };
|
---|
| 35 | }
|
---|
| 36 | set colorSelector(element) {
|
---|
| 37 | this.colorSelectorViewChild = element;
|
---|
| 38 | }
|
---|
| 39 | set colorHandle(element) {
|
---|
| 40 | this.colorHandleViewChild = element;
|
---|
| 41 | }
|
---|
| 42 | set hue(element) {
|
---|
| 43 | this.hueViewChild = element;
|
---|
| 44 | }
|
---|
| 45 | set hueHandle(element) {
|
---|
| 46 | this.hueHandleViewChild = element;
|
---|
| 47 | }
|
---|
| 48 | onHueMousedown(event) {
|
---|
| 49 | if (this.disabled) {
|
---|
| 50 | return;
|
---|
| 51 | }
|
---|
| 52 | this.bindDocumentMousemoveListener();
|
---|
| 53 | this.bindDocumentMouseupListener();
|
---|
| 54 | this.hueDragging = true;
|
---|
| 55 | this.pickHue(event);
|
---|
| 56 | }
|
---|
| 57 | onHueTouchStart(event) {
|
---|
| 58 | if (this.disabled) {
|
---|
| 59 | return;
|
---|
| 60 | }
|
---|
| 61 | this.hueDragging = true;
|
---|
| 62 | this.pickHue(event, event.changedTouches[0]);
|
---|
| 63 | }
|
---|
| 64 | onColorTouchStart(event) {
|
---|
| 65 | if (this.disabled) {
|
---|
| 66 | return;
|
---|
| 67 | }
|
---|
| 68 | this.colorDragging = true;
|
---|
| 69 | this.pickColor(event, event.changedTouches[0]);
|
---|
| 70 | }
|
---|
| 71 | pickHue(event, position) {
|
---|
| 72 | let pageY = position ? position.pageY : event.pageY;
|
---|
| 73 | let top = this.hueViewChild.nativeElement.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
|
---|
| 74 | this.value = this.validateHSB({
|
---|
| 75 | h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (pageY - top)))) / 150),
|
---|
| 76 | s: this.value.s,
|
---|
| 77 | b: this.value.b
|
---|
| 78 | });
|
---|
| 79 | this.updateColorSelector();
|
---|
| 80 | this.updateUI();
|
---|
| 81 | this.updateModel();
|
---|
| 82 | this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() });
|
---|
| 83 | }
|
---|
| 84 | onColorMousedown(event) {
|
---|
| 85 | if (this.disabled) {
|
---|
| 86 | return;
|
---|
| 87 | }
|
---|
| 88 | this.bindDocumentMousemoveListener();
|
---|
| 89 | this.bindDocumentMouseupListener();
|
---|
| 90 | this.colorDragging = true;
|
---|
| 91 | this.pickColor(event);
|
---|
| 92 | }
|
---|
| 93 | onMove(event) {
|
---|
| 94 | if (this.colorDragging) {
|
---|
| 95 | this.pickColor(event, event.changedTouches[0]);
|
---|
| 96 | event.preventDefault();
|
---|
| 97 | }
|
---|
| 98 | if (this.hueDragging) {
|
---|
| 99 | this.pickHue(event, event.changedTouches[0]);
|
---|
| 100 | event.preventDefault();
|
---|
| 101 | }
|
---|
| 102 | }
|
---|
| 103 | onDragEnd() {
|
---|
| 104 | this.colorDragging = false;
|
---|
| 105 | this.hueDragging = false;
|
---|
| 106 | this.unbindDocumentMousemoveListener();
|
---|
| 107 | this.unbindDocumentMouseupListener();
|
---|
| 108 | }
|
---|
| 109 | pickColor(event, position) {
|
---|
| 110 | let pageX = position ? position.pageX : event.pageX;
|
---|
| 111 | let pageY = position ? position.pageY : event.pageY;
|
---|
| 112 | let rect = this.colorSelectorViewChild.nativeElement.getBoundingClientRect();
|
---|
| 113 | let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
|
---|
| 114 | let left = rect.left + document.body.scrollLeft;
|
---|
| 115 | let saturation = Math.floor(100 * (Math.max(0, Math.min(150, ((pageX) - left)))) / 150);
|
---|
| 116 | let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, ((pageY) - top)))) / 150);
|
---|
| 117 | this.value = this.validateHSB({
|
---|
| 118 | h: this.value.h,
|
---|
| 119 | s: saturation,
|
---|
| 120 | b: brightness
|
---|
| 121 | });
|
---|
| 122 | this.updateUI();
|
---|
| 123 | this.updateModel();
|
---|
| 124 | this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() });
|
---|
| 125 | }
|
---|
| 126 | getValueToUpdate() {
|
---|
| 127 | let val;
|
---|
| 128 | switch (this.format) {
|
---|
| 129 | case 'hex':
|
---|
| 130 | val = '#' + this.HSBtoHEX(this.value);
|
---|
| 131 | break;
|
---|
| 132 | case 'rgb':
|
---|
| 133 | val = this.HSBtoRGB(this.value);
|
---|
| 134 | break;
|
---|
| 135 | case 'hsb':
|
---|
| 136 | val = this.value;
|
---|
| 137 | break;
|
---|
| 138 | }
|
---|
| 139 | return val;
|
---|
| 140 | }
|
---|
| 141 | updateModel() {
|
---|
| 142 | this.onModelChange(this.getValueToUpdate());
|
---|
| 143 | }
|
---|
| 144 | writeValue(value) {
|
---|
| 145 | if (value) {
|
---|
| 146 | switch (this.format) {
|
---|
| 147 | case 'hex':
|
---|
| 148 | this.value = this.HEXtoHSB(value);
|
---|
| 149 | break;
|
---|
| 150 | case 'rgb':
|
---|
| 151 | this.value = this.RGBtoHSB(value);
|
---|
| 152 | break;
|
---|
| 153 | case 'hsb':
|
---|
| 154 | this.value = value;
|
---|
| 155 | break;
|
---|
| 156 | }
|
---|
| 157 | }
|
---|
| 158 | else {
|
---|
| 159 | this.value = this.HEXtoHSB(this.defaultColor);
|
---|
| 160 | }
|
---|
| 161 | this.updateColorSelector();
|
---|
| 162 | this.updateUI();
|
---|
| 163 | this.cd.markForCheck();
|
---|
| 164 | }
|
---|
| 165 | updateColorSelector() {
|
---|
| 166 | if (this.colorSelectorViewChild) {
|
---|
| 167 | const hsb = {};
|
---|
| 168 | hsb.s = 100;
|
---|
| 169 | hsb.b = 100;
|
---|
| 170 | hsb.h = this.value.h;
|
---|
| 171 | this.colorSelectorViewChild.nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(hsb);
|
---|
| 172 | }
|
---|
| 173 | }
|
---|
| 174 | updateUI() {
|
---|
| 175 | if (this.colorHandleViewChild && this.hueHandleViewChild.nativeElement) {
|
---|
| 176 | this.colorHandleViewChild.nativeElement.style.left = Math.floor(150 * this.value.s / 100) + 'px';
|
---|
| 177 | this.colorHandleViewChild.nativeElement.style.top = Math.floor(150 * (100 - this.value.b) / 100) + 'px';
|
---|
| 178 | this.hueHandleViewChild.nativeElement.style.top = Math.floor(150 - (150 * this.value.h / 360)) + 'px';
|
---|
| 179 | }
|
---|
| 180 | this.inputBgColor = '#' + this.HSBtoHEX(this.value);
|
---|
| 181 | }
|
---|
| 182 | onInputFocus() {
|
---|
| 183 | this.onModelTouched();
|
---|
| 184 | }
|
---|
| 185 | show() {
|
---|
| 186 | this.overlayVisible = true;
|
---|
| 187 | }
|
---|
| 188 | onOverlayAnimationStart(event) {
|
---|
| 189 | switch (event.toState) {
|
---|
| 190 | case 'visible':
|
---|
| 191 | if (!this.inline) {
|
---|
| 192 | this.overlay = event.element;
|
---|
| 193 | this.appendOverlay();
|
---|
| 194 | if (this.autoZIndex) {
|
---|
| 195 | ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
|
---|
| 196 | }
|
---|
| 197 | this.alignOverlay();
|
---|
| 198 | this.bindDocumentClickListener();
|
---|
| 199 | this.bindDocumentResizeListener();
|
---|
| 200 | this.bindScrollListener();
|
---|
| 201 | this.updateColorSelector();
|
---|
| 202 | this.updateUI();
|
---|
| 203 | }
|
---|
| 204 | break;
|
---|
| 205 | case 'void':
|
---|
| 206 | this.onOverlayHide();
|
---|
| 207 | break;
|
---|
| 208 | }
|
---|
| 209 | }
|
---|
| 210 | onOverlayAnimationEnd(event) {
|
---|
| 211 | switch (event.toState) {
|
---|
| 212 | case 'visible':
|
---|
| 213 | if (!this.inline) {
|
---|
| 214 | this.onShow.emit({});
|
---|
| 215 | }
|
---|
| 216 | break;
|
---|
| 217 | case 'void':
|
---|
| 218 | if (this.autoZIndex) {
|
---|
| 219 | ZIndexUtils.clear(event.element);
|
---|
| 220 | }
|
---|
| 221 | this.onHide.emit({});
|
---|
| 222 | break;
|
---|
| 223 | }
|
---|
| 224 | }
|
---|
| 225 | appendOverlay() {
|
---|
| 226 | if (this.appendTo) {
|
---|
| 227 | if (this.appendTo === 'body')
|
---|
| 228 | document.body.appendChild(this.overlay);
|
---|
| 229 | else
|
---|
| 230 | DomHandler.appendChild(this.overlay, this.appendTo);
|
---|
| 231 | }
|
---|
| 232 | }
|
---|
| 233 | restoreOverlayAppend() {
|
---|
| 234 | if (this.overlay && this.appendTo) {
|
---|
| 235 | this.el.nativeElement.appendChild(this.overlay);
|
---|
| 236 | }
|
---|
| 237 | }
|
---|
| 238 | alignOverlay() {
|
---|
| 239 | if (this.appendTo)
|
---|
| 240 | DomHandler.absolutePosition(this.overlay, this.inputViewChild.nativeElement);
|
---|
| 241 | else
|
---|
| 242 | DomHandler.relativePosition(this.overlay, this.inputViewChild.nativeElement);
|
---|
| 243 | }
|
---|
| 244 | hide() {
|
---|
| 245 | this.overlayVisible = false;
|
---|
| 246 | this.cd.markForCheck();
|
---|
| 247 | }
|
---|
| 248 | onInputClick() {
|
---|
| 249 | this.selfClick = true;
|
---|
| 250 | this.togglePanel();
|
---|
| 251 | }
|
---|
| 252 | togglePanel() {
|
---|
| 253 | if (!this.overlayVisible)
|
---|
| 254 | this.show();
|
---|
| 255 | else
|
---|
| 256 | this.hide();
|
---|
| 257 | }
|
---|
| 258 | onInputKeydown(event) {
|
---|
| 259 | switch (event.which) {
|
---|
| 260 | //space
|
---|
| 261 | case 32:
|
---|
| 262 | this.togglePanel();
|
---|
| 263 | event.preventDefault();
|
---|
| 264 | break;
|
---|
| 265 | //escape and tab
|
---|
| 266 | case 27:
|
---|
| 267 | case 9:
|
---|
| 268 | this.hide();
|
---|
| 269 | break;
|
---|
| 270 | }
|
---|
| 271 | }
|
---|
| 272 | onOverlayClick(event) {
|
---|
| 273 | this.overlayService.add({
|
---|
| 274 | originalEvent: event,
|
---|
| 275 | target: this.el.nativeElement
|
---|
| 276 | });
|
---|
| 277 | this.selfClick = true;
|
---|
| 278 | }
|
---|
| 279 | registerOnChange(fn) {
|
---|
| 280 | this.onModelChange = fn;
|
---|
| 281 | }
|
---|
| 282 | registerOnTouched(fn) {
|
---|
| 283 | this.onModelTouched = fn;
|
---|
| 284 | }
|
---|
| 285 | setDisabledState(val) {
|
---|
| 286 | this.disabled = val;
|
---|
| 287 | this.cd.markForCheck();
|
---|
| 288 | }
|
---|
| 289 | bindDocumentClickListener() {
|
---|
| 290 | if (!this.documentClickListener) {
|
---|
| 291 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
---|
| 292 | this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
|
---|
| 293 | if (!this.selfClick) {
|
---|
| 294 | this.overlayVisible = false;
|
---|
| 295 | this.unbindDocumentClickListener();
|
---|
| 296 | }
|
---|
| 297 | this.selfClick = false;
|
---|
| 298 | this.cd.markForCheck();
|
---|
| 299 | });
|
---|
| 300 | }
|
---|
| 301 | }
|
---|
| 302 | unbindDocumentClickListener() {
|
---|
| 303 | if (this.documentClickListener) {
|
---|
| 304 | this.documentClickListener();
|
---|
| 305 | this.documentClickListener = null;
|
---|
| 306 | }
|
---|
| 307 | }
|
---|
| 308 | bindDocumentMousemoveListener() {
|
---|
| 309 | if (!this.documentMousemoveListener) {
|
---|
| 310 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
---|
| 311 | this.documentMousemoveListener = this.renderer.listen(documentTarget, 'mousemove', (event) => {
|
---|
| 312 | if (this.colorDragging) {
|
---|
| 313 | this.pickColor(event);
|
---|
| 314 | }
|
---|
| 315 | if (this.hueDragging) {
|
---|
| 316 | this.pickHue(event);
|
---|
| 317 | }
|
---|
| 318 | });
|
---|
| 319 | }
|
---|
| 320 | }
|
---|
| 321 | unbindDocumentMousemoveListener() {
|
---|
| 322 | if (this.documentMousemoveListener) {
|
---|
| 323 | this.documentMousemoveListener();
|
---|
| 324 | this.documentMousemoveListener = null;
|
---|
| 325 | }
|
---|
| 326 | }
|
---|
| 327 | bindDocumentMouseupListener() {
|
---|
| 328 | if (!this.documentMouseupListener) {
|
---|
| 329 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
---|
| 330 | this.documentMouseupListener = this.renderer.listen(documentTarget, 'mouseup', () => {
|
---|
| 331 | this.colorDragging = false;
|
---|
| 332 | this.hueDragging = false;
|
---|
| 333 | this.unbindDocumentMousemoveListener();
|
---|
| 334 | this.unbindDocumentMouseupListener();
|
---|
| 335 | });
|
---|
| 336 | }
|
---|
| 337 | }
|
---|
| 338 | unbindDocumentMouseupListener() {
|
---|
| 339 | if (this.documentMouseupListener) {
|
---|
| 340 | this.documentMouseupListener();
|
---|
| 341 | this.documentMouseupListener = null;
|
---|
| 342 | }
|
---|
| 343 | }
|
---|
| 344 | bindDocumentResizeListener() {
|
---|
| 345 | this.documentResizeListener = this.onWindowResize.bind(this);
|
---|
| 346 | window.addEventListener('resize', this.documentResizeListener);
|
---|
| 347 | }
|
---|
| 348 | unbindDocumentResizeListener() {
|
---|
| 349 | if (this.documentResizeListener) {
|
---|
| 350 | window.removeEventListener('resize', this.documentResizeListener);
|
---|
| 351 | this.documentResizeListener = null;
|
---|
| 352 | }
|
---|
| 353 | }
|
---|
| 354 | onWindowResize() {
|
---|
| 355 | this.hide();
|
---|
| 356 | }
|
---|
| 357 | bindScrollListener() {
|
---|
| 358 | if (!this.scrollHandler) {
|
---|
| 359 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, () => {
|
---|
| 360 | if (this.overlayVisible) {
|
---|
| 361 | this.hide();
|
---|
| 362 | }
|
---|
| 363 | });
|
---|
| 364 | }
|
---|
| 365 | this.scrollHandler.bindScrollListener();
|
---|
| 366 | }
|
---|
| 367 | unbindScrollListener() {
|
---|
| 368 | if (this.scrollHandler) {
|
---|
| 369 | this.scrollHandler.unbindScrollListener();
|
---|
| 370 | }
|
---|
| 371 | }
|
---|
| 372 | validateHSB(hsb) {
|
---|
| 373 | return {
|
---|
| 374 | h: Math.min(360, Math.max(0, hsb.h)),
|
---|
| 375 | s: Math.min(100, Math.max(0, hsb.s)),
|
---|
| 376 | b: Math.min(100, Math.max(0, hsb.b))
|
---|
| 377 | };
|
---|
| 378 | }
|
---|
| 379 | validateRGB(rgb) {
|
---|
| 380 | return {
|
---|
| 381 | r: Math.min(255, Math.max(0, rgb.r)),
|
---|
| 382 | g: Math.min(255, Math.max(0, rgb.g)),
|
---|
| 383 | b: Math.min(255, Math.max(0, rgb.b))
|
---|
| 384 | };
|
---|
| 385 | }
|
---|
| 386 | validateHEX(hex) {
|
---|
| 387 | var len = 6 - hex.length;
|
---|
| 388 | if (len > 0) {
|
---|
| 389 | var o = [];
|
---|
| 390 | for (var i = 0; i < len; i++) {
|
---|
| 391 | o.push('0');
|
---|
| 392 | }
|
---|
| 393 | o.push(hex);
|
---|
| 394 | hex = o.join('');
|
---|
| 395 | }
|
---|
| 396 | return hex;
|
---|
| 397 | }
|
---|
| 398 | HEXtoRGB(hex) {
|
---|
| 399 | let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
---|
| 400 | return { r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF) };
|
---|
| 401 | }
|
---|
| 402 | HEXtoHSB(hex) {
|
---|
| 403 | return this.RGBtoHSB(this.HEXtoRGB(hex));
|
---|
| 404 | }
|
---|
| 405 | RGBtoHSB(rgb) {
|
---|
| 406 | var hsb = {
|
---|
| 407 | h: 0,
|
---|
| 408 | s: 0,
|
---|
| 409 | b: 0
|
---|
| 410 | };
|
---|
| 411 | var min = Math.min(rgb.r, rgb.g, rgb.b);
|
---|
| 412 | var max = Math.max(rgb.r, rgb.g, rgb.b);
|
---|
| 413 | var delta = max - min;
|
---|
| 414 | hsb.b = max;
|
---|
| 415 | hsb.s = max != 0 ? 255 * delta / max : 0;
|
---|
| 416 | if (hsb.s != 0) {
|
---|
| 417 | if (rgb.r == max) {
|
---|
| 418 | hsb.h = (rgb.g - rgb.b) / delta;
|
---|
| 419 | }
|
---|
| 420 | else if (rgb.g == max) {
|
---|
| 421 | hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
---|
| 422 | }
|
---|
| 423 | else {
|
---|
| 424 | hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
---|
| 425 | }
|
---|
| 426 | }
|
---|
| 427 | else {
|
---|
| 428 | hsb.h = -1;
|
---|
| 429 | }
|
---|
| 430 | hsb.h *= 60;
|
---|
| 431 | if (hsb.h < 0) {
|
---|
| 432 | hsb.h += 360;
|
---|
| 433 | }
|
---|
| 434 | hsb.s *= 100 / 255;
|
---|
| 435 | hsb.b *= 100 / 255;
|
---|
| 436 | return hsb;
|
---|
| 437 | }
|
---|
| 438 | HSBtoRGB(hsb) {
|
---|
| 439 | var rgb = {
|
---|
| 440 | r: null, g: null, b: null
|
---|
| 441 | };
|
---|
| 442 | let h = hsb.h;
|
---|
| 443 | let s = hsb.s * 255 / 100;
|
---|
| 444 | let v = hsb.b * 255 / 100;
|
---|
| 445 | if (s == 0) {
|
---|
| 446 | rgb = {
|
---|
| 447 | r: v,
|
---|
| 448 | g: v,
|
---|
| 449 | b: v
|
---|
| 450 | };
|
---|
| 451 | }
|
---|
| 452 | else {
|
---|
| 453 | let t1 = v;
|
---|
| 454 | let t2 = (255 - s) * v / 255;
|
---|
| 455 | let t3 = (t1 - t2) * (h % 60) / 60;
|
---|
| 456 | if (h == 360)
|
---|
| 457 | h = 0;
|
---|
| 458 | if (h < 60) {
|
---|
| 459 | rgb.r = t1;
|
---|
| 460 | rgb.b = t2;
|
---|
| 461 | rgb.g = t2 + t3;
|
---|
| 462 | }
|
---|
| 463 | else if (h < 120) {
|
---|
| 464 | rgb.g = t1;
|
---|
| 465 | rgb.b = t2;
|
---|
| 466 | rgb.r = t1 - t3;
|
---|
| 467 | }
|
---|
| 468 | else if (h < 180) {
|
---|
| 469 | rgb.g = t1;
|
---|
| 470 | rgb.r = t2;
|
---|
| 471 | rgb.b = t2 + t3;
|
---|
| 472 | }
|
---|
| 473 | else if (h < 240) {
|
---|
| 474 | rgb.b = t1;
|
---|
| 475 | rgb.r = t2;
|
---|
| 476 | rgb.g = t1 - t3;
|
---|
| 477 | }
|
---|
| 478 | else if (h < 300) {
|
---|
| 479 | rgb.b = t1;
|
---|
| 480 | rgb.g = t2;
|
---|
| 481 | rgb.r = t2 + t3;
|
---|
| 482 | }
|
---|
| 483 | else if (h < 360) {
|
---|
| 484 | rgb.r = t1;
|
---|
| 485 | rgb.g = t2;
|
---|
| 486 | rgb.b = t1 - t3;
|
---|
| 487 | }
|
---|
| 488 | else {
|
---|
| 489 | rgb.r = 0;
|
---|
| 490 | rgb.g = 0;
|
---|
| 491 | rgb.b = 0;
|
---|
| 492 | }
|
---|
| 493 | }
|
---|
| 494 | return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
|
---|
| 495 | }
|
---|
| 496 | RGBtoHEX(rgb) {
|
---|
| 497 | var hex = [
|
---|
| 498 | rgb.r.toString(16),
|
---|
| 499 | rgb.g.toString(16),
|
---|
| 500 | rgb.b.toString(16)
|
---|
| 501 | ];
|
---|
| 502 | for (var key in hex) {
|
---|
| 503 | if (hex[key].length == 1) {
|
---|
| 504 | hex[key] = '0' + hex[key];
|
---|
| 505 | }
|
---|
| 506 | }
|
---|
| 507 | return hex.join('');
|
---|
| 508 | }
|
---|
| 509 | HSBtoHEX(hsb) {
|
---|
| 510 | return this.RGBtoHEX(this.HSBtoRGB(hsb));
|
---|
| 511 | }
|
---|
| 512 | onOverlayHide() {
|
---|
| 513 | this.unbindScrollListener();
|
---|
| 514 | this.unbindDocumentResizeListener();
|
---|
| 515 | this.unbindDocumentClickListener();
|
---|
| 516 | this.overlay = null;
|
---|
| 517 | }
|
---|
| 518 | ngOnDestroy() {
|
---|
| 519 | if (this.scrollHandler) {
|
---|
| 520 | this.scrollHandler.destroy();
|
---|
| 521 | this.scrollHandler = null;
|
---|
| 522 | }
|
---|
| 523 | if (this.overlay && this.autoZIndex) {
|
---|
| 524 | ZIndexUtils.clear(this.overlay);
|
---|
| 525 | }
|
---|
| 526 | this.restoreOverlayAppend();
|
---|
| 527 | this.onOverlayHide();
|
---|
| 528 | }
|
---|
| 529 | }
|
---|
| 530 | 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 });
|
---|
| 531 | 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: `
|
---|
| 532 | <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-colorpicker p-component':true,'p-colorpicker-overlay':!inline,'p-colorpicker-dragging':colorDragging||hueDragging}">
|
---|
| 533 | <input #input type="text" *ngIf="!inline" class="p-colorpicker-preview p-inputtext" readonly="readonly" [ngClass]="{'p-disabled': disabled}"
|
---|
| 534 | (focus)="onInputFocus()" (click)="onInputClick()" (keydown)="onInputKeydown($event)" [attr.id]="inputId" [attr.tabindex]="tabindex" [disabled]="disabled"
|
---|
| 535 | [style.backgroundColor]="inputBgColor">
|
---|
| 536 | <div *ngIf="inline || overlayVisible" [ngClass]="{'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel':!inline, 'p-disabled': disabled}" (click)="onOverlayClick($event)"
|
---|
| 537 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true"
|
---|
| 538 | (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
|
---|
| 539 | <div class="p-colorpicker-content">
|
---|
| 540 | <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)">
|
---|
| 541 | <div class="p-colorpicker-color">
|
---|
| 542 | <div #colorHandle class="p-colorpicker-color-handle"></div>
|
---|
| 543 | </div>
|
---|
| 544 | </div>
|
---|
| 545 | <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()">
|
---|
| 546 | <div #hueHandle class="p-colorpicker-hue-handle"></div>
|
---|
| 547 | </div>
|
---|
| 548 | </div>
|
---|
| 549 | </div>
|
---|
| 550 | </div>
|
---|
| 551 | `, 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: [
|
---|
| 552 | trigger('overlayAnimation', [
|
---|
| 553 | transition(':enter', [
|
---|
| 554 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
| 555 | animate('{{showTransitionParams}}')
|
---|
| 556 | ]),
|
---|
| 557 | transition(':leave', [
|
---|
| 558 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
| 559 | ])
|
---|
| 560 | ])
|
---|
| 561 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
---|
| 562 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPicker, decorators: [{
|
---|
| 563 | type: Component,
|
---|
| 564 | args: [{ selector: 'p-colorPicker', template: `
|
---|
| 565 | <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-colorpicker p-component':true,'p-colorpicker-overlay':!inline,'p-colorpicker-dragging':colorDragging||hueDragging}">
|
---|
| 566 | <input #input type="text" *ngIf="!inline" class="p-colorpicker-preview p-inputtext" readonly="readonly" [ngClass]="{'p-disabled': disabled}"
|
---|
| 567 | (focus)="onInputFocus()" (click)="onInputClick()" (keydown)="onInputKeydown($event)" [attr.id]="inputId" [attr.tabindex]="tabindex" [disabled]="disabled"
|
---|
| 568 | [style.backgroundColor]="inputBgColor">
|
---|
| 569 | <div *ngIf="inline || overlayVisible" [ngClass]="{'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel':!inline, 'p-disabled': disabled}" (click)="onOverlayClick($event)"
|
---|
| 570 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true"
|
---|
| 571 | (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
|
---|
| 572 | <div class="p-colorpicker-content">
|
---|
| 573 | <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)">
|
---|
| 574 | <div class="p-colorpicker-color">
|
---|
| 575 | <div #colorHandle class="p-colorpicker-color-handle"></div>
|
---|
| 576 | </div>
|
---|
| 577 | </div>
|
---|
| 578 | <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()">
|
---|
| 579 | <div #hueHandle class="p-colorpicker-hue-handle"></div>
|
---|
| 580 | </div>
|
---|
| 581 | </div>
|
---|
| 582 | </div>
|
---|
| 583 | </div>
|
---|
| 584 | `, animations: [
|
---|
| 585 | trigger('overlayAnimation', [
|
---|
| 586 | transition(':enter', [
|
---|
| 587 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
| 588 | animate('{{showTransitionParams}}')
|
---|
| 589 | ]),
|
---|
| 590 | transition(':leave', [
|
---|
| 591 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
| 592 | ])
|
---|
| 593 | ])
|
---|
| 594 | ], providers: [COLORPICKER_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
---|
| 595 | 'class': 'p-element'
|
---|
| 596 | }, 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"] }]
|
---|
| 597 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }]; }, propDecorators: { style: [{
|
---|
| 598 | type: Input
|
---|
| 599 | }], styleClass: [{
|
---|
| 600 | type: Input
|
---|
| 601 | }], inline: [{
|
---|
| 602 | type: Input
|
---|
| 603 | }], format: [{
|
---|
| 604 | type: Input
|
---|
| 605 | }], appendTo: [{
|
---|
| 606 | type: Input
|
---|
| 607 | }], disabled: [{
|
---|
| 608 | type: Input
|
---|
| 609 | }], tabindex: [{
|
---|
| 610 | type: Input
|
---|
| 611 | }], inputId: [{
|
---|
| 612 | type: Input
|
---|
| 613 | }], autoZIndex: [{
|
---|
| 614 | type: Input
|
---|
| 615 | }], baseZIndex: [{
|
---|
| 616 | type: Input
|
---|
| 617 | }], showTransitionOptions: [{
|
---|
| 618 | type: Input
|
---|
| 619 | }], hideTransitionOptions: [{
|
---|
| 620 | type: Input
|
---|
| 621 | }], onChange: [{
|
---|
| 622 | type: Output
|
---|
| 623 | }], onShow: [{
|
---|
| 624 | type: Output
|
---|
| 625 | }], onHide: [{
|
---|
| 626 | type: Output
|
---|
| 627 | }], containerViewChild: [{
|
---|
| 628 | type: ViewChild,
|
---|
| 629 | args: ['container']
|
---|
| 630 | }], inputViewChild: [{
|
---|
| 631 | type: ViewChild,
|
---|
| 632 | args: ['input']
|
---|
| 633 | }], colorSelector: [{
|
---|
| 634 | type: ViewChild,
|
---|
| 635 | args: ['colorSelector']
|
---|
| 636 | }], colorHandle: [{
|
---|
| 637 | type: ViewChild,
|
---|
| 638 | args: ['colorHandle']
|
---|
| 639 | }], hue: [{
|
---|
| 640 | type: ViewChild,
|
---|
| 641 | args: ['hue']
|
---|
| 642 | }], hueHandle: [{
|
---|
| 643 | type: ViewChild,
|
---|
| 644 | args: ['hueHandle']
|
---|
| 645 | }] } });
|
---|
| 646 | class ColorPickerModule {
|
---|
| 647 | }
|
---|
| 648 | ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
| 649 | ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, declarations: [ColorPicker], imports: [CommonModule], exports: [ColorPicker] });
|
---|
| 650 | ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, imports: [[CommonModule]] });
|
---|
| 651 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPickerModule, decorators: [{
|
---|
| 652 | type: NgModule,
|
---|
| 653 | args: [{
|
---|
| 654 | imports: [CommonModule],
|
---|
| 655 | exports: [ColorPicker],
|
---|
| 656 | declarations: [ColorPicker]
|
---|
| 657 | }]
|
---|
| 658 | }] });
|
---|
| 659 |
|
---|
| 660 | /**
|
---|
| 661 | * Generated bundle index. Do not edit.
|
---|
| 662 | */
|
---|
| 663 |
|
---|
| 664 | export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerModule };
|
---|