@skyux/colorpicker 5.5.0 → 5.6.2

package/bundles/skyux-colorpicker.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/theme'), require('rxjs'), require('rxjs/operators'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@skyux/colorpicker', ['exports', '@angular/common', '@angular/core', '@skyux/core', '@skyux/forms', '@skyux/i18n', '@skyux/indicators', '@skyux/theme', 'rxjs', 'rxjs/operators', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.colorpicker = {}), global.ng.common, global.ng.core, global.i1, global.i5, global.i2, global.i4, global.i3, global.rxjs, global.rxjs.operators, global.ng.forms));
-})(this, (function (exports, i6, i0, i1, i5, i2, i4, i3, rxjs, operators, forms) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/theme'), require('@angular/forms'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@skyux/colorpicker', ['exports', '@angular/common', '@angular/core', '@skyux/core', '@skyux/forms', '@skyux/i18n', '@skyux/indicators', '@skyux/theme', '@angular/forms', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.colorpicker = {}), global.ng.common, global.ng.core, global.i1, global.i5, global.i2, global.i4, global.i3, global.ng.forms, global.rxjs, global.rxjs.operators));
+})(this, (function (exports, i6, i0, i1, i5, i2, i4, i3, forms, rxjs, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -102,29 +102,6 @@
                     }]
             }] });
 
-    /**
-     * Specifies the commands to provide the colorpicker.
-     */
-    exports.SkyColorpickerMessageType = void 0;
-    (function (SkyColorpickerMessageType) {
-        /**
-         * Opens the colorpicker.
-         */
-        SkyColorpickerMessageType[SkyColorpickerMessageType["Open"] = 0] = "Open";
-        /**
-         * Resets the selection in the colorpicker.
-         */
-        SkyColorpickerMessageType[SkyColorpickerMessageType["Reset"] = 1] = "Reset";
-        /**
-         * Toggles whether to display a reset button beside the colorpicker.
-         */
-        SkyColorpickerMessageType[SkyColorpickerMessageType["ToggleResetButton"] = 2] = "ToggleResetButton";
-        /**
-         * Closes the colorpicker.
-         */
-        SkyColorpickerMessageType[SkyColorpickerMessageType["Close"] = 3] = "Close";
-    })(exports.SkyColorpickerMessageType || (exports.SkyColorpickerMessageType = {}));
-
     // spell-checker:ignore hsva, hsla, cmyk, denormalize, colorpicker,Injectable
     /**
      * @internal
@@ -344,7 +321,7 @@
             var hsva = undefined;
             for (var key in stringParsers) {
                 /* istanbul ignore else */ /* for in must be filtered by an if */
-                if (stringParsers.hasOwnProperty(key)) {
+                if (Object.prototype.hasOwnProperty.call(stringParsers, key)) {
                     var parser = stringParsers[key];
                     var match = parser.re.exec(colorString);
                     var color = match && parser.parse(match);
@@ -386,7 +363,6 @@
             return color[outputFormat]();
         };
         SkyColorpickerService.prototype.skyColorpickerOut = function (color) {
-            var formatColor;
             var cmykText = this.outputFormat(color, 'cmyk', true);
             var hslaText = this.outputFormat(color, 'hsla', true);
             var rgbaText = this.outputFormat(color, 'rgba', true);
@@ -394,7 +370,7 @@
             var hsla = this.hsva2hsla(color);
             var cmyk = this.rgbaToCmyk(rgba);
             var hex = this.outputFormat(color, 'hex', false);
-            formatColor = {
+            var formatColor = {
                 cmykText: cmykText,
                 hslaText: hslaText,
                 rgbaText: rgbaText,
@@ -469,121 +445,357 @@
     SkyColorpickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
+            }] });
 
-    // spell-checker:ignore colorpicker
-    /**
-     * @internal
-     */
-    var SliderPosition = /** @class */ (function () {
-        function SliderPosition(hue, saturation, value, alpha) {
-            this.hue = hue;
-            this.saturation = saturation;
-            this.value = value;
-            this.alpha = alpha;
-        }
-        return SliderPosition;
-    }());
+    // tslint:disable:no-forward-ref no-use-before-declare
+    var SKY_COLORPICKER_VALUE_ACCESSOR = {
+        provide: forms.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return SkyColorpickerInputDirective; }),
+        multi: true,
+    };
+    var SKY_COLORPICKER_VALIDATOR = {
+        provide: forms.NG_VALIDATORS,
+        useExisting: i0.forwardRef(function () { return SkyColorpickerInputDirective; }),
+        multi: true,
+    };
+    // tslint:enable
+    var SKY_COLORPICKER_DEFAULT_COLOR = '#FFFFFF';
     /**
-     * @internal
+     * Creates the colorpicker element and dropdown.
      */
-    var SliderDimension = /** @class */ (function () {
-        function SliderDimension(hue, saturation, value, alpha) {
-            this.hue = hue;
-            this.saturation = saturation;
-            this.value = value;
-            this.alpha = alpha;
+    var SkyColorpickerInputDirective = /** @class */ (function () {
+        function SkyColorpickerInputDirective(elementRef, renderer, service, resourcesService, injector) {
+            this.elementRef = elementRef;
+            this.renderer = renderer;
+            this.service = service;
+            this.resourcesService = resourcesService;
+            this.injector = injector;
+            /**
+             * This property is deprecated and does not affect the colorpicker.
+             * We recommend against using it.
+             * @deprecated
+             * @default "rgba"
+             */
+            this.returnFormat = 'rgba';
+            /**
+             * Specifies the format to use for the color when the colorpicker uses a native input
+             * element such as a standard text input or a button. This property accepts `rgba`, `hex`,
+             * or `hsla`, but we do not recommend using it because users never see or use its value.
+             * Instead, if you need to access this format value, see the demo for an example.
+             *@default "rgba"
+             */
+            this.outputFormat = 'rgba';
+            /**
+             * Specifies an array of colors to load as preset choices. The colorpicker displays the
+             * colors in a series of 12 boxes for users to select.
+             */
+            this.presetColors = ['#333', '#888', '#EFEFEF', '#FFF'];
+            /**
+             * Specifies the type of transparency to use in the transparency slider.
+             *@default "hex6"
+             */
+            this.alphaChannel = 'hex6';
+            /**
+             * Indicates whether to display a transparency slider for users to select transparency
+             * levels.
+             */
+            this.allowTransparency = true;
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            this._onChange = function (_) { };
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            this._onTouched = function () { };
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            this._validatorChange = function () { };
         }
-        return SliderDimension;
-    }());
-
-    // spell-checker:ignore Colorpicker
-    /**
-     * @internal
-     */
-    var SkyColorpickerSliderDirective = /** @class */ (function () {
-        function SkyColorpickerSliderDirective(el) {
+        Object.defineProperty(SkyColorpickerInputDirective.prototype, "initialColor", {
+            get: function () {
+                return this._initialColor || SKY_COLORPICKER_DEFAULT_COLOR;
+            },
+            /**
+             * Specifies an initial color to load in the colorpicker. Use a reactive or
+             * template-driven form to set this value. This property is deprecated. As an alternative,
+             * we recommend the `formControlName` property on reactive forms or `ngModel` on
+             * template-driven forms. See the demo for examples.
+             * @deprecated
+             */
+            set: function (value) {
+                /* istanbul ignore else */
+                if (!this._initialColor && !this.modelValue) {
+                    this.writeValue(value);
+                }
+                this._initialColor = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyColorpickerInputDirective.prototype.changeInput = function (event) {
+            var value = event.target.value;
+            this.skyColorpickerInput.updatePickerValues(value);
+            this.skyColorpickerInput.backgroundColorForDisplay = value;
+        };
+        SkyColorpickerInputDirective.prototype.onChange = function (event) {
+            var newValue = event.target.value;
+            this.modelValue = this.formatter(newValue);
+            this._validatorChange();
+            this._onChange(this.modelValue);
+            this.writeModelValue(this.modelValue);
+        };
+        /* istanbul ignore next */
+        SkyColorpickerInputDirective.prototype.onBlur = function () {
+            /*istanbul ignore next */
+            this._onTouched();
+        };
+        SkyColorpickerInputDirective.prototype.ngOnInit = function () {
             var _this = this;
-            this.el = el;
-            this.newColorContrast = new i0.EventEmitter();
-            this.listenerMove = function (event) {
-                _this.move(event);
-            };
-            this.listenerStop = function () {
-                _this.stop();
-            };
-        }
-        SkyColorpickerSliderDirective.prototype.setCursor = function (event) {
-            var height = this.el.nativeElement.offsetHeight;
-            var width = this.el.nativeElement.offsetWidth;
-            var xAxis = Math.max(0, Math.min(this.getX(event), width));
-            var yAxis = Math.max(0, Math.min(this.getY(event), height));
-            if (this.xAxis !== undefined && this.yAxis !== undefined) {
-                this.newColorContrast.emit({
-                    xCoordinate: xAxis / width,
-                    yCoordinate: 1 - yAxis / height,
-                    xAxis: this.xAxis,
-                    yAxis: this.yAxis,
+            var element = this.elementRef.nativeElement;
+            this.renderer.addClass(element, 'sky-form-control');
+            this.skyColorpickerInput.initialColor = this.initialColor;
+            this.skyColorpickerInput.returnFormat = this.returnFormat;
+            this.pickerChangedSubscription =
+                this.skyColorpickerInput.selectedColorChanged.subscribe(function (newColor) {
+                    /* istanbul ignore else */
+                    if (newColor) {
+                        _this.modelValue = _this.formatter(newColor);
+                        _this.writeModelValue(_this.modelValue);
+                    }
+                    _this._onChange(newColor);
                 });
+            this.skyColorpickerInput.updatePickerValues(this.initialColor);
+            /* Sanity check */
+            /* istanbul ignore else */
+            if (!this._disabled) {
+                this.skyColorpickerInput.backgroundColorForDisplay = this.initialColor;
+            }
+            /// Set aria-label as default, if not set
+            if (!element.getAttribute('aria-label')) {
+                this.renderer.setAttribute(element, 'aria-label', this.getString('skyux_colorpicker_input_default_label'));
+            }
+            var typeAttr = element.getAttribute('type');
+            if (typeAttr && typeAttr === 'hidden') {
+                this.skyColorpickerInput.isVisible = false;
             }
             else {
-                this.newColorContrast.emit({
-                    xCoordinate: xAxis / width,
-                    maxRange: this.xAxis,
-                });
+                this.skyColorpickerInput.isVisible = true;
             }
-            /* // No vertical bars
-             if (this.xAxis === undefined && this.yAxis !== undefined) {
-                  this.newColorContrast.emit({ yCoordinate: yAxis / height, maxRange: this.yAxis });
-            } */
+            element.setAttribute('readonly', 'true');
+            this.renderer.addClass(element, 'sky-colorpicker-input');
         };
-        SkyColorpickerSliderDirective.prototype.move = function (event) {
-            event.preventDefault();
-            this.setCursor(event);
+        SkyColorpickerInputDirective.prototype.ngOnDestroy = function () {
+            this.pickerChangedSubscription.unsubscribe();
         };
-        SkyColorpickerSliderDirective.prototype.start = function (event) {
-            this.setCursor(event);
-            document.addEventListener('mousemove', this.listenerMove);
-            document.addEventListener('touchmove', this.listenerMove);
-            document.addEventListener('mouseup', this.listenerStop);
-            document.addEventListener('touchend', this.listenerStop);
+        SkyColorpickerInputDirective.prototype.setColorPickerDefaults = function () {
+            this.skyColorpickerInput.setDialog(this, this.elementRef, this.initialColor, this.outputFormat, this.presetColors, this.alphaChannel, this.allowTransparency);
         };
-        SkyColorpickerSliderDirective.prototype.stop = function () {
-            document.removeEventListener('mousemove', this.listenerMove);
-            document.removeEventListener('touchmove', this.listenerMove);
-            document.removeEventListener('mouseup', this.listenerStop);
-            document.removeEventListener('touchend', this.listenerStop);
+        SkyColorpickerInputDirective.prototype.ngOnChanges = function () {
+            this._validatorChange();
+            this.skyColorpickerInput.returnFormat = this.returnFormat;
+            this.setColorPickerDefaults();
         };
-        SkyColorpickerSliderDirective.prototype.getX = function (event) {
-            /* Ignoring event.touches as tests are not run on a touch device. */
-            /* istanbul ignore next */
-            return ((event.pageX !== undefined ? event.pageX : event.touches[0].pageX) -
-                this.el.nativeElement.getBoundingClientRect().left -
-                window.pageXOffset);
+        SkyColorpickerInputDirective.prototype.registerOnChange = function (fn) {
+            this._onChange = fn;
         };
-        SkyColorpickerSliderDirective.prototype.getY = function (event) {
-            /* Ignoring event.touches as tests are not run on a touch device. */
-            /* istanbul ignore next */
-            return ((event.pageY !== undefined ? event.pageY : event.touches[0].pageY) -
-                this.el.nativeElement.getBoundingClientRect().top -
-                window.pageYOffset);
+        SkyColorpickerInputDirective.prototype.registerOnTouched = function (fn) {
+            this._onTouched = fn;
         };
-        return SkyColorpickerSliderDirective;
-    }());
-    SkyColorpickerSliderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyColorpickerSliderDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: { skyColorpickerSlider: "skyColorpickerSlider", color: "color", xAxis: "xAxis", yAxis: "yAxis" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "touchstart": "start($event)", "mousedown": "start($event)" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[skyColorpickerSlider]',
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { newColorContrast: [{
-                    type: i0.Output
-                }], skyColorpickerSlider: [{
-                    type: i0.Input
-                }], color: [{
-                    type: i0.Input
-                }], xAxis: [{
+        SkyColorpickerInputDirective.prototype.registerOnValidatorChange = function (fn) {
+            this._validatorChange = fn;
+        };
+        SkyColorpickerInputDirective.prototype.writeValue = function (value) {
+            if (this.skyColorpickerInput &&
+                value &&
+                value !== this.skyColorpickerInput.lastAppliedColor) {
+                this.modelValue = this.formatter(value);
+                this.writeModelValue(this.modelValue);
+                if (!this._initialColor) {
+                    this._initialColor = value;
+                    this.skyColorpickerInput.initialColor = value;
+                }
+                this.skyColorpickerInput.lastAppliedColor = value;
+                var control = this.injector.get(forms.NgControl)
+                    .control;
+                if (control) {
+                    control.setValue(this.modelValue, { emitEvent: false });
+                }
+            }
+        };
+        SkyColorpickerInputDirective.prototype.validate = function (control) {
+            var value = control.value;
+            if (!value) {
+                return;
+            }
+            // Validation
+        };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyColorpickerInputDirective.prototype.setDisabledState = function (isDisabled) {
+            this._disabled = isDisabled;
+            this.skyColorpickerInput.disabled = isDisabled;
+            if (this._disabled) {
+                this.skyColorpickerInput.backgroundColorForDisplay = '#fff';
+            }
+            else {
+                this.skyColorpickerInput.backgroundColorForDisplay = this.modelValue.hex;
+            }
+        };
+        SkyColorpickerInputDirective.prototype.writeModelValue = function (model) {
+            var setElementValue = model.rgbaText;
+            var element = this.elementRef.nativeElement;
+            var output;
+            // tslint:disable-next-line:switch-default
+            switch (this.outputFormat) {
+                case 'rgba':
+                    output = model.rgbaText;
+                    break;
+                case 'hsla':
+                    output = model.hslaText;
+                    break;
+                case 'cmyk':
+                    output = model.cmykText;
+                    break;
+                case 'hex':
+                    output = model.hex;
+                    break;
+            }
+            this.skyColorpickerInput.updatePickerValues(output);
+            this.skyColorpickerInput.backgroundColorForDisplay = output;
+            this.renderer.setStyle(element, 'background-color', setElementValue);
+            this.renderer.setProperty(element, 'value', output);
+        };
+        SkyColorpickerInputDirective.prototype.formatter = function (color) {
+            if (color && typeof color !== 'string') {
+                return color;
+            }
+            var hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
+            var formatColor = this.service.skyColorpickerOut(hsva);
+            return formatColor;
+        };
+        SkyColorpickerInputDirective.prototype.getString = function (key) {
+            // TODO: Need to implement the async `getString` method in a breaking change.
+            return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
+        };
+        return SkyColorpickerInputDirective;
+    }());
+    SkyColorpickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: SkyColorpickerService }, { token: i2__namespace.SkyLibResourcesService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyColorpickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerInputDirective, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { listeners: { "input": "changeInput($event)", "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerInputDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[skyColorpickerInput]',
+                        providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: SkyColorpickerService }, { type: i2__namespace.SkyLibResourcesService }, { type: i0__namespace.Injector }]; }, propDecorators: { skyColorpickerInput: [{
+                    type: i0.Input
+                }], initialColor: [{
+                    type: i0.Input
+                }], returnFormat: [{
+                    type: i0.Input
+                }], outputFormat: [{
+                    type: i0.Input
+                }], presetColors: [{
+                    type: i0.Input
+                }], alphaChannel: [{
+                    type: i0.Input
+                }], allowTransparency: [{
+                    type: i0.Input
+                }], changeInput: [{
+                    type: i0.HostListener,
+                    args: ['input', ['$event']]
+                }], onChange: [{
+                    type: i0.HostListener,
+                    args: ['change', ['$event']]
+                }], onBlur: [{
+                    type: i0.HostListener,
+                    args: ['blur']
+                }] } });
+
+    // spell-checker:ignore Colorpicker
+    /**
+     * @internal
+     */
+    var SkyColorpickerSliderDirective = /** @class */ (function () {
+        function SkyColorpickerSliderDirective(el) {
+            var _this = this;
+            this.el = el;
+            this.newColorContrast = new i0.EventEmitter();
+            this.listenerMove = function (event) {
+                _this.move(event);
+            };
+            this.listenerStop = function () {
+                _this.stop();
+            };
+        }
+        SkyColorpickerSliderDirective.prototype.setCursor = function (event) {
+            var height = this.el.nativeElement.offsetHeight;
+            var width = this.el.nativeElement.offsetWidth;
+            var xAxis = Math.max(0, Math.min(this.getX(event), width));
+            var yAxis = Math.max(0, Math.min(this.getY(event), height));
+            if (this.xAxis !== undefined && this.yAxis !== undefined) {
+                this.newColorContrast.emit({
+                    xCoordinate: xAxis / width,
+                    yCoordinate: 1 - yAxis / height,
+                    xAxis: this.xAxis,
+                    yAxis: this.yAxis,
+                });
+            }
+            else {
+                this.newColorContrast.emit({
+                    xCoordinate: xAxis / width,
+                    maxRange: this.xAxis,
+                });
+            }
+            /* // No vertical bars
+             if (this.xAxis === undefined && this.yAxis !== undefined) {
+                  this.newColorContrast.emit({ yCoordinate: yAxis / height, maxRange: this.yAxis });
+            } */
+        };
+        SkyColorpickerSliderDirective.prototype.move = function (event) {
+            event.preventDefault();
+            this.setCursor(event);
+        };
+        SkyColorpickerSliderDirective.prototype.start = function (event) {
+            this.setCursor(event);
+            document.addEventListener('mousemove', this.listenerMove);
+            document.addEventListener('touchmove', this.listenerMove);
+            document.addEventListener('mouseup', this.listenerStop);
+            document.addEventListener('touchend', this.listenerStop);
+        };
+        SkyColorpickerSliderDirective.prototype.stop = function () {
+            document.removeEventListener('mousemove', this.listenerMove);
+            document.removeEventListener('touchmove', this.listenerMove);
+            document.removeEventListener('mouseup', this.listenerStop);
+            document.removeEventListener('touchend', this.listenerStop);
+        };
+        SkyColorpickerSliderDirective.prototype.getX = function (event) {
+            /* Ignoring event.touches as tests are not run on a touch device. */
+            /* istanbul ignore next */
+            return ((event.pageX !== undefined ? event.pageX : event.touches[0].pageX) -
+                this.el.nativeElement.getBoundingClientRect().left -
+                window.pageXOffset);
+        };
+        SkyColorpickerSliderDirective.prototype.getY = function (event) {
+            /* Ignoring event.touches as tests are not run on a touch device. */
+            /* istanbul ignore next */
+            return ((event.pageY !== undefined ? event.pageY : event.touches[0].pageY) -
+                this.el.nativeElement.getBoundingClientRect().top -
+                window.pageYOffset);
+        };
+        return SkyColorpickerSliderDirective;
+    }());
+    SkyColorpickerSliderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyColorpickerSliderDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: { skyColorpickerSlider: "skyColorpickerSlider", color: "color", xAxis: "xAxis", yAxis: "yAxis" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "touchstart": "start($event)", "mousedown": "start($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[skyColorpickerSlider]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { newColorContrast: [{
+                    type: i0.Output
+                }], skyColorpickerSlider: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }], xAxis: [{
                     type: i0.Input
                 }], yAxis: [{
                     type: i0.Input
@@ -645,6 +857,55 @@
                     args: ['input', ['$event']]
                 }] } });
 
+    // spell-checker:ignore colorpicker
+    /**
+     * @internal
+     */
+    var SliderPosition = /** @class */ (function () {
+        function SliderPosition(hue, saturation, value, alpha) {
+            this.hue = hue;
+            this.saturation = saturation;
+            this.value = value;
+            this.alpha = alpha;
+        }
+        return SliderPosition;
+    }());
+    /**
+     * @internal
+     */
+    var SliderDimension = /** @class */ (function () {
+        function SliderDimension(hue, saturation, value, alpha) {
+            this.hue = hue;
+            this.saturation = saturation;
+            this.value = value;
+            this.alpha = alpha;
+        }
+        return SliderDimension;
+    }());
+
+    /**
+     * Specifies the commands to provide the colorpicker.
+     */
+    exports.SkyColorpickerMessageType = void 0;
+    (function (SkyColorpickerMessageType) {
+        /**
+         * Opens the colorpicker.
+         */
+        SkyColorpickerMessageType[SkyColorpickerMessageType["Open"] = 0] = "Open";
+        /**
+         * Resets the selection in the colorpicker.
+         */
+        SkyColorpickerMessageType[SkyColorpickerMessageType["Reset"] = 1] = "Reset";
+        /**
+         * Toggles whether to display a reset button beside the colorpicker.
+         */
+        SkyColorpickerMessageType[SkyColorpickerMessageType["ToggleResetButton"] = 2] = "ToggleResetButton";
+        /**
+         * Closes the colorpicker.
+         */
+        SkyColorpickerMessageType[SkyColorpickerMessageType["Close"] = 3] = "Close";
+    })(exports.SkyColorpickerMessageType || (exports.SkyColorpickerMessageType = {}));
+
     var componentIdIndex = 0;
     /**
      * Provides a SKY UX-themed replacement for the HTML `input` element with `type="color"`.
@@ -1099,268 +1360,6 @@
                         }]
                 }] } });
 
-    // tslint:disable:no-forward-ref no-use-before-declare
-    var SKY_COLORPICKER_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return SkyColorpickerInputDirective; }),
-        multi: true,
-    };
-    var SKY_COLORPICKER_VALIDATOR = {
-        provide: forms.NG_VALIDATORS,
-        useExisting: i0.forwardRef(function () { return SkyColorpickerInputDirective; }),
-        multi: true,
-    };
-    // tslint:enable
-    var SKY_COLORPICKER_DEFAULT_COLOR = '#FFFFFF';
-    /**
-     * Creates the colorpicker element and dropdown.
-     */
-    var SkyColorpickerInputDirective = /** @class */ (function () {
-        function SkyColorpickerInputDirective(elementRef, renderer, service, resourcesService, injector) {
-            this.elementRef = elementRef;
-            this.renderer = renderer;
-            this.service = service;
-            this.resourcesService = resourcesService;
-            this.injector = injector;
-            /**
-             * This property is deprecated and does not affect the colorpicker.
-             * We recommend against using it.
-             * @deprecated
-             * @default "rgba"
-             */
-            this.returnFormat = 'rgba';
-            /**
-             * Specifies the format to use for the color when the colorpicker uses a native input
-             * element such as a standard text input or a button. This property accepts `rgba`, `hex`,
-             * or `hsla`, but we do not recommend using it because users never see or use its value.
-             * Instead, if you need to access this format value, see the demo for an example.
-             *@default "rgba"
-             */
-            this.outputFormat = 'rgba';
-            /**
-             * Specifies an array of colors to load as preset choices. The colorpicker displays the
-             * colors in a series of 12 boxes for users to select.
-             */
-            this.presetColors = ['#333', '#888', '#EFEFEF', '#FFF'];
-            /**
-             * Specifies the type of transparency to use in the transparency slider.
-             *@default "hex6"
-             */
-            this.alphaChannel = 'hex6';
-            /**
-             * Indicates whether to display a transparency slider for users to select transparency
-             * levels.
-             */
-            this.allowTransparency = true;
-            /*istanbul ignore next */
-            this._onChange = function (_) { };
-            /*istanbul ignore next */
-            this._onTouched = function () { };
-            this._validatorChange = function () { };
-        }
-        Object.defineProperty(SkyColorpickerInputDirective.prototype, "initialColor", {
-            get: function () {
-                return this._initialColor || SKY_COLORPICKER_DEFAULT_COLOR;
-            },
-            /**
-             * Specifies an initial color to load in the colorpicker. Use a reactive or
-             * template-driven form to set this value. This property is deprecated. As an alternative,
-             * we recommend the `formControlName` property on reactive forms or `ngModel` on
-             * template-driven forms. See the demo for examples.
-             * @deprecated
-             */
-            set: function (value) {
-                /* istanbul ignore else */
-                if (!this._initialColor && !this.modelValue) {
-                    this.writeValue(value);
-                }
-                this._initialColor = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyColorpickerInputDirective.prototype.changeInput = function (event) {
-            var value = event.target.value;
-            this.skyColorpickerInput.updatePickerValues(value);
-            this.skyColorpickerInput.backgroundColorForDisplay = value;
-        };
-        SkyColorpickerInputDirective.prototype.onChange = function (event) {
-            var newValue = event.target.value;
-            this.modelValue = this.formatter(newValue);
-            this._validatorChange();
-            this._onChange(this.modelValue);
-            this.writeModelValue(this.modelValue);
-        };
-        /* istanbul ignore next */
-        SkyColorpickerInputDirective.prototype.onBlur = function () {
-            /*istanbul ignore next */
-            this._onTouched();
-        };
-        SkyColorpickerInputDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            var element = this.elementRef.nativeElement;
-            this.renderer.addClass(element, 'sky-form-control');
-            this.skyColorpickerInput.initialColor = this.initialColor;
-            this.skyColorpickerInput.returnFormat = this.returnFormat;
-            this.pickerChangedSubscription =
-                this.skyColorpickerInput.selectedColorChanged.subscribe(function (newColor) {
-                    /* istanbul ignore else */
-                    if (newColor) {
-                        _this.modelValue = _this.formatter(newColor);
-                        _this.writeModelValue(_this.modelValue);
-                    }
-                    _this._onChange(newColor);
-                });
-            this.skyColorpickerInput.updatePickerValues(this.initialColor);
-            /* Sanity check */
-            /* istanbul ignore else */
-            if (!this._disabled) {
-                this.skyColorpickerInput.backgroundColorForDisplay = this.initialColor;
-            }
-            /// Set aria-label as default, if not set
-            if (!element.getAttribute('aria-label')) {
-                this.renderer.setAttribute(element, 'aria-label', this.getString('skyux_colorpicker_input_default_label'));
-            }
-            var typeAttr = element.getAttribute('type');
-            if (typeAttr && typeAttr === 'hidden') {
-                this.skyColorpickerInput.isVisible = false;
-            }
-            else {
-                this.skyColorpickerInput.isVisible = true;
-            }
-            element.setAttribute('readonly', 'true');
-            this.renderer.addClass(element, 'sky-colorpicker-input');
-        };
-        SkyColorpickerInputDirective.prototype.ngOnDestroy = function () {
-            this.pickerChangedSubscription.unsubscribe();
-        };
-        SkyColorpickerInputDirective.prototype.setColorPickerDefaults = function () {
-            this.skyColorpickerInput.setDialog(this, this.elementRef, this.initialColor, this.outputFormat, this.presetColors, this.alphaChannel, this.allowTransparency);
-        };
-        SkyColorpickerInputDirective.prototype.ngOnChanges = function () {
-            this._validatorChange();
-            this.skyColorpickerInput.returnFormat = this.returnFormat;
-            this.setColorPickerDefaults();
-        };
-        SkyColorpickerInputDirective.prototype.registerOnChange = function (fn) {
-            this._onChange = fn;
-        };
-        SkyColorpickerInputDirective.prototype.registerOnTouched = function (fn) {
-            this._onTouched = fn;
-        };
-        SkyColorpickerInputDirective.prototype.registerOnValidatorChange = function (fn) {
-            this._validatorChange = fn;
-        };
-        SkyColorpickerInputDirective.prototype.writeValue = function (value) {
-            if (this.skyColorpickerInput &&
-                value &&
-                value !== this.skyColorpickerInput.lastAppliedColor) {
-                this.modelValue = this.formatter(value);
-                this.writeModelValue(this.modelValue);
-                if (!this._initialColor) {
-                    this._initialColor = value;
-                    this.skyColorpickerInput.initialColor = value;
-                }
-                this.skyColorpickerInput.lastAppliedColor = value;
-                var control = this.injector.get(forms.NgControl)
-                    .control;
-                if (control) {
-                    control.setValue(this.modelValue, { emitEvent: false });
-                }
-            }
-        };
-        SkyColorpickerInputDirective.prototype.validate = function (control) {
-            var value = control.value;
-            if (!value) {
-                return;
-            }
-            // Validation
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyColorpickerInputDirective.prototype.setDisabledState = function (isDisabled) {
-            this._disabled = isDisabled;
-            this.skyColorpickerInput.disabled = isDisabled;
-            if (this._disabled) {
-                this.skyColorpickerInput.backgroundColorForDisplay = '#fff';
-            }
-            else {
-                this.skyColorpickerInput.backgroundColorForDisplay = this.modelValue.hex;
-            }
-        };
-        SkyColorpickerInputDirective.prototype.writeModelValue = function (model) {
-            var setElementValue = model.rgbaText;
-            var element = this.elementRef.nativeElement;
-            var output;
-            // tslint:disable-next-line:switch-default
-            switch (this.outputFormat) {
-                case 'rgba':
-                    output = model.rgbaText;
-                    break;
-                case 'hsla':
-                    output = model.hslaText;
-                    break;
-                case 'cmyk':
-                    output = model.cmykText;
-                    break;
-                case 'hex':
-                    output = model.hex;
-                    break;
-            }
-            this.skyColorpickerInput.updatePickerValues(output);
-            this.skyColorpickerInput.backgroundColorForDisplay = output;
-            this.renderer.setStyle(element, 'background-color', setElementValue);
-            this.renderer.setProperty(element, 'value', output);
-        };
-        SkyColorpickerInputDirective.prototype.formatter = function (color) {
-            if (color && typeof color !== 'string') {
-                return color;
-            }
-            var formatColor;
-            var hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
-            formatColor = this.service.skyColorpickerOut(hsva);
-            return formatColor;
-        };
-        SkyColorpickerInputDirective.prototype.getString = function (key) {
-            // TODO: Need to implement the async `getString` method in a breaking change.
-            return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
-        };
-        return SkyColorpickerInputDirective;
-    }());
-    SkyColorpickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: SkyColorpickerService }, { token: i2__namespace.SkyLibResourcesService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyColorpickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerInputDirective, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { listeners: { "input": "changeInput($event)", "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyColorpickerInputDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[skyColorpickerInput]',
-                        providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR],
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: SkyColorpickerService }, { type: i2__namespace.SkyLibResourcesService }, { type: i0__namespace.Injector }]; }, propDecorators: { skyColorpickerInput: [{
-                    type: i0.Input
-                }], initialColor: [{
-                    type: i0.Input
-                }], returnFormat: [{
-                    type: i0.Input
-                }], outputFormat: [{
-                    type: i0.Input
-                }], presetColors: [{
-                    type: i0.Input
-                }], alphaChannel: [{
-                    type: i0.Input
-                }], allowTransparency: [{
-                    type: i0.Input
-                }], changeInput: [{
-                    type: i0.HostListener,
-                    args: ['input', ['$event']]
-                }], onChange: [{
-                    type: i0.HostListener,
-                    args: ['change', ['$event']]
-                }], onBlur: [{
-                    type: i0.HostListener,
-                    args: ['blur']
-                }] } });
-
     var SkyColorpickerModule = /** @class */ (function () {
         function SkyColorpickerModule() {
         }