@qius.solutions/parallel-ui-angular 1.0.0

package/fesm2015/qius.solutions-parallel-ui-angular-colorpicker.mjs

@@ -0,0 +1,694 @@
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, PLATFORM_ID, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { DomHandler, ConnectedOverlayScrollHandler } from '@qius.solutions/parallel-ui-angular/dom';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ZIndexUtils } from '@qius.solutions/parallel-ui-angular/utils';
+import * as i1 from '@qius.solutions/parallel-ui-angular/api';
+
+const COLORPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ColorPicker),
+    multi: true
+};
+class ColorPicker {
+    constructor(document, platformId, el, renderer, cd, config, overlayService) {
+        this.document = document;
+        this.platformId = platformId;
+        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 = () => { };
+        this.window = this.document.defaultView;
+    }
+    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 + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.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 + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0);
+        let left = rect.left + this.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;
+        this.cd.markForCheck();
+    }
+    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')
+                this.renderer.appendChild(this.document.body, this.overlay);
+            else
+                DomHandler.appendChild(this.overlay, this.appendTo);
+        }
+    }
+    restoreOverlayAppend() {
+        if (this.overlay && this.appendTo) {
+            this.renderer.appendChild(this.el.nativeElement, 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() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    onWindowResize() {
+        if (this.overlayVisible && !DomHandler.isTouchDevice()) {
+            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: "15.2.10", ngImport: i0, type: ColorPicker, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.ParallelUIAngularConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+        <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="{ 'p-colorpicker p-component': true, 'p-colorpicker-overlay': !inline, 'p-colorpicker-dragging': colorDragging || hueDragging }">
+            <input
+                #input
+                type="text"
+                *ngIf="!inline"
+                class="p-colorpicker-preview p-inputtext"
+                readonly="readonly"
+                [ngClass]="{ 'p-disabled': disabled }"
+                (focus)="onInputFocus()"
+                (click)="onInputClick()"
+                (keydown)="onInputKeydown($event)"
+                [attr.id]="inputId"
+                [attr.tabindex]="tabindex"
+                [disabled]="disabled"
+                [style.backgroundColor]="inputBgColor"
+            />
+            <div
+                *ngIf="inline || overlayVisible"
+                [ngClass]="{ 'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel': !inline, 'p-disabled': disabled }"
+                (click)="onOverlayClick($event)"
+                [@overlayAnimation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
+                [@.disabled]="inline === true"
+                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            >
+                <div class="p-colorpicker-content">
+                    <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)">
+                        <div class="p-colorpicker-color">
+                            <div #colorHandle class="p-colorpicker-color-handle"></div>
+                        </div>
+                    </div>
+                    <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()">
+                        <div #hueHandle class="p-colorpicker-hue-handle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, 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:0;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:0;width:21px;margin-left:-2px;margin-top:-5px;height:10px;border-width:2px;border-style:solid;opacity:.85;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], 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: "15.2.10", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'p-colorPicker', template: `
+        <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="{ 'p-colorpicker p-component': true, 'p-colorpicker-overlay': !inline, 'p-colorpicker-dragging': colorDragging || hueDragging }">
+            <input
+                #input
+                type="text"
+                *ngIf="!inline"
+                class="p-colorpicker-preview p-inputtext"
+                readonly="readonly"
+                [ngClass]="{ 'p-disabled': disabled }"
+                (focus)="onInputFocus()"
+                (click)="onInputClick()"
+                (keydown)="onInputKeydown($event)"
+                [attr.id]="inputId"
+                [attr.tabindex]="tabindex"
+                [disabled]="disabled"
+                [style.backgroundColor]="inputBgColor"
+            />
+            <div
+                *ngIf="inline || overlayVisible"
+                [ngClass]="{ 'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel': !inline, 'p-disabled': disabled }"
+                (click)="onOverlayClick($event)"
+                [@overlayAnimation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
+                [@.disabled]="inline === true"
+                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            >
+                <div class="p-colorpicker-content">
+                    <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)">
+                        <div class="p-colorpicker-color">
+                            <div #colorHandle class="p-colorpicker-color-handle"></div>
+                        </div>
+                    </div>
+                    <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()">
+                        <div #hueHandle class="p-colorpicker-hue-handle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, 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:0;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:0;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: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.ParallelUIAngularConfig }, { 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: "15.2.10", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, declarations: [ColorPicker], imports: [CommonModule], exports: [ColorPicker] });
+ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 };
+//# sourceMappingURL=qius.solutions-parallel-ui-angular-colorpicker.mjs.map