@ng-nest/ui 12.0.11 → 13.0.3

package/bundles/ng-nest-ui-color-picker.umd.js

@@ -1,1076 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/base-form'), require('rxjs'), require('@angular/common'), require('rxjs/operators'), require('@ng-nest/ui/slider-select'), require('@ng-nest/ui/tabs'), require('@ng-nest/ui/input'), require('@angular/cdk/drag-drop'), require('@angular/forms'), require('@ng-nest/ui/portal'), require('@angular/cdk/overlay')) :
-    typeof define === 'function' && define.amd ? define('@ng-nest/ui/color-picker', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/base-form', 'rxjs', '@angular/common', 'rxjs/operators', '@ng-nest/ui/slider-select', '@ng-nest/ui/tabs', '@ng-nest/ui/input', '@angular/cdk/drag-drop', '@angular/forms', '@ng-nest/ui/portal', '@angular/cdk/overlay'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui["color-picker"] = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui["base-form"], global.rxjs, global.ng.common, global.rxjs.operators, global["ng-nest"].ui["slider-select"], global["ng-nest"].ui.tabs, global["ng-nest"].ui.input, global.ng.cdk.dragDrop, global.ng.forms, global["ng-nest"].ui.portal, global.ng.cdk.overlay));
-})(this, (function (exports, i0, core, baseForm, rxjs, i1, operators, i2, i3, i4, i5, i4$1, i1$1, i2$1) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    /**
-     * ColorPicker
-     * @selector x-color-picker
-     * @decorator component
-     */
-    var XColorPickerPrefix = 'x-color-picker';
-    var X_CONFIG_NAME = 'colorPicker';
-    /**
-     * ColorPicker Property
-     */
-    var XColorPickerProperty = /** @class */ (function (_super) {
-        __extends(XColorPickerProperty, _super);
-        function XColorPickerProperty() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return XColorPickerProperty;
-    }(baseForm.XControlValueAccessor));
-    /** @nocollapse */ XColorPickerProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XColorPickerProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XColorPickerProperty, selector: "ng-component", inputs: { placement: "placement", size: "size", bordered: "bordered" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    __decorate([
-        core.XWithConfig(X_CONFIG_NAME, 'bottom-start')
-    ], XColorPickerProperty.prototype, "placement", void 0);
-    __decorate([
-        core.XWithConfig(X_CONFIG_NAME, 'medium')
-    ], XColorPickerProperty.prototype, "size", void 0);
-    __decorate([
-        core.XInputBoolean(),
-        core.XWithConfig(X_CONFIG_NAME, true)
-    ], XColorPickerProperty.prototype, "bordered", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerProperty, decorators: [{
-                type: i0.Component,
-                args: [{ template: '' }]
-            }], propDecorators: { placement: [{
-                    type: i0.Input
-                }], size: [{
-                    type: i0.Input
-                }], bordered: [{
-                    type: i0.Input
-                }] } });
-    /**
-     * ColorPicker-Portal
-     * @selector x-color-picker-portal
-     * @decorator component
-     */
-    var XColorPickerPortalPrefix = 'x-color-picker-portal';
-
-    var XColorPickerPortalComponent = /** @class */ (function () {
-        function XColorPickerPortalComponent(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 rxjs.Subject();
-        }
-        XColorPickerPortalComponent.prototype.done = function (event) {
-            this.animating(false);
-            event.toState === 'void' && this.destroyPortal();
-        };
-        XColorPickerPortalComponent.prototype.start = function () {
-            this.animating(true);
-        };
-        XColorPickerPortalComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.valueChange.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
-                _this.value = x;
-                _this.init();
-                _this.cdr.detectChanges();
-            });
-            this.positionChange.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
-                _this.placement = x;
-                _this.cdr.detectChanges();
-            });
-            this.init();
-        };
-        XColorPickerPortalComponent.prototype.ngOnDestroy = function () {
-            this._unSubject.next();
-            this._unSubject.unsubscribe();
-        };
-        XColorPickerPortalComponent.prototype.ngAfterViewInit = function () {
-            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();
-        };
-        XColorPickerPortalComponent.prototype.hexChange = function () {
-            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();
-        };
-        XColorPickerPortalComponent.prototype.rgbaChange = function () { };
-        XColorPickerPortalComponent.prototype.init = function () {
-            if (!core.XIsEmpty(this.value)) {
-                this.value = this.value;
-            }
-            else {
-                this.value = this.getPrimary();
-            }
-            this.colorConvert();
-        };
-        XColorPickerPortalComponent.prototype.stopPropagation = function (event) {
-            event.stopPropagation();
-        };
-        XColorPickerPortalComponent.prototype.setDefault = function () { };
-        XColorPickerPortalComponent.prototype.colorConvert = function () {
-            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';
-            }
-        };
-        XColorPickerPortalComponent.prototype.rgbaConvert = function (str) {
-            var 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)
-                };
-            }
-        };
-        XColorPickerPortalComponent.prototype.hslaConvert = function (str) {
-            var 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();
-            }
-        };
-        XColorPickerPortalComponent.prototype.plateClick = function (event) {
-            if (this.drag)
-                return;
-            var rect = this.plateRef.nativeElement.getBoundingClientRect();
-            var left = event.clientX - rect.left;
-            var 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);
-        };
-        XColorPickerPortalComponent.prototype.setTransform = function () {
-            var 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 };
-        };
-        XColorPickerPortalComponent.prototype.started = function () {
-            this.drag = true;
-        };
-        XColorPickerPortalComponent.prototype.ended = function () {
-            var _this = this;
-            this.initTransform = { x: this.transform.x, y: this.transform.y };
-            setTimeout(function () {
-                _this.drag = false;
-            });
-        };
-        XColorPickerPortalComponent.prototype.moved = function (drag) {
-            var transform = drag.source.getFreeDragPosition();
-            drag.source.reset();
-            this.transform = { x: transform.x + this.initTransform.x, y: transform.y + this.initTransform.y };
-            var left = this.transform.x + this.offset;
-            var top = this.transform.y + this.offset;
-            this.setLetfTop(left, top);
-        };
-        XColorPickerPortalComponent.prototype.setLetfTop = function (left, top) {
-            var _a;
-            var s = left / this.plate.width;
-            var v = 1 - top / this.plate.height;
-            var 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);
-                }
-            }
-            _a = __read([Number(this.decimal.transform(s, '1.2-2')), Number(this.decimal.transform(l, '1.2-2'))], 2), this.hsla.s = _a[0], this.hsla.l = _a[1];
-            this.setHslaPercent();
-            Object.assign(this.rgba, this.hslaToRgba(this.hsla));
-            this.hex = this.rgbaToHex(this.rgba);
-            this.setValue();
-        };
-        XColorPickerPortalComponent.prototype.setHslaPercent = function () {
-            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');
-        };
-        XColorPickerPortalComponent.prototype.getPrimary = function () {
-            return getComputedStyle(this.doc.documentElement).getPropertyValue('--x-primary').trim();
-        };
-        XColorPickerPortalComponent.prototype.hueChange = function () {
-            this.setPlateBackground();
-            Object.assign(this.rgba, this.hslaToRgba(this.hsla));
-            this.hex = this.rgbaToHex(this.rgba);
-            this.setValue();
-        };
-        XColorPickerPortalComponent.prototype.setPlateBackground = function () {
-            this.renderer.setStyle(this.plateRef.nativeElement, 'background-color', "hsl(" + this.hsla.h + ", 100%, 50%)");
-        };
-        XColorPickerPortalComponent.prototype.setRailBackground = function () {
-            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%)");
-        };
-        XColorPickerPortalComponent.prototype.transparentChange = function () {
-            Object.assign(this.rgba, this.hslaToRgba(this.hsla));
-            this.hex = this.rgbaToHex(this.rgba);
-            this.setValue();
-        };
-        XColorPickerPortalComponent.prototype.setValue = function () {
-            this.setValueByType();
-            this.setRailBackground();
-            this.nodeEmit(this.value);
-            this.cdr.detectChanges();
-        };
-        XColorPickerPortalComponent.prototype.setValueByType = function () {
-            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 + ")";
-            }
-        };
-        XColorPickerPortalComponent.prototype.hslaToRgba = function (hsla) {
-            var r, g, b;
-            var _a = __read([hsla.h, hsla.s, hsla.l], 3), h = _a[0], s = _a[1], l = _a[2];
-            if (s == 0) {
-                r = g = b = l;
-            }
-            else {
-                var hue2rgb = function (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;
-                };
-                var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-                var 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) };
-        };
-        XColorPickerPortalComponent.prototype.rgbaToHex = function (rgba) {
-            var hex = [
-                rgba.r.toString(16),
-                rgba.g.toString(16),
-                rgba.b.toString(16),
-                Math.round(255 * rgba.a).toString(16)
-            ];
-            hex.forEach(function (x, index) {
-                if (index === 3 && x === 'ff') {
-                    hex[index] = '';
-                }
-                if (x.length === 1) {
-                    hex[index] = '0' + x;
-                }
-            });
-            return "#" + hex.join('');
-        };
-        XColorPickerPortalComponent.prototype.rgbaToHsla = function (rgba) {
-            var _a = __read([rgba.r / 255, rgba.g / 255, rgba.b / 255], 3), r = _a[0], g = _a[1], b = _a[2];
-            var _b = __read([Math.max(r, g, b), Math.min(r, g, b)], 2), max = _b[0], min = _b[1];
-            var h = 0;
-            var s = 0;
-            var l = (max + min) / 2;
-            if (max === min) {
-                h = s = 0;
-            }
-            else {
-                var 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)
-            };
-        };
-        XColorPickerPortalComponent.prototype.hexToRgba = function (hex) {
-            var hexNum = hex.substring(1);
-            var 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);
-            }
-            var num = Number('0x' + (hexNum.length < 6 ? this.repeatLetter(hexNum, 2) : hexNum));
-            return { r: num >> 16, g: (num >> 8) & 0xff, b: num & 0xff, a: a };
-        };
-        XColorPickerPortalComponent.prototype.hslToHsv = function (h, s, l) {
-            var 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'))
-            };
-        };
-        XColorPickerPortalComponent.prototype.repeatWord = function (word, num) {
-            var result = '';
-            for (var i = 0; i < num; i++) {
-                result += word;
-            }
-            return result;
-        };
-        XColorPickerPortalComponent.prototype.repeatLetter = function (word, num) {
-            var e_1, _a;
-            var result = '';
-            try {
-                for (var word_1 = __values(word), word_1_1 = word_1.next(); !word_1_1.done; word_1_1 = word_1.next()) {
-                    var letter = word_1_1.value;
-                    result += this.repeatWord(letter, num);
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (word_1_1 && !word_1_1.done && (_a = word_1.return)) _a.call(word_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            return result;
-        };
-        return XColorPickerPortalComponent;
-    }());
-    /** @nocollapse */ XColorPickerPortalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerPortalComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i1.DOCUMENT }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.DecimalPipe }, { token: i1__namespace.PercentPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XColorPickerPortalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", 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: [i1.DecimalPipe, i1.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__namespace, 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__namespace.XSliderSelectComponent, selector: "x-slider-select" }, { type: i3__namespace.XTabsComponent, selector: "x-tabs" }, { type: i3__namespace.XTabComponent, selector: "x-tab" }, { type: i4__namespace.XInputComponent, selector: "x-input" }], directives: [{ type: i5__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [core.XConnectBaseAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerPortalComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: "" + XColorPickerPortalPrefix,
-                        templateUrl: './color-picker-portal.component.html',
-                        styleUrls: ['./color-picker-portal.component.scss'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [i1.DecimalPipe, i1.PercentPipe],
-                        animations: [core.XConnectBaseAnimation]
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.DOCUMENT]
-                        }] }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.DecimalPipe }, { type: i1__namespace.PercentPipe }];
-        }, propDecorators: { placement: [{
-                    type: i0.HostBinding,
-                    args: ['@x-connect-base-animation']
-                }], done: [{
-                    type: i0.HostListener,
-                    args: ['@x-connect-base-animation.done', ['$event']]
-                }], start: [{
-                    type: i0.HostListener,
-                    args: ['@x-connect-base-animation.start', ['$event']]
-                }], panelRef: [{
-                    type: i0.ViewChild,
-                    args: ['panelRef', { static: true }]
-                }], plateRef: [{
-                    type: i0.ViewChild,
-                    args: ['plateRef', { static: true }]
-                }], transparentCom: [{
-                    type: i0.ViewChild,
-                    args: ['transparentCom', { static: true }]
-                }] } });
-
-    var XColorPickerComponent = /** @class */ (function (_super) {
-        __extends(XColorPickerComponent, _super);
-        function XColorPickerComponent(renderer, cdr, portalService, viewContainerRef, overlay) {
-            var _this = _super.call(this) || this;
-            _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 rxjs.Subject();
-            _this.dataChange = new rxjs.Subject();
-            _this.positionChange = new rxjs.Subject();
-            _this.closeSubject = new rxjs.Subject();
-            _this._unSubject = new rxjs.Subject();
-            return _this;
-        }
-        XColorPickerComponent.prototype.writeValue = function (value) {
-            this.value = value;
-            this.displayValue = value;
-            this.valueChange.next(this.value);
-            this.cdr.detectChanges();
-        };
-        Object.defineProperty(XColorPickerComponent.prototype, "inputStyle", {
-            get: function () {
-                return {
-                    backgroundColor: this.value,
-                    color: 'transparent'
-                };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        XColorPickerComponent.prototype.ngOnInit = function () {
-            this.setFlex(this.colorPicker.nativeElement, this.renderer, this.justify, this.align, this.direction);
-            this.setClassMap();
-            this.setSubject();
-        };
-        XColorPickerComponent.prototype.ngAfterViewInit = function () {
-            this.setPortal();
-            // this.setValueStyle();
-        };
-        XColorPickerComponent.prototype.ngOnDestroy = function () {
-            this._unSubject.next();
-            this._unSubject.unsubscribe();
-        };
-        XColorPickerComponent.prototype.setSubject = function () {
-            var _this = this;
-            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function () {
-                _this.closePortal();
-            });
-        };
-        XColorPickerComponent.prototype.setValueStyle = function () {
-            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;
-            }
-        };
-        XColorPickerComponent.prototype.menter = function () {
-            if (this.disabled)
-                return;
-            this.enter = true;
-            if (!core.XIsEmpty(this.value)) {
-                this.icon = '';
-                this.clearable = true;
-                this.cdr.detectChanges();
-            }
-        };
-        XColorPickerComponent.prototype.mleave = function () {
-            if (this.disabled)
-                return;
-            this.enter = false;
-            if (this.clearable) {
-                this.icon = 'fto-chevron-down';
-                this.clearable = false;
-                this.cdr.detectChanges();
-            }
-        };
-        XColorPickerComponent.prototype.clearEmit = function () {
-            this.value = '';
-            this.displayValue = '';
-            this.mleave();
-            this.valueChange.next(this.value);
-            if (this.onChange)
-                this.onChange(this.value);
-        };
-        XColorPickerComponent.prototype.portalAttached = function () {
-            var _a, _b;
-            return (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.hasAttached();
-        };
-        XColorPickerComponent.prototype.closePortal = function () {
-            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;
-        };
-        XColorPickerComponent.prototype.destroyPortal = function () {
-            var _a, _b;
-            (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
-        };
-        XColorPickerComponent.prototype.showPortal = function () {
-            var _this = this;
-            var _a;
-            if (this.disabled || this.animating)
-                return;
-            this.active = true;
-            var 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(operators.takeUntil(this._unSubject)).subscribe(function () {
-                _this.closeSubject.next();
-            });
-            this.setInstance();
-        };
-        XColorPickerComponent.prototype.setPosition = function (config) {
-            var _this = this;
-            var position = config.positionStrategy;
-            position.positionChanges.pipe(operators.takeUntil(this._unSubject)).subscribe(function (pos) {
-                var place = i1$1.XPortalConnectedPosition.get(pos.connectionPair);
-                place !== _this.placement && _this.positionChange.next(place);
-            });
-        };
-        XColorPickerComponent.prototype.setInstance = function () {
-            var _this = this;
-            var _a;
-            var 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: function () { return _this.closeSubject.next(); },
-                destroyPortal: function () { return _this.destroyPortal(); },
-                nodeEmit: function (color) { return _this.onNodeClick(color); },
-                animating: function (ing) { return (_this.animating = ing); }
-            });
-            componentRef.changeDetectorRef.detectChanges();
-        };
-        XColorPickerComponent.prototype.onNodeClick = function (color) {
-            this.value = color;
-            this.displayValue = color;
-            this.inputCom.inputFocus();
-            if (this.onChange)
-                this.onChange(this.value);
-            this.cdr.detectChanges();
-        };
-        XColorPickerComponent.prototype.setPlacement = function () {
-            return this.portalService.setPlacement({
-                elementRef: this.inputCom.inputRef,
-                placement: [this.placement, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
-                transformOriginOn: 'x-color-picker-portal'
-            });
-        };
-        XColorPickerComponent.prototype.setPortal = function () {
-            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()));
-        };
-        XColorPickerComponent.prototype.setClassMap = function () {
-            core.XClearClass(this.labelMap);
-            this.labelMap["x-text-align-" + this.labelAlign] = this.labelAlign ? true : false;
-        };
-        XColorPickerComponent.prototype.formControlChanges = function () {
-            this.ngOnInit();
-            this.cdr.detectChanges();
-        };
-        return XColorPickerComponent;
-    }(XColorPickerProperty));
-    /** @nocollapse */ XColorPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XColorPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XColorPickerComponent, selector: "x-color-picker", providers: [baseForm.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__namespace, 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__namespace.XInputComponent, selector: "x-input" }], directives: [{ type: i4__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'x-color-picker',
-                        templateUrl: './color-picker.component.html',
-                        styleUrls: ['./color-picker.component.scss'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [baseForm.XValueAccessor(XColorPickerComponent)]
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace$1.Overlay }]; }, propDecorators: { colorPicker: [{
-                    type: i0.ViewChild,
-                    args: ['colorPicker', { static: true }]
-                }], inputCom: [{
-                    type: i0.ViewChild,
-                    args: ['inputCom', { static: true }]
-                }] } });
-
-    var XColorPickerModule = /** @class */ (function () {
-        function XColorPickerModule() {
-        }
-        return XColorPickerModule;
-    }());
-    /** @nocollapse */ XColorPickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XColorPickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerModule, declarations: [XColorPickerComponent, XColorPickerPortalComponent, XColorPickerProperty], imports: [i1.CommonModule,
-            i4$1.FormsModule,
-            i4$1.ReactiveFormsModule,
-            i5.DragDropModule,
-            i1$1.XPortalModule,
-            i2.XSliderSelectModule,
-            i3.XTabsModule,
-            i4.XInputModule,
-            baseForm.XBaseFormModule], exports: [XColorPickerComponent, XColorPickerPortalComponent] });
-    /** @nocollapse */ XColorPickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerModule, imports: [[
-                i1.CommonModule,
-                i4$1.FormsModule,
-                i4$1.ReactiveFormsModule,
-                i5.DragDropModule,
-                i1$1.XPortalModule,
-                i2.XSliderSelectModule,
-                i3.XTabsModule,
-                i4.XInputModule,
-                baseForm.XBaseFormModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XColorPickerModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [XColorPickerComponent, XColorPickerPortalComponent, XColorPickerProperty],
-                        exports: [XColorPickerComponent, XColorPickerPortalComponent],
-                        imports: [
-                            i1.CommonModule,
-                            i4$1.FormsModule,
-                            i4$1.ReactiveFormsModule,
-                            i5.DragDropModule,
-                            i1$1.XPortalModule,
-                            i2.XSliderSelectModule,
-                            i3.XTabsModule,
-                            i4.XInputModule,
-                            baseForm.XBaseFormModule
-                        ],
-                        entryComponents: [XColorPickerPortalComponent]
-                    }]
-            }] });
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.XColorPickerComponent = XColorPickerComponent;
-    exports.XColorPickerModule = XColorPickerModule;
-    exports.XColorPickerPortalComponent = XColorPickerPortalComponent;
-    exports.XColorPickerPortalPrefix = XColorPickerPortalPrefix;
-    exports.XColorPickerPrefix = XColorPickerPrefix;
-    exports.XColorPickerProperty = XColorPickerProperty;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=ng-nest-ui-color-picker.umd.js.map