@ng-nest/ui 15.0.19 → 16.0.0

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

@@ -1,687 +0,0 @@
-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, XComputed, 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 i3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$1 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i4 from '@ng-nest/ui/slider-select';
-import { XSliderSelectModule } from '@ng-nest/ui/slider-select';
-import * as i5 from '@ng-nest/ui/tabs';
-import { XTabsModule } from '@ng-nest/ui/tabs';
-import * as i6 from '@ng-nest/ui/input';
-import { XInputModule } from '@ng-nest/ui/input';
-import * as i1$1 from '@ng-nest/ui/portal';
-import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
-import * as i2 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 */ XColorPickerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XColorPickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XColorPickerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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: "15.2.7", 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 XComputed(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 */ XColorPickerPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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 */ XColorPickerPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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            [style.width.%]=\"100\"\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            [style.width.%]=\"100\"\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 [style.width.%]=\"100\" [(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;inset:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,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:hover:not(.x-disabled) .x-slider-select-track{background-color:transparent}.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"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4.XSliderSelectComponent, selector: "x-slider-select" }, { kind: "component", type: i5.XTabsComponent, selector: "x-tabs" }, { kind: "component", type: i5.XTabComponent, selector: "x-tab" }, { kind: "component", type: i6.XInputComponent, selector: "x-input" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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            [style.width.%]=\"100\"\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            [style.width.%]=\"100\"\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 [style.width.%]=\"100\" [(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;inset:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,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:hover:not(.x-disabled) .x-slider-select-track{background-color:transparent}.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.formControlValidator();
-        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 */ XColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XColorPickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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      [validator]=\"validator\"\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;width:12rem}.x-color-picker{margin:0;padding:0;width:100%}.x-color-picker x-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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      [validator]=\"validator\"\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;width:12rem}.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.Overlay }]; }, propDecorators: { colorPicker: [{
-                type: ViewChild,
-                args: ['colorPicker', { static: true }]
-            }], inputCom: [{
-                type: ViewChild,
-                args: ['inputCom', { static: true }]
-            }] } });
-
-class XColorPickerModule {
-}
-/** @nocollapse */ XColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: XColorPickerModule, declarations: [XColorPickerComponent, XColorPickerPortalComponent, XColorPickerProperty], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        DragDropModule,
-        XPortalModule,
-        XSliderSelectModule,
-        XTabsModule,
-        XInputModule,
-        XBaseFormModule], exports: [XColorPickerComponent, XColorPickerPortalComponent] });
-/** @nocollapse */ XColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XColorPickerModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        DragDropModule,
-        XPortalModule,
-        XSliderSelectModule,
-        XTabsModule,
-        XInputModule,
-        XBaseFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { XColorPickerComponent, XColorPickerModule, XColorPickerPortalComponent, XColorPickerPortalPrefix, XColorPickerPrefix, XColorPickerProperty };
-//# sourceMappingURL=ng-nest-ui-color-picker.mjs.map