@ng-nest/ui 12.0.8 → 13.0.2

package/fesm2015/ng-nest-ui-color-picker.mjs

@@ -0,0 +1,689 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, Inject, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import { XWithConfig, XInputBoolean, XIsEmpty, XConnectBaseAnimation, XClearClass } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/common';
+import { DOCUMENT, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
+import * as i2 from '@ng-nest/ui/slider-select';
+import { XSliderSelectModule } from '@ng-nest/ui/slider-select';
+import * as i3 from '@ng-nest/ui/tabs';
+import { XTabsModule } from '@ng-nest/ui/tabs';
+import * as i4 from '@ng-nest/ui/input';
+import { XInputModule } from '@ng-nest/ui/input';
+import * as i5 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i4$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@ng-nest/ui/portal';
+import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
+import * as i2$1 from '@angular/cdk/overlay';
+
+/**
+ * ColorPicker
+ * @selector x-color-picker
+ * @decorator component
+ */
+const XColorPickerPrefix = 'x-color-picker';
+const X_CONFIG_NAME = 'colorPicker';
+/**
+ * ColorPicker Property
+ */
+class XColorPickerProperty extends XControlValueAccessor {
+}
+/** @nocollapse */ /** @nocollapse */ XColorPickerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XColorPickerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XColorPickerProperty, selector: "ng-component", inputs: { placement: "placement", size: "size", bordered: "bordered" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'bottom-start')
+], XColorPickerProperty.prototype, "placement", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'medium')
+], XColorPickerProperty.prototype, "size", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, true)
+], XColorPickerProperty.prototype, "bordered", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { placement: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }] } });
+/**
+ * ColorPicker-Portal
+ * @selector x-color-picker-portal
+ * @decorator component
+ */
+const XColorPickerPortalPrefix = 'x-color-picker-portal';
+
+class XColorPickerPortalComponent {
+    constructor(elementRef, renderer, doc, ngZone, cdr, decimal, percent) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.doc = doc;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+        this.decimal = decimal;
+        this.percent = percent;
+        this.sliderColorNum = 0;
+        this.offset = 0;
+        this.transform = { x: 0, y: 0 };
+        this.initTransform = { x: 0, y: 0 };
+        this.drag = false;
+        this.rgba = { a: 1 };
+        this.hsla = { h: 0, a: 1 };
+        this._unSubject = new Subject();
+    }
+    done(event) {
+        this.animating(false);
+        event.toState === 'void' && this.destroyPortal();
+    }
+    start() {
+        this.animating(true);
+    }
+    ngOnInit() {
+        this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            this.value = x;
+            this.init();
+            this.cdr.detectChanges();
+        });
+        this.positionChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+            this.placement = x;
+            this.cdr.detectChanges();
+        });
+        this.init();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+    }
+    ngAfterViewInit() {
+        this.panel = this.panelRef.nativeElement.getBoundingClientRect();
+        this.plate = this.plateRef.nativeElement.getBoundingClientRect();
+        this.offset = (this.panel.width - this.plate.width) / 2;
+        this.transparentRail = this.transparentCom.elementRef.nativeElement.querySelector('.x-slider-select-rail div');
+        this.setTransform();
+        this.setPlateBackground();
+        this.setRailBackground();
+        this.cdr.detectChanges();
+    }
+    hexChange() {
+        if (this.drag || !/(^#[0-9A-F]{6}$)/i.test(this.hex))
+            return;
+        this.rgba = this.hexToRgba(this.hex);
+        this.hsla = this.rgbaToHsla(this.rgba);
+        this.setHslaPercent();
+        this.setTransform();
+        this.setPlateBackground();
+        this.setValue();
+    }
+    rgbaChange() { }
+    init() {
+        if (!XIsEmpty(this.value)) {
+            this.value = this.value;
+        }
+        else {
+            this.value = this.getPrimary();
+        }
+        this.colorConvert();
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    setDefault() { }
+    colorConvert() {
+        if (/^#/.test(this.value)) {
+            this.hex = this.value;
+            this.rgba = this.hexToRgba(this.hex);
+            this.hsla = this.rgbaToHsla(this.rgba);
+            this.setHslaPercent();
+            this.type = 'hex';
+        }
+        else if (/rgb/.test(this.value)) {
+            this.rgbaConvert(this.value);
+            this.hex = this.rgbaToHex(this.rgba);
+            this.hsla = this.rgbaToHsla(this.rgba);
+            this.setHslaPercent();
+            this.type = 'rgba';
+        }
+        else if (/hsl/.test(this.value)) {
+            this.hslaConvert(this.value);
+            this.rgba = this.hslaToRgba(this.hsla);
+            this.hex = this.rgbaToHex(this.rgba);
+            this.type = 'hsla';
+        }
+    }
+    rgbaConvert(str) {
+        let rgba = str
+            .replace(/rgba?\(/, '')
+            .replace(/rgb?\(/, '')
+            .replace(/\)/, '')
+            .replace(/[\s+]/g, '')
+            .split(',');
+        if (rgba.length > 2) {
+            this.rgba = {
+                r: Number(rgba[0]),
+                g: Number(rgba[1]),
+                b: Number(rgba[2]),
+                a: Number(rgba.length > 3 ? rgba[3] : 1)
+            };
+        }
+    }
+    hslaConvert(str) {
+        let hsla = str
+            .replace(/hsla?\(/, '')
+            .replace(/hsl?\(/, '')
+            .replace(/\)/, '')
+            .replace(/[\s+]/g, '')
+            .split(',');
+        if (hsla.length > 2) {
+            this.hsla = {
+                h: Number(hsla[0]),
+                s: Number(hsla[1].replace('%', '')) / 100,
+                l: Number(hsla[2].replace('%', '')) / 100,
+                a: Number(hsla.length > 3 ? hsla[3] : 1)
+            };
+            this.setHslaPercent();
+        }
+    }
+    plateClick(event) {
+        if (this.drag)
+            return;
+        const rect = this.plateRef.nativeElement.getBoundingClientRect();
+        let left = event.clientX - rect.left;
+        let top = event.clientY - rect.top;
+        this.transform = { x: left - this.offset, y: top - this.offset };
+        this.initTransform = { x: this.transform.x, y: this.transform.y };
+        this.setLetfTop(left, top);
+    }
+    setTransform() {
+        let hsv = this.hslToHsv(this.hsla.h, this.hsla.s, this.hsla.l);
+        this.transform.x = hsv.s * this.plate.width - this.offset;
+        this.transform.y = (1 - hsv.v) * this.plate.height - this.offset;
+        this.initTransform = { x: this.transform.x, y: this.transform.y };
+    }
+    started() {
+        this.drag = true;
+    }
+    ended() {
+        this.initTransform = { x: this.transform.x, y: this.transform.y };
+        setTimeout(() => {
+            this.drag = false;
+        });
+    }
+    moved(drag) {
+        const transform = drag.source.getFreeDragPosition();
+        drag.source.reset();
+        this.transform = { x: transform.x + this.initTransform.x, y: transform.y + this.initTransform.y };
+        let left = this.transform.x + this.offset;
+        let top = this.transform.y + this.offset;
+        this.setLetfTop(left, top);
+    }
+    setLetfTop(left, top) {
+        let s = left / this.plate.width;
+        let v = 1 - top / this.plate.height;
+        let l = ((2 - s) * v) / 2;
+        if (l !== 0) {
+            if (l === 1) {
+                s = 0;
+            }
+            else if (l < 0.5) {
+                s = (s * v) / (l * 2);
+            }
+            else {
+                s = (s * v) / (2 - l * 2);
+            }
+        }
+        [this.hsla.s, this.hsla.l] = [Number(this.decimal.transform(s, '1.2-2')), Number(this.decimal.transform(l, '1.2-2'))];
+        this.setHslaPercent();
+        Object.assign(this.rgba, this.hslaToRgba(this.hsla));
+        this.hex = this.rgbaToHex(this.rgba);
+        this.setValue();
+    }
+    setHslaPercent() {
+        this.hsla.sp = this.hsla.s === 0 ? '0%' : this.percent.transform(this.hsla.s, '1.0-0');
+        this.hsla.lp = this.hsla.l === 0 ? '0%' : this.percent.transform(this.hsla.l, '1.0-0');
+    }
+    getPrimary() {
+        return getComputedStyle(this.doc.documentElement).getPropertyValue('--x-primary').trim();
+    }
+    hueChange() {
+        this.setPlateBackground();
+        Object.assign(this.rgba, this.hslaToRgba(this.hsla));
+        this.hex = this.rgbaToHex(this.rgba);
+        this.setValue();
+    }
+    setPlateBackground() {
+        this.renderer.setStyle(this.plateRef.nativeElement, 'background-color', `hsl(${this.hsla.h}, 100%, 50%)`);
+    }
+    setRailBackground() {
+        this.renderer.setStyle(this.transparentRail, 'background', `linear-gradient(to right, rgba(${this.rgba.r}, ${this.rgba.g}, ${this.rgba.b}, 0) 0%, rgba(${this.rgba.r}, ${this.rgba.g}, ${this.rgba.b}, 1) 100%)`);
+    }
+    transparentChange() {
+        Object.assign(this.rgba, this.hslaToRgba(this.hsla));
+        this.hex = this.rgbaToHex(this.rgba);
+        this.setValue();
+    }
+    setValue() {
+        this.setValueByType();
+        this.setRailBackground();
+        this.nodeEmit(this.value);
+        this.cdr.detectChanges();
+    }
+    setValueByType() {
+        if (this.type === 'hex') {
+            this.value = `${this.hex}`;
+        }
+        else if (this.type === 'rgba') {
+            this.value = `rgba(${this.rgba.r}, ${this.rgba.g}, ${this.rgba.b}, ${this.rgba.a})`;
+        }
+        else if (this.type === 'hsla') {
+            this.value = `hsla(${this.hsla.h}, ${this.hsla.sp}, ${this.hsla.lp}, ${this.hsla.a})`;
+        }
+    }
+    hslaToRgba(hsla) {
+        let r, g, b;
+        let [h, s, l] = [hsla.h, hsla.s, hsla.l];
+        if (s == 0) {
+            r = g = b = l;
+        }
+        else {
+            let hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            let p = 2 * l - q;
+            r = hue2rgb(p, q, h / 360 + 1 / 3);
+            g = hue2rgb(p, q, h / 360);
+            b = hue2rgb(p, q, h / 360 - 1 / 3);
+        }
+        return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: Number(hsla.a) };
+    }
+    rgbaToHex(rgba) {
+        let hex = [
+            rgba.r.toString(16),
+            rgba.g.toString(16),
+            rgba.b.toString(16),
+            Math.round(255 * rgba.a).toString(16)
+        ];
+        hex.forEach((x, index) => {
+            if (index === 3 && x === 'ff') {
+                hex[index] = '';
+            }
+            if (x.length === 1) {
+                hex[index] = '0' + x;
+            }
+        });
+        return `#${hex.join('')}`;
+    }
+    rgbaToHsla(rgba) {
+        let [r, g, b] = [rgba.r / 255, rgba.g / 255, rgba.b / 255];
+        let [max, min] = [Math.max(r, g, b), Math.min(r, g, b)];
+        let h = 0;
+        let s = 0;
+        let l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0;
+        }
+        else {
+            let d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Number(this.decimal.transform(s, '1.2-2')),
+            l: Number(this.decimal.transform(l, '1.2-2')),
+            a: Number(rgba.a)
+        };
+    }
+    hexToRgba(hex) {
+        let hexNum = hex.substring(1);
+        let a = 1;
+        if (hexNum.length === 8) {
+            a = Number(this.decimal.transform(Number('0x' + hexNum.slice(-2)) / 255, '1.2-2'));
+            hexNum = hexNum.substring(0, hexNum.length - 2);
+        }
+        let num = Number('0x' + (hexNum.length < 6 ? this.repeatLetter(hexNum, 2) : hexNum));
+        return { r: num >> 16, g: (num >> 8) & 0xff, b: num & 0xff, a: a };
+    }
+    hslToHsv(h, s, l) {
+        let hHsv, sHsv, v;
+        hHsv = h;
+        if (l == 0) {
+            sHsv = 0;
+            v = 0;
+        }
+        else if (l > 0 && l <= 0.5) {
+            sHsv = (2 * s) / (1 + s);
+            v = l * (1 + s);
+        }
+        else {
+            sHsv = (2 * s - 2 * s * l) / (s - s * l + l);
+            v = s - s * l + l;
+        }
+        return {
+            h: hHsv,
+            s: Number(this.decimal.transform(sHsv, '1.2-2')),
+            v: Number(this.decimal.transform(v, '1.2-2'))
+        };
+    }
+    repeatWord(word, num) {
+        let result = '';
+        for (let i = 0; i < num; i++) {
+            result += word;
+        }
+        return result;
+    }
+    repeatLetter(word, num) {
+        let result = '';
+        for (let letter of word) {
+            result += this.repeatWord(letter, num);
+        }
+        return result;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XColorPickerPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerPortalComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.DecimalPipe }, { token: i1.PercentPipe }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XColorPickerPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XColorPickerPortalComponent, selector: "x-color-picker-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, providers: [DecimalPipe, PercentPipe], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true, static: true }, { propertyName: "plateRef", first: true, predicate: ["plateRef"], descendants: true, static: true }, { propertyName: "transparentCom", first: true, predicate: ["transparentCom"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"x-color-picker-portal\" tabindex=\"-1\" (click)=\"stopPropagation($event)\">\r\n  <div #panelRef class=\"x-color-picker-portal-panel\">\r\n    <div #plateRef class=\"x-color-picker-portal-plate\" (click)=\"plateClick($event)\">\r\n      <div class=\"x-color-picker-portal-white\"></div>\r\n      <div class=\"x-color-picker-portal-black\"></div>\r\n      <div\r\n        #dragCom\r\n        class=\"x-color-picker-portal-cursor\"\r\n        [style.left.px]=\"transform.x\"\r\n        [style.top.px]=\"transform.y\"\r\n        cdkDrag\r\n        [cdkDragBoundary]=\"panelRef\"\r\n        (cdkDragStarted)=\"started()\"\r\n        (cdkDragEnded)=\"ended()\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-color-picker-portal-tool\">\r\n    <div class=\"x-color-picker-portal-operations\">\r\n      <!-- <x-button icon=\"fto-edit-2\" onlyIcon></x-button> -->\r\n      <div class=\"x-color-picker-portal-selected\">\r\n        <div [style.background-color]=\"value\"></div>\r\n      </div>\r\n      <div class=\"x-color-picker-portal-area\">\r\n        <div class=\"x-color-picker-portal-slider\">\r\n          <x-slider-select\r\n            [(ngModel)]=\"hsla.h\"\r\n            min=\"0\"\r\n            max=\"360\"\r\n            step=\"1\"\r\n            (dragStartEmit)=\"started()\"\r\n            (dragEndEmit)=\"ended()\"\r\n            (ngModelChange)=\"hueChange()\"\r\n          ></x-slider-select>\r\n        </div>\r\n        <div class=\"x-color-picker-portal-transparent\">\r\n          <x-slider-select\r\n            #transparentCom\r\n            [(ngModel)]=\"hsla.a\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.01\"\r\n            (dragStarted)=\"started()\"\r\n            (dragEnded)=\"ended()\"\r\n            (ngModelChange)=\"transparentChange()\"\r\n          ></x-slider-select>\r\n          <div class=\"x-color-picker-portal-alpha\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-color-picker-portal-type\">\r\n      <x-tabs animated=\"false\" justify=\"center\">\r\n        <x-tab label=\"HEX\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hex\" (ngModelChange)=\"hexChange()\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"RGBA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"rgba.r\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.g\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.b\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.a\" [disabled]=\"true\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"HSLA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hsla.h\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.sp\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.lp\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.a\" [disabled]=\"true\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n      </x-tabs>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-color-picker-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);background-color:var(--x-background);width:15rem;overflow:hidden}.x-color-picker-portal:focus{outline:none}.x-color-picker-portal-panel{padding:.375rem;margin:-.375rem}.x-color-picker-portal-plate{width:100%;height:8rem;display:flex;border-radius:var(--x-border-radius);position:relative}.x-color-picker-portal-white,.x-color-picker-portal-black{position:absolute;top:0;left:0;right:0;bottom:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.x-color-picker-portal-black{background:linear-gradient(0deg,#000,transparent)}.x-color-picker-portal-cursor{position:absolute;width:.75rem;height:.75rem;display:inline-block;border-radius:50%;border:.0625rem solid var(--x-background-100)}.x-color-picker-portal-tool{padding:.4rem}.x-color-picker-portal-operations{display:flex;align-items:center;padding:.4rem 0}.x-color-picker-portal-selected{margin-left:.4rem;width:2rem;height:2rem;border-radius:2rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-selected>div{width:2rem;height:2rem;border-radius:2rem}.x-color-picker-portal-area{margin-left:.4rem;position:relative;flex:1}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{height:.75rem}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-track>.x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-drags>.x-slider-select-drag>.x-slider-select-button{border-color:var(--x-border);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-color-picker-portal-slider{position:relative;width:100%}.x-color-picker-portal-slider .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.x-color-picker-portal-transparent{margin-top:.4rem;position:relative;width:100%}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail:after{content:\"\";height:100%;display:block}.x-color-picker-portal-type{height:5rem}.x-color-picker-portal-type .x-tabs .x-tabs-list{display:flex;justify-content:center}.x-color-picker-portal-type-content{padding:.8rem .4rem;display:flex}.x-color-picker-portal-type-content .x-input .x-input-row input{text-align:center}\n"], components: [{ type: i2.XSliderSelectComponent, selector: "x-slider-select" }, { type: i3.XTabsComponent, selector: "x-tabs" }, { type: i3.XTabComponent, selector: "x-tab" }, { type: i4.XInputComponent, selector: "x-input" }], directives: [{ type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerPortalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XColorPickerPortalPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DecimalPipe, PercentPipe], animations: [XConnectBaseAnimation], template: "<div class=\"x-color-picker-portal\" tabindex=\"-1\" (click)=\"stopPropagation($event)\">\r\n  <div #panelRef class=\"x-color-picker-portal-panel\">\r\n    <div #plateRef class=\"x-color-picker-portal-plate\" (click)=\"plateClick($event)\">\r\n      <div class=\"x-color-picker-portal-white\"></div>\r\n      <div class=\"x-color-picker-portal-black\"></div>\r\n      <div\r\n        #dragCom\r\n        class=\"x-color-picker-portal-cursor\"\r\n        [style.left.px]=\"transform.x\"\r\n        [style.top.px]=\"transform.y\"\r\n        cdkDrag\r\n        [cdkDragBoundary]=\"panelRef\"\r\n        (cdkDragStarted)=\"started()\"\r\n        (cdkDragEnded)=\"ended()\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-color-picker-portal-tool\">\r\n    <div class=\"x-color-picker-portal-operations\">\r\n      <!-- <x-button icon=\"fto-edit-2\" onlyIcon></x-button> -->\r\n      <div class=\"x-color-picker-portal-selected\">\r\n        <div [style.background-color]=\"value\"></div>\r\n      </div>\r\n      <div class=\"x-color-picker-portal-area\">\r\n        <div class=\"x-color-picker-portal-slider\">\r\n          <x-slider-select\r\n            [(ngModel)]=\"hsla.h\"\r\n            min=\"0\"\r\n            max=\"360\"\r\n            step=\"1\"\r\n            (dragStartEmit)=\"started()\"\r\n            (dragEndEmit)=\"ended()\"\r\n            (ngModelChange)=\"hueChange()\"\r\n          ></x-slider-select>\r\n        </div>\r\n        <div class=\"x-color-picker-portal-transparent\">\r\n          <x-slider-select\r\n            #transparentCom\r\n            [(ngModel)]=\"hsla.a\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.01\"\r\n            (dragStarted)=\"started()\"\r\n            (dragEnded)=\"ended()\"\r\n            (ngModelChange)=\"transparentChange()\"\r\n          ></x-slider-select>\r\n          <div class=\"x-color-picker-portal-alpha\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-color-picker-portal-type\">\r\n      <x-tabs animated=\"false\" justify=\"center\">\r\n        <x-tab label=\"HEX\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hex\" (ngModelChange)=\"hexChange()\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"RGBA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"rgba.r\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.g\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.b\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"rgba.a\" [disabled]=\"true\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"HSLA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hsla.h\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.sp\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.lp\" [disabled]=\"true\"></x-input>\r\n            <x-input [(ngModel)]=\"hsla.a\" [disabled]=\"true\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n      </x-tabs>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-color-picker-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);background-color:var(--x-background);width:15rem;overflow:hidden}.x-color-picker-portal:focus{outline:none}.x-color-picker-portal-panel{padding:.375rem;margin:-.375rem}.x-color-picker-portal-plate{width:100%;height:8rem;display:flex;border-radius:var(--x-border-radius);position:relative}.x-color-picker-portal-white,.x-color-picker-portal-black{position:absolute;top:0;left:0;right:0;bottom:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.x-color-picker-portal-black{background:linear-gradient(0deg,#000,transparent)}.x-color-picker-portal-cursor{position:absolute;width:.75rem;height:.75rem;display:inline-block;border-radius:50%;border:.0625rem solid var(--x-background-100)}.x-color-picker-portal-tool{padding:.4rem}.x-color-picker-portal-operations{display:flex;align-items:center;padding:.4rem 0}.x-color-picker-portal-selected{margin-left:.4rem;width:2rem;height:2rem;border-radius:2rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-selected>div{width:2rem;height:2rem;border-radius:2rem}.x-color-picker-portal-area{margin-left:.4rem;position:relative;flex:1}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{height:.75rem}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-track>.x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-drags>.x-slider-select-drag>.x-slider-select-button{border-color:var(--x-border);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-color-picker-portal-slider{position:relative;width:100%}.x-color-picker-portal-slider .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.x-color-picker-portal-transparent{margin-top:.4rem;position:relative;width:100%}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail:after{content:\"\";height:100%;display:block}.x-color-picker-portal-type{height:5rem}.x-color-picker-portal-type .x-tabs .x-tabs-list{display:flex;justify-content:center}.x-color-picker-portal-type-content{padding:.8rem .4rem;display:flex}.x-color-picker-portal-type-content .x-input .x-input-row input{text-align:center}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: i1.PercentPipe }];
+    }, propDecorators: { placement: [{
+                type: HostBinding,
+                args: ['@x-connect-base-animation']
+            }], done: [{
+                type: HostListener,
+                args: ['@x-connect-base-animation.done', ['$event']]
+            }], start: [{
+                type: HostListener,
+                args: ['@x-connect-base-animation.start', ['$event']]
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panelRef', { static: true }]
+            }], plateRef: [{
+                type: ViewChild,
+                args: ['plateRef', { static: true }]
+            }], transparentCom: [{
+                type: ViewChild,
+                args: ['transparentCom', { static: true }]
+            }] } });
+
+class XColorPickerComponent extends XColorPickerProperty {
+    constructor(renderer, cdr, portalService, viewContainerRef, overlay) {
+        super();
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.portalService = portalService;
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.readonly = true;
+        this.clearable = false;
+        this.enter = false;
+        this.animating = false;
+        this.displayValue = '';
+        this.valueStyle = {};
+        this.icon = 'fto-chevron-down';
+        this.maxNodes = 6;
+        this.protalTobottom = true;
+        this.valueChange = new Subject();
+        this.dataChange = new Subject();
+        this.positionChange = new Subject();
+        this.closeSubject = new Subject();
+        this._unSubject = new Subject();
+    }
+    writeValue(value) {
+        this.value = value;
+        this.displayValue = value;
+        this.valueChange.next(this.value);
+        this.cdr.detectChanges();
+    }
+    get inputStyle() {
+        return {
+            backgroundColor: this.value,
+            color: 'transparent'
+        };
+    }
+    ngOnInit() {
+        this.setFlex(this.colorPicker.nativeElement, this.renderer, this.justify, this.align, this.direction);
+        this.setClassMap();
+        this.setSubject();
+    }
+    ngAfterViewInit() {
+        this.setPortal();
+        // this.setValueStyle();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+    }
+    setSubject() {
+        this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
+            this.closePortal();
+        });
+    }
+    setValueStyle() {
+        this.valueStyle = {
+            width: `${this.inputCom.inputRef.nativeElement.clientWidth}px`,
+            height: `${this.inputCom.inputRef.nativeElement.clientHeight}px`
+        };
+        if (this.direction === 'column') {
+            this.valueStyle['bottom'] = 0;
+        }
+        if (this.direction === 'row') {
+            this.valueStyle['bottom'] = 0;
+        }
+    }
+    menter() {
+        if (this.disabled)
+            return;
+        this.enter = true;
+        if (!XIsEmpty(this.value)) {
+            this.icon = '';
+            this.clearable = true;
+            this.cdr.detectChanges();
+        }
+    }
+    mleave() {
+        if (this.disabled)
+            return;
+        this.enter = false;
+        if (this.clearable) {
+            this.icon = 'fto-chevron-down';
+            this.clearable = false;
+            this.cdr.detectChanges();
+        }
+    }
+    clearEmit() {
+        this.value = '';
+        this.displayValue = '';
+        this.mleave();
+        this.valueChange.next(this.value);
+        if (this.onChange)
+            this.onChange(this.value);
+    }
+    portalAttached() {
+        var _a, _b;
+        return (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.hasAttached();
+    }
+    closePortal() {
+        var _a, _b;
+        if (this.portalAttached()) {
+            (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+            this.active = false;
+            this.cdr.detectChanges();
+            return true;
+        }
+        return false;
+    }
+    destroyPortal() {
+        var _a, _b;
+        (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+    }
+    showPortal() {
+        var _a;
+        if (this.disabled || this.animating)
+            return;
+        this.active = true;
+        const config = {
+            backdropClass: '',
+            positionStrategy: this.setPlacement(),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        };
+        this.setPosition(config);
+        this.portal = this.portalService.attach({
+            content: XColorPickerPortalComponent,
+            viewContainerRef: this.viewContainerRef,
+            overlayConfig: config
+        });
+        (_a = this.portal.overlayRef) === null || _a === void 0 ? void 0 : _a.outsidePointerEvents().pipe(takeUntil(this._unSubject)).subscribe(() => {
+            this.closeSubject.next();
+        });
+        this.setInstance();
+    }
+    setPosition(config) {
+        let position = config.positionStrategy;
+        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+            const place = XPortalConnectedPosition.get(pos.connectionPair);
+            place !== this.placement && this.positionChange.next(place);
+        });
+    }
+    setInstance() {
+        var _a;
+        let componentRef = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.componentRef;
+        if (!componentRef)
+            return;
+        Object.assign(componentRef.instance, {
+            value: this.value,
+            placement: this.placement,
+            valueChange: this.valueChange,
+            positionChange: this.positionChange,
+            inputCom: this.inputCom,
+            closePortal: () => this.closeSubject.next(),
+            destroyPortal: () => this.destroyPortal(),
+            nodeEmit: (color) => this.onNodeClick(color),
+            animating: (ing) => (this.animating = ing)
+        });
+        componentRef.changeDetectorRef.detectChanges();
+    }
+    onNodeClick(color) {
+        this.value = color;
+        this.displayValue = color;
+        this.inputCom.inputFocus();
+        if (this.onChange)
+            this.onChange(this.value);
+        this.cdr.detectChanges();
+    }
+    setPlacement() {
+        return this.portalService.setPlacement({
+            elementRef: this.inputCom.inputRef,
+            placement: [this.placement, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
+            transformOriginOn: 'x-color-picker-portal'
+        });
+    }
+    setPortal() {
+        var _a, _b;
+        this.portalAttached() && ((_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePositionStrategy(this.setPlacement()));
+    }
+    setClassMap() {
+        XClearClass(this.labelMap);
+        this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
+    }
+    formControlChanges() {
+        this.ngOnInit();
+        this.cdr.detectChanges();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XColorPickerComponent, selector: "x-color-picker", providers: [XValueAccessor(XColorPickerComponent)], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, static: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [inputStyle]=\"inputStyle\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block}.x-color-picker{margin:0;padding:0;width:100%}.x-color-picker x-input{width:100%}\n"], components: [{ type: i4.XInputComponent, selector: "x-input" }], directives: [{ type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XColorPickerComponent)], template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [inputStyle]=\"inputStyle\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block}.x-color-picker{margin:0;padding:0;width:100%}.x-color-picker x-input{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { colorPicker: [{
+                type: ViewChild,
+                args: ['colorPicker', { static: true }]
+            }], inputCom: [{
+                type: ViewChild,
+                args: ['inputCom', { static: true }]
+            }] } });
+
+class XColorPickerModule {
+}
+/** @nocollapse */ /** @nocollapse */ XColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerModule, declarations: [XColorPickerComponent, XColorPickerPortalComponent, XColorPickerProperty], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        DragDropModule,
+        XPortalModule,
+        XSliderSelectModule,
+        XTabsModule,
+        XInputModule,
+        XBaseFormModule], exports: [XColorPickerComponent, XColorPickerPortalComponent] });
+/** @nocollapse */ /** @nocollapse */ XColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DragDropModule,
+            XPortalModule,
+            XSliderSelectModule,
+            XTabsModule,
+            XInputModule,
+            XBaseFormModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XColorPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XColorPickerComponent, XColorPickerPortalComponent, XColorPickerProperty],
+                    exports: [XColorPickerComponent, XColorPickerPortalComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DragDropModule,
+                        XPortalModule,
+                        XSliderSelectModule,
+                        XTabsModule,
+                        XInputModule,
+                        XBaseFormModule
+                    ],
+                    entryComponents: [XColorPickerPortalComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XColorPickerComponent, XColorPickerModule, XColorPickerPortalComponent, XColorPickerPortalPrefix, XColorPickerPrefix, XColorPickerProperty };
+//# sourceMappingURL=ng-nest-ui-color-picker.mjs.map