@skyux/colorpicker 5.0.0 → 5.1.0

package/bundles/skyux-colorpicker.umd.js

@@ -2,7 +2,7 @@
     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';
+})(this, (function (exports, i6, i0, i1, i5, i2, i4, i3, rxjs, operators, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -49,9 +47,9 @@
         };
         return SkyColorpickerResourcesProvider;
     }());
-    SkyColorpickerResourcesProvider.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyColorpickerResourcesProvider.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider, decorators: [{
+    SkyColorpickerResourcesProvider.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyColorpickerResourcesProvider.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesProvider, decorators: [{
                 type: i0.Injectable
             }] });
     /**
@@ -62,14 +60,14 @@
         }
         return SkyColorpickerResourcesModule;
     }());
-    SkyColorpickerResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyColorpickerResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyColorpickerResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, providers: [{
+    SkyColorpickerResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyColorpickerResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, exports: [i2.SkyI18nModule] });
+    SkyColorpickerResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, providers: [{
                 provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyColorpickerResourcesProvider,
                 multi: true
             }], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i2.SkyI18nModule],
@@ -415,9 +413,9 @@
         };
         return SkyColorpickerService;
     }());
-    SkyColorpickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyColorpickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerService, decorators: [{
+    SkyColorpickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyColorpickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -518,9 +516,9 @@
         };
         return SkyColorpickerSliderDirective;
     }());
-    SkyColorpickerSliderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", 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.7", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, decorators: [{
+    SkyColorpickerSliderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", 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.12", ngImport: i0__namespace, type: SkyColorpickerSliderDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyColorpickerSlider]'
@@ -571,9 +569,9 @@
         };
         return SkyColorpickerTextDirective;
     }());
-    SkyColorpickerTextDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerTextDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyColorpickerTextDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerTextDirective, decorators: [{
+    SkyColorpickerTextDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerTextDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyColorpickerTextDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.12", type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerTextDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyColorpickerText]'
@@ -605,6 +603,11 @@
             this.overlayService = overlayService;
             this.service = service;
             this.themeSvc = themeSvc;
+            /**
+             * Specifies the type of icon to display. Specifying `fa` will display a Font Awesome icon, while specifying `skyux` will display an icon from the custom SKY UX icon font. Note that the custom SKY UX icon font is currently in beta.
+             * @internal
+             */
+            this.pickerButtonIconType = 'fa';
             /**
              * Fires when users select a color in the colorpicker.
              */
@@ -622,7 +625,6 @@
              * Indicates whether to display a reset button to let users return to the default color.
              */
             this.showResetButton = true;
-            this.backgroundColorForDisplay = '#fff';
             this.isOpen = false;
             this.isVisible = true;
             this.ngUnsubscribe = new rxjs.Subject();
@@ -649,6 +651,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SkyColorpickerComponent.prototype, "backgroundColorForDisplay", {
+            get: function () {
+                /* istanbul ignore next */
+                return this._backgroundColorForDisplay || '#fff';
+            },
+            set: function (value) {
+                this._backgroundColorForDisplay = value;
+                if (this.pickerButtonIcon) {
+                    this.iconColor = this.getAccessibleIconColor(this.selectedColor);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SkyColorpickerComponent.prototype, "colorpickerRef", {
             get: function () {
                 return this._colorpickerRef;
@@ -969,13 +985,21 @@
             }
             return hsva;
         };
+        // http://www.w3.org/TR/AERT#color-contrast
+        SkyColorpickerComponent.prototype.getAccessibleIconColor = function (backgroundColor) {
+            var rgb = backgroundColor.rgba;
+            var brightness = Math.round(((rgb.red * 299) +
+                (rgb.green * 587) +
+                (rgb.blue * 114)) / 1000);
+            return (brightness > 125) ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
+        };
         return SkyColorpickerComponent;
     }());
-    SkyColorpickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: SkyColorpickerService }, { token: i3__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyColorpickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyColorpickerComponent, selector: "sky-colorpicker", inputs: { label: "label", labelledBy: "labelledBy", messageStream: "messageStream", showResetButton: "showResetButton" }, outputs: { selectedColorChanged: "selectedColorChanged", selectedColorApplied: "selectedColorApplied" }, providers: [
+    SkyColorpickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: SkyColorpickerService }, { token: i3__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyColorpickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyColorpickerComponent, selector: "sky-colorpicker", inputs: { pickerButtonIcon: "pickerButtonIcon", pickerButtonIconType: "pickerButtonIconType", label: "label", labelledBy: "labelledBy", messageStream: "messageStream", showResetButton: "showResetButton" }, outputs: { selectedColorChanged: "selectedColorChanged", selectedColorApplied: "selectedColorApplied" }, providers: [
             SkyColorpickerService
-        ], viewQueries: [{ propertyName: "colorpickerTemplateRef", first: true, predicate: ["colorpickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "colorpickerRef", first: true, predicate: ["colorpickerRef"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-input-group\"\n  [ngClass]=\"{\n    'sky-colorpicker-hidden': !isVisible,\n    'sky-colorpicker-disabled': disabled\n  }\"\n>\n  <div\n    [hidden]=\"true\"\n  >\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    aria-haspopup=\"dialog\"\n    class=\"sky-colorpicker-button\"\n    type=\"button\"\n    [attr.aria-controls]=\"isOpen ? colorpickerId : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label || (labelledBy ? null : ('skyux_colorpicker_dropdown_button' | skyLibResources))\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.id]=\"triggerButtonId\"\n    [attr.title]=\"label || (labelledBy ? null : ('skyux_colorpicker_dropdown_button' | skyLibResources))\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-sm': 'modern'\n    }\"\n    [style.background-color]=\"backgroundColorForDisplay\"\n    (click)=\"onTriggerButtonClick()\"\n    #triggerButtonRef\n  >\n    <ng-container *skyThemeIf=\"'modern'\">\n      <sky-icon *ngIf=\"showResetButton\"\n        class=\"sky-colorpicker-button-modern-chevron\"\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n        size=\"xs\"\n        [ngClass]=\"{\n          'sky-colorpicker-button-modern-chevron-disabled': disabled\n        }\"\n      >\n      </sky-icon>\n    </ng-container>\n  </button>\n\n  <ng-template #colorpickerTemplateRef>\n    <div\n      class=\"sky-colorpicker-container\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"triggerButtonId\"\n      [attr.id]=\"colorpickerId\"\n      [hidden]=\"!isPickerVisible\"\n      [skyThemeClass]=\"{\n        'sky-shadow' : 'default',\n        'sky-elevation-4' : 'modern'\n      }\"\n      #colorpickerRef\n    >\n      <div\n        class=\"sky-colorpicker\"\n      >\n        <div\n          class=\"saturation-lightness\"\n          [color]=\"slider.saturation - slider.value\"\n          [skyColorpickerSlider]\n          [style.background-color]=\"hueSliderColor\"\n          [xAxis]=\"1\"\n          [yAxis]=\"1\"\n          (newColorContrast)=\"saturationAndLightness=$event\"\n        >\n          <div\n            class=\"cursor sky-rounded-circle\"\n            [style.left.px]=\"slider.saturation\"\n            [style.top.px]=\"slider.value\"\n          ></div>\n        </div>\n\n        <div\n          class=\"box\"\n        >\n          <div\n            class=\"left\"\n          >\n            <div\n              class=\"selected-color-background sky-rounded-circle\"\n            ></div>\n            <div\n              class=\"selected-color sky-rounded-circle\"\n              [style.background-color]=\"selectedColor?.rgbaText\"\n            ></div>\n          </div>\n          <div\n            class=\"right\"\n          >\n            <div\n              class=\"hue\"\n              [skyColorpickerSlider]\n              [xAxis]=\"1\"\n              (newColorContrast)=\"hue=$event\"\n              #hueSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.hue\"\n              ></div>\n            </div>\n            <div *ngIf=\"this.allowTransparency\"\n              class=\"alpha\"\n              [skyColorpickerSlider]\n              [style.background-color]=\"alphaSliderColor\"\n              [xAxis]=\"1\"\n              (newColorContrast)=\"alphaAxis=$event\"\n              #alphaSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.alpha\"\n              ></div>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"rgba-text\"\n        >\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_hex' | skyLibResources\"\n              [attr.for]=\"skyColorpickerHexId\"\n            >\n              {{ 'skyux_colorpicker_hex' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              pattern=\"^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\n              [attr.id]=\"skyColorpickerHexId\"\n              [skyColorpickerText]\n              [value]=\"hexText\"\n              (newColorContrast)=\"hex=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_red' | skyLibResources\"\n              [attr.for]=\"skyColorpickerRedId\"\n            >\n              {{ 'skyux_colorpicker_red' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerRedId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.red\"\n              (newColorContrast)=\"red=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_green' | skyLibResources\"\n              [attr.for]=\"skyColorpickerGreenId\"\n            >\n              {{ 'skyux_colorpicker_green' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerGreenId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.green\"\n              (newColorContrast)=\"green=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_blue' | skyLibResources\"\n              [attr.for]=\"skyColorpickerBlueId\"\n            >\n              {{ 'skyux_colorpicker_blue' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerBlueId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.blue\"\n              (newColorContrast)=\"blue=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box *ngIf=\"this.allowTransparency\">\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_alpha' | skyLibResources\"\n              [attr.for]=\"skyColorpickerAlphaId\"\n            >\n              {{ 'skyux_colorpicker_alpha' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"1\"\n              min=\"0\"\n              pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n              step=\"0.1\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerAlphaId\"\n              [maxRange]=\"1\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.alpha\"\n              (newColorContrast)=\"alphaColor=$event\"\n            />\n          </sky-input-box>\n        </div>\n        <div *ngIf=\"presetColors && presetColors.length\"\n          class=\"sky-colorpicker-preset-color-area\"\n        >\n          <button *ngFor=\"let color of presetColors | slice:0:12; let i = index;\"\n            type=\"button\"\n            [attr.aria-label]=\"('skyux_colorpicker_preset_color' | skyLibResources) + ' ' + color\"\n            [skyThemeClass]=\"{\n              'sky-preset-color': 'default',\n              'sky-btn sky-btn-link': 'modern'\n            }\"\n            [style.backgroundColor]=\"color\"\n            (click)=\"onPresetClick(color)\"\n          ></button>\n        </div>\n      </div>\n\n      <div\n        class=\"sky-colorpicker-footer\"\n        [skyThemeClass]=\"{\n          'sky-padding-even-large': 'default'\n        }\"\n      >\n        <section\n          class=\"sky-colorpicker-column\"\n        >\n          <button\n            class=\"sky-btn sky-btn-primary sky-btn-colorpicker-apply\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_apply' | skyLibResources\"\n            [skyThemeClass]=\"{ 'sky-margin-inline-sm' : 'modern' }\"\n            (click)=\"onApplyColorClick()\"\n          >\n            {{ 'skyux_colorpicker_apply' | skyLibResources }}\n          </button>\n          <button\n            class=\"sky-btn sky-btn-link sky-btn-colorpicker-close\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_close' | skyLibResources\"\n            (click)=\"onCancelClick()\"\n          >\n            {{ 'skyux_colorpicker_close' | skyLibResources }}\n          </button>\n        </section>\n      </div>\n    </div>\n  </ng-template>\n  <span *ngIf=\"allowTransparency\"\n    aria-hidden=\"true\"\n    class=\"sky-colorpicker-checkered-background\"\n  >\n  </span>\n\n  <button *ngIf=\"showResetButton\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_colorpicker_reset' | skyLibResources\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-reset-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-colorpicker-reset-button': 'default',\n      'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern': 'modern'\n    }\"\n    (click)=\"onResetClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\"\n      icon=\"times\"\n      size=\"sm\"\n    >\n    </sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\"\n      icon=\"trash\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [".sky-colorpicker-container{position:fixed}.sky-colorpicker-button{width:30px;height:30px;border:0;cursor:pointer}.sky-colorpicker-button.sky-colorpicker-button-disabled{cursor:default}.sky-colorpicker-disabled{opacity:.65;cursor:default}.sky-colorpicker-button,.sky-colorpicker-button:active{background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%200h30v30H0V0zm14.5%204H4v22h14v-8h8V4H14.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22%23FFF%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20stroke%3D%22%23CCC%22%20d%3D%22M.5.5v29h29V.5H.5zm18%2018v8h-15v-23h23v15h-8z%22%2F%3E%3Cpath%20fill%3D%22%23292A2B%22%20d%3D%22M23.5%2025L21%2022h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)}.sky-colorpicker-hidden{width:0px;height:0px;overflow:hidden}.sky-colorpicker-reset-button{background-color:#fff;margin-left:5px;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #cdcfd2;width:30px;height:30px;cursor:pointer;color:#686c73}.sky-colorpicker-reset-button:hover{color:#383a3d}.sky-colorpicker-reset-button.sky-colorpicker-reset-button-disabled{color:#686c73;cursor:default}.sky-colorpicker-footer{background-color:#fff;border-top:1px solid #e2e3e4}.sky-colorpicker *{box-sizing:border-box;margin:0}.sky-colorpicker{cursor:default;width:270px;height:auto;background-color:#fff;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-colorpicker i{cursor:default;position:relative}.sky-colorpicker input{text-align:center;font-size:14px;height:26px;color:#212327}.sky-colorpicker input:invalid{box-shadow:none}.sky-colorpicker input:-moz-submit-invalid{box-shadow:none}.sky-colorpicker input:-moz-ui-invalid{box-shadow:none}.sky-colorpicker input::-webkit-inner-spin-button,.sky-colorpicker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sky-colorpicker input[type=number].sky-form-control{-moz-appearance:textfield!important}.sky-colorpicker .button-area{padding:0 15px 15px;text-align:right}.sky-colorpicker .sky-colorpicker-preset-color-area{padding-left:9px;padding-right:9px;padding-bottom:15px;display:flex;flex-direction:row;flex-wrap:wrap}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color{cursor:pointer;width:32px;height:32px;margin:5px;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:hover{cursor:pointer;border:#ffffff solid 2px;margin:4px;width:34px;height:34px;box-shadow:0 0 0 1px #cdcfd2,0 0 0 2px #e2e3e4}.sky-colorpicker .arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.sky-colorpicker div.cursor-sv{cursor:default;position:relative;width:14px;height:14px;border-top:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2}.sky-colorpicker div.cursor{cursor:default;position:relative;width:17px;height:17px;border:#686c73 solid 2px}.sky-colorpicker .saturation-lightness{cursor:pointer;width:100%;height:170px;border:none;background-size:100% 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACCCAYAAABSD7T3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwksPWR6lgAAIABJREFUeNrtnVuT47gRrAHN+P//Or/61Y5wONZ7mZ1u3XAeLMjJZGZVgdKsfc5xR3S0RIIUW+CHzCpc2McYo7XGv3ex7UiZd57rjyzzv+v+33X/R/+3r/f7vR386Y+TvKNcf/wdhTLPcv9qU2wZd74uth0t1821jkIZLPcsI/6nWa4XvutquU0Z85mnx80S/ZzgpnLnOtHNt7/ofx1TKXcSNzN/7qbMQ3ju7rNQmMYYd/4s2j9aa+P+gGaMcZrb1M/tdrvf7/d2v99P9/t93O/3cbvdxu12G9frdVwul3E+n8c///nP+2+//Xb66aefxl//+tfx5z//2YK5Al2rgvf4UsbpdGrB52bAvArXpuzjmiqAVSGz5eDmGYXzhbAZmCrnmzddpUU+8Y1dAOYeXCtDUwVwV7YCGH6uAmyMcZ9l5vkUaBPGMUZ7/J5w/792/fvv9Xq93263dr/fTxPECeME8nK5jM/Pz/HTTz/dv337dvrll1/GP/7xj/G3v/1t/OUvfwkVswongjdOp9PzH3U3D3zmWGnZVXn4jCqs7wC2BKP4/8tAzkZsoWx6XrqeHZymvp4ABCBJhTQwKfDT8gzrZCIqi5AhiACjBfEB2rP8/X63MM7f6/V6v9/v7Xa7bYC83W7jcrlsVHIq5ffv30+//fbb+OWXX8ZPP/00/v73v4+ff/75JSvbeu+bL2WMMaFbAlpBNM85QX+ct6qoSqkPAwuQlBVKqGNFSUOAA3Bmu7gC5hNOd15nSwvAOUW7C4giUCV8Sgn5L9hNFIqTsp0GxI0ysioyjAjkY/tGJVEpz+fz+OWXX+7fv38//f777+Pbt2/j119/HT///PP49ddfx8fHRwrmTjV779EXu2px2xhjwtdJZQcAWQIPLPISsMJaSwiD8gzIKrwSyATE5j5nAbR5c1dBUwBlsEWW0h6LqiYsqFPAQxCyRZ3wOSARxmlXMX5k64pQfvv27f75+dk+Pj5OHx8f4/v37+Pbt2/jt99+G9++fRsfHx/jcrmUFLO31gYDWblxRIs/TqfT7ousxJsAxXA2Gc7TA9XdgfdoHbFsj76X2+1WArgI1ageGwA3qupqoHsmcbI6Fu93quggFa9d7LeDtgKfAFHBJ+NEByIkcJ5KervdTmhhGcgJJSZ5vn//fj+fz+18Pp8+Pz/H5+fnmGD+/vvv4/v37+Pj42N8fn6O2+1Ws7JjjP6wraMI5E4RZ8x2vV5TSwkquotV7/d7Tz6HFWsD/qNcdw0CQ3q/321c686TwDVIdbuy73zNldhSHb8I2klZznm+InBS4U6n0302aBFsLhHDAKJVJVglfI9jhvu53W53sLANYNxAiDA6MCeUHx8f9+v12i6XS7tcLqcZW57P5yeY8/fz83Ocz+fnsSmYUyknWEG85WBst9stzSLyMdfr9Qi08iY15UZ0LlDGLhR3o5zK2j7OPUTD0E+nU3tk7Xb/16NFbhloAMuY1zjLUOO3BKeIDe+Z8s3/J4gFo4TM5jPmuRg28foUKKVSwo16TgA5npywcWLHgYl/Pz8/73/605/ab7/91m63W7tcLie0sZj4mao5gTyfz88E0f1+j8EcYzwTPEG2cqjyfHNF0M8fuqEiaOVnRzZZQNh5fwQyHg/HDGfJo89Q1zb/quu5XC6773I2XKfTqd/v9+d3wuqWva/YTdUdEV3fhIv/Viyps6YE3x3r43K5bJQS66zaxVGFsvd+//j4aF+/fm3fv39vt9utff36tf3+++/tdrudvn37ZuNLBaaCMgUzC+rZRiFowxUuJI8YMqcCp9Opq5vagaYU6lGJA1XQqejchw6Cj0Gw5nYBrGw01A2O206n04BGouNNyTfp/FwElhUey6nXrIKw7QQWddxuN2ldL5fL839gSPF8ahu/JvBO48CPSuqMf8Vp9/P53L58+dLu93s7n8/tfr8/39/v9/b5+TkhPJ3P56mQ436/j+/fv+/iSgbzer0+AZx/5+88bv6OMda6S5z6kd21fYC9dxv7cIJJ2d9AOS30fPMzyHiTM8B4DF6XUlYHp4KQW3W+1t77MNB1vGHxWq7Xa7vf78+y5/N5A+H1et29xuP5dbYtyaRu4AksbPq6936fjRzXRxBbPr/b+b18+fKljTHaBBBfn8/n0/1+H1++fBnn8zm0sB8fH5u4cr5GuBhMVk0EEn9RsctgVhM+ixlJtMA23R8B6yysAstBOgFXIKKCMIgToMqNEu2fYMH7ztc732dQKkCj1ytAZtY0Kx8pIr8GGJ+AT3V+2Hirhl++fBmXy2Wz73w+b17P8p+fn8/tUwGVleVkTyUb68DkfayWY4zxNRihU4EpLJPZVrK+u7J4/mgfKqeLW9X2REWlItL1diynbDDb3+jXgYjQqn0rrxWc+NkILP7F7xIbMvx7vV53x40xnlbWJF12ZSag/N0pW6t+ZzmOMzHjajKwDfond78zYTdfq18up97zr2q8v3IioBprRtBl0EZ9og5WBRGOdOHjIjXF7UotFbgOWnXzIJyzYvjG5IYgsmMOxHkz8OsMSrVNWeq5T8DaOcbEv1Od5rbs9aO7YvMet63EkF++fMExq+MRl4/L5bLZN/+ez+fnZ6KazuMqXSQVO5spJXflHAIzes/xJseckRJiDMog9d6VfRrqXMr6KpVV27jRwJacGovOAM1zMdQMnwK1AubK63kdCChvI1C7g0z9nf/D+Xze2Vj8H7Gx4P9duQlsYCrqyN8XqG3Hm/10Oj3jw/n+crlstuM+jPmmxT2dTuPz83Pzt2pn1XsEHX/bnPaVqVmh0xwOt0o6XLLAHePUU203wHfcrspCwmV3TryB5s0Mseeg97x/BwzCjBlbB+pRAPla0BVQuT6V6QHdBlj3d0KG147b+DqxQeUymDO43W4dQar+TIjwmAd0z8/h65vf0/yLv3Pb5XLpru/ydDo9s7ET0I+Pj6dKK9VUEIeKWQWPAOrJ8LKd4vE+t91Y3e7UFlWatg2VwJnb+HPmtvm/sfK59/OaWF3x/eP1UPHvA5DDYDpYXfb0drv1V2DkBkxtw/tEWVVlXWdC9pFYs5/jfh9dS/16vW7s6lTG+TfqsxSJHxkXXq/Xdr1eu4LsfD6P3vsT3N77DkL+zPm5jSdKL4zR3AxQd6rHkLkYlSowsrq7znzu6wSwdsMJOXmA5fBcjxtgMGBYHlr5zokhtsMCTgXLQOW4XC6dEyEMprL8mAQzXRgduix2yZzorxkYsDn3hB1VeMLGsXsVtgl2pW8S3svk0vw7R4hNaHvv4cACl5HFzwIH0Kc6zu4XjDPR/jpAVxWzO1Xk2DDb3vTcxeGU1iWZHkmIDWziWKvirCJ4Dravs6IJ/GG6cTqWdXDy+fArQDVVkLqkVjAoZIITdmmIqXwqa95N3+MGYoZQdRVNO53Y1xRkhO16vY7eu507Ca9lJnbGpxOemQhSw/AQsmmp5zU9BiU8G6wvX76M6/U6Pj4+do0Bz4CpgiknTUeDqwlKBmg3u4OVjrZ1A+rAcgaejWq6eJCvCYFDONSwOgHX4EQRw8lxbzDOdEK6gZ3Hk1b+8g2o1JFtKXyv/fEdTXuWjWXdAZiBp6ADeDrCFiim7B6ZFneeI7Gvm/PMkUDX67W7xI8b0D7/v8dA9qfN5oaCf74WZjH0mf1cmfY1Y0JUFmVrTWu8uzkNcLtEj7u5FXBTkfC6GOA5q8YMxO8KVvF6sAVGdcrUbsKODcQKkLMOMdmlxum642YrPm26AlhZW1YB1R+rrGswE8TaYAWeUMxdf+WjwSvZ2Ef3ytOyfn5+PpVPAaqOn43MtNBqvmjjxbjM4lZjZY4gqNMI5ktaW/sYKNwS+9lFQzGihmMCKPa7+Z0V6Eb0GRmobtpX8JljWu5FMLN5ja6hG9kwQgZqf5+1NH5UxzkFReCdWhJ8XdlGUkxO7HRlYRm4mVO43W7ter12TPJEw/rmEN3L5SKHIWZg9mz+pUoKOYq5bJTJdX2gme1UcxMZQFaEQIlHct32M+Y1BzGkGuzfiyAN9z+ugplZ1symCrDCYYkGxDTpI9RzBy0rHyeDUC1nWaeUaD9n4xkNyYMBDZtzZ3B++fJlY21XFDOcARJlabOyiS3uCpLI9jrZjCDkaVvcCCjwognKShWdzXZWlZMvVTgD8LpqlCLrqgbcB+qYwrgKYpT0ccCqbKyCValkEabn/FynogCrPKfqf51xJ7sGB2ZXcZmxoSOztjx300DZi7a0/2AIR0UlBag9SuDw6KcAzlaB7vHZvWpjK90dyrq6bKyDUZQbR0B05biLQkHIcSUmgIK+SwuqgHCnoio2RQU1yj+BnBy9pphVKLGyC7ZzFK1pxWK+E8IhVCWLN/uLtnUU4ayoYLoaANz8FdtaSvY4pV0BEW2ls61czqllBKpTyKgMAhrZ1cdc1RROtPmvWNkdcKZ7ZKxaWjiPLJMpp7OZKxA+rqG/oJLjxf0pnJlqLoDZo3gyU0mKGys2taKecj/d1C+rJSplBqlTyAqgR+D8KjKlmRL2gtUcAdCtsL+ijCNT1oqqqkH2OHEbG5sDFnUg5Aa+yLou2VU1ptj1S2ZQqv1ORZN9IWzRfgaRBxKoBE8UWyqlJFtrIc0AxNjSjed99CTY/XDfSzCz5M0IZoVEsWnPFNTsl8ooVC1TzbGgqFZNDSgVwKK+1sGDMKqxZCWGVMDysiEr1jVSQJUYwj5iHOlThdHt44SQg9CN+nl8D90NMIgAdgr46JqRiR9I8vRdFvbr17m/yxUMKjNLMiVUADwu2CWGhhi+F55TWM9M9cogzms1dnM4uOF/LAEYWdcqnM7yFmyq3IfwmOROd7Y1iFWtOjoY8To41mTV5IysgFFuRzsbWFGbNIIJCDv1dOo4lZG7jWBwRFtVTKuWyeCByJKOan8oZ3ep9XddNl0tDuaywLz9cXPYeDAA0SpkBO9sbVcTOVWldPv4uyzEkzxHtjvonHoSkFEWNoo1d8DhcQputd2ppNon4BzoAiJ1hBFQg0dVtdbGHHDQWushmNEQukLM2QO1G2Y8bgTXqFhcBJj7EjPgcPts8US8qPpPB/dXznOh5Z438tzH5ec6QgrOKrRRfKmysBmUDB+PhYabMlVPER+GCSITTzr7am2tArH3bgcEzPJm+cr5jJ4NnHNFDVrFXcI5Le9k5Jnw+bedbV+FfRzZIHaOOaOsLY0/7UGs58DjrGwKMIMFIGzOEW1/jGsdAtCN6hEAI4hBe9YXeRROBSVPAVPAqvIM5bx5hVKWAMP6zBRy3iescridVdFBinBxXDnG2GRY2XbCvp1lhvGtO9Bxu5h908XQu42lnSArMFdizMim8uwRCxPGnnOS8lwpnbOiDqTAjsrRN/PcoAScCbaACqVM40ylnjjTBs+bwWlAG23/UKbdkiwKWIQPGzWaczpoSlxPEj822cNWkpS7FyzsDrqpfgpG3jahw2vgbaSQAxuLWZYt7JzyNe8JoZpNAcvDFOdw0wqYT9AK1rZz/DdbSlLPp0ryIxgQJlK9AZlEq7IOXpohg9PIhrCng88JsOxiV4ZWAYfg4sikx/8ky2Z9l862uqwrfscIH8+ugTmVGyiddeVYUgEMn4GZzg14EwIsh9sx2cKKiWXReuOE5gzGOQgdlRKVVdlevqb279Xq0Qnsts2VDaBO0coezsruWtHApu6sKG4IBhN0aGU2kLrMKGRTN3HmbCDwKV14zvkMEDG4QfZVspVlaNU2mhc5TEZ3N1h/zqTheuLpW05ZWTGVjb3dbnNmxKZBnN8JqidaVLKAOyARNLS+MB54Z2+VaqoMLKroVBlngefnTPAcoHNWCSvlfA8CI0HEmBNBnBlXyMrzU7A7WVm94PPqQ2gmqKx+WDGsnvilmcSOBJqOK1nYyAIzuAyesq3UdSK3KfWcYKD95HmfYOU3qser2CtYEUA+FpfqdNvgPBZUBhDrGONRVlQsh8rLcaUCykHG0OOUwTlLBrsh5soEMGezi1E4HRVt1icp5wZEFXdibCkG8Y8vX75sbO4E0iom9z+hjSiOfy3DhpXItpVhE+UGQdvoWjtChmrGHf4YAzKgBNnGtuJxFCeGdhUAfQLLK8kBYAP6gvFJZajMG3Xkycy8KuC0q4Eyymwtwdxdv2M0mIBtK0LKnf640j00Auq4gUkdWGlhs22qJc6dZCsL19oxnlTJG4SYVRIGpD8TPFBuM6OElbS1pldid4mGAyN6ZIupbC5bXJN9fdpbThSxLUaI8IG1XIYBxW3Tjs6KQosKcxfxcQmdnwRGM10GnFcCy2XYunLMyAkdgk4mePiczsLygthcBut6goOqS7YVFXADLjaosB6s6ofcZWAZSIRYqSUkizYwttYab3vUOQ9w2HRxIIg8WwRVeE68xi4UtL3zRphxplzwuZrcqYCq1I3jPI5dnJIygEohMbPqVJSzrwzxBJTs5zN+ReUSgxikPQVF3JVBeNQxbHENrEMNvEdFZVV9lH9+ORGEsNZQpyTNc4C3AG7XF4ngzq+DrO2zbuaaOXgdaFcdkEotoSFBVX2qJ0C8OWZeG4KGlpghA0XfTOPCqV2qqwQ26QWfF2PMLhI2w1lVAa2aPsYd0za25MQRwgcZN6uQDCi+ZxiD4XEM2kZxOT41FnZnaRlcpZouzlRqqdbQVWopQoSB58RV50lBNrHi/AwXS5LrwDVlpY3Fc3ByiYGc52Trist6kOXdwInAQtJpp5QchyaquYOV7Su+fxVMaV3dc0RE2S6mUY0gLt2pMcYqrKIQ9w2l1gpQUMtQYcmmbt5DTNxdhnUCjQqtbK9SUSzvrC0mmhhE1e2FS2+oxypy/ZASutkmtjx3vcBC24PX65nbqkBCRhfjS9kIYPnee8cMagVOhI/3T1fAmdtAWZsCswTJCkQVNa0qWKSKPOpHAUhD9DrbVcyoYkwqhvh17vYAayXLQyKGYdxlUDFp494rBXRjYgO17DDYetNIUj/ezp6S0lnlpEwsWmJMkOwsKXeZKEAjIHn0EQJISaRBcO6UMINz7p/bEjjnw4ft+xmDvksxX4G2rIris7qaeKwAFMP2Oi7n4criuZwtpSUwpfLxSnORSrIqusc5ZFaXysqRWjiZ2DyAWEIL35tVSoQElFACjOeGGSE7AHEQgdo/LSvCOgGBvkxsmDbvlS3Fp5vhaB2TAGqRKrKKMrhLVpaGzEVjZ0OQxDhaCTA+QyRR1d15aQzrJntL3RibsipjG6jlgL4yqbS0sNYg1e84vhbBVrElK64CUcWYXDfKxhpIuxiVJZUxsbMy/uRBKTNRQ4kQ3LdRYLS0rJjRPlTPqY6gdJsEDc+aQXAn+HgsNUCbRuF0Oj0zwnA7bWDkbhO5Ens00qeQhS1laBMl5M/cAaxsLF8rKyql+Tf7ELLEGu/ixiimdCvo0TjfpjKwaggen4eh5v7LokLKbLuyvHhcZG8dhGrEDx7Hg93ZppJF7qBqO3iVveXEDQNInzeoe8Yq6ePaZBZ2JviM3W2UAGotekRCAGq4EkF1X3DOnR11yRsBL1tRa0PVcZiNFXZ2c34FskvomInQQ6lzpJoZbJxk43NwKJFBquJSsrByHydxKOnTxQASBmS3j+JMnsHSla3Ec6K9VWoJVn9zfjwOM7hqYAAqJQwE2a3nA48J2QGegRkpZNivSY+ys3EkKd4oJIwsvIHl3cWgLt5k4NH6OmtLWdpurOkwEMupYc7eMtDRhOcI2ui5JhVIzXzLyto/GAPuZoyo8wkoduVgJglCt7OhGbgID4Mq4si+63zUS1FuFFXFlqyaj2emHlLMcBqYu0FMuR28BbB7lOxRMSiCQXFhCKuwkhZ+pYDiGSgbsKKV8MiSRsuHSIWM9rklRiIlZZuqXjsQK8ooYJMgq3JKWVkhHbhsVxFUzthOWPkYijcbx54IKsSdT+uLr3crGKyoYgFiGR9iBk4kfloUX+JIlQRQqabmpgnhqtpQpb6RVQ1WH5DnrS4hEoGZqaerQ2dhFbz8XePxShmDbo70eISjoorO2vK8SJXI4SUmEU4zWKDzUDtWTYw7xXlbSTEj4FRg7zKnKoGRALv0Gs9Tgc1BpCywGZRQAtqVz2xrBcAMzEpfZwFSa2G5W0QBFjSMapWAEFa3HcGN7CxDzECyIkJ97qwrqWNTWVo876PPsjPkj2wvgroM5lLZKMETKVql/CvnWVFiFa/SzJUQwkoZsr67Y6vlSRV3/2tmNTOY3vnaxYwMuoPKqdzR1w7IqHymlPxaAThfU7Ko2ZXYj4AYJHL+kNdKwRQYESTRa5fsUZ/rVC1TMTyWVyYoqNtuzaHsMyv2tvoarxdfqwYgU1axFo/cnql1FGsqK+uAROV8BX4GU8WcZTATi2q7Qcyi0O0V+GhWBMNRUkn8H1SsWVE5By3Gi0ECqUeJoBfAtDa4amkdXG37AGP5Ggeb84p7UazpoKRzdFzeQ8HkoHGxprKy/Hpm5t12p47J6xTYDEz7uINEXSuxYXvFskYAc+ySxH9sf5ftKzU6IbwVBcUGg5e5FMCEXSErZR0wGayV19woM9guPjTqJdVTqR4uE4nJnLldWVkECCZLd2VLF+xtamex7IpiriSDUpvrpn9lrwGMCHyppMH+ps6LILsuFGUj1XEOXiqbqSHPUKnClpWV68kqtURVNDY4TNaocykoYeTU5ngGEQa/S1DnnE4AeXMcKjHPAmFVjCBENaeyLVNHfr3px8xUstJ94hIpfH4HKE/eDaArK6lSyVVFbdt1gxTIVk3pppVlFXi4pEhVBTObquohU85MLXn1iahvUkHJjSCMc01tLFveVVBx0DodM6jftCu7DOtIzYxrc0qp1JGP2ayYFz2Gb6HvMrO8cnGtV6Gjm3uImSfD2GpWK6uowbZGMxFKQCo1pOMtcMXFpRst+hXGoAomF3sSTBGgTglbBKWwsQ3tZqaYSp0Z1CimRDWFcCJUPYJ00BI5FkKYNoifuQxmN88SWVXWLMaUqqqgC0BmQJR6sk3u9NCf6jYLXxAfqsYEgVLAhRY2AtgtflZNFmFyhxdrLkAdWlk4D88M2ixHyepIdhMHrG/iR1ZGtq0MGpbDbRPYOXeSY1M6Ny4ZstvGSktK+XbFPATj2D371saPEsAMXhXrsZ0km/XStkhhMyBfsa6uXFZe2VCe+YMr1+GKgwrQyNYq1VRrB+EizAow6NsdNKcyVEkYeM73ys6q4kAHp6BiFklTkIrVC5oYV7uzwOGCz4UJ0Stq2lWMJy4wtb+RetL6tZFicnJmBw5UjCvXXMZVJX2MQkbf+XN5EWd78Vz8/JEsMZTBiKNzsm1inLRUQ74H4NidaqI68j5sAFgxcRveC7ieLJXfQYxjZZ2CsiWFewZXJmBIlZ1tdtrX4hSuateKso/RZOtOKW2nmq1oTzeK6dRWAWu2NRVb4hq0SXm1GvtugHrbr5IXqmSktg5CuDE2MSlPwsY5kNE2Wp3AqiZbWVLAxiBF+2iBZbuNj6MB6rsMLC7FyasaYDyo7KkoPyEtw3pEMXfPvxAJi2jAQQgjrz0rLIZSWZlIoNhwd5xK4AR9mYNjWAaLrnuImJeBVN9zBORObVvbr+mTTfFSEJLSRnHo7hEJoIi8MFqjxmvgmF5URZz4zLFgZZ8Ctu2X7ggVccKm9gVxIsOHqxXgNMKnFWZYnf1dBnOhayXq17QwFlWW09eNKyVJFmXqaONGA5aCegMbJ3UUkGY1ic3nKWgjq8qfVYGQG1gRt6rs62a6HiqqUOqdesK5NmX4nGofJoiE1d0dF9lVVkvT1/kEEaaCoYOwFpcVcoLM+7669PxC9rWqktH0sWUYld0VCpuBZ/stVRcGgy9WX2+U1Qthi9SzAqSxzZsy+OiFzBYnySGV6Gku44rD8BCOZBV3BvD5+AKRHNwMEsB6EzHnJpkTAeiUlEGkcECeB6GDZTp5YEJTlvdrknxYjTllMkfNtXwDjM7uVjK5JXUUn43rrqpK2jytaxHW0M5G8DC8rtHMYs7KSgduVQMGTYFqFvVS6rkD3sDJ46afdYFwoq11AOKCBLhvwoUgc8IGANycR6knZrdJPdsuxnyjfd3FovTlRMdEdtOl5CMV5EHsXQBis7TOwvIDZaGj2Vnpbh7cpK63VwYEMLwqbjzyl699sawFFkF1yqjUU31HfC6sW1ZFVFuXVXVgz9keEaw0ys1lWfm+azQAQSWA+hKYVfsZjPncAcUB9oIayy/UZXRNckDGji77GsWbvBo6tPrWPqOyVkBUq+INeqpzNdYs/u0ifh5qmpqIW+33JVSUcwY70KL4U9lYdU6ljtSls7lmfi9g3YzeQfVkaGFaV3ODCnaD2N8wsEDFklE3RzM3ZghdYkWHsszq70FIecnKkVkt8ezMzRq9bkGuKojRLBVSod3Y1yPqKgYW7JRQTPVyy5xIYLjOgxgT52RKJUY1dOrIiRd4futQx/A5AcSmEjz0vFWrkLzvbWAu9HOWbGgxFk1VNTpnBKk6TgwisI/HcxYXP1uAWO72ULFlBTq+aSu2VTUs6hrxM2CF+hEor1VIA9ZmFUaab1lSSgZsVs4sxzHlVLoJHr9H4DhONTkI1XC0/wiY2NoWAG5RlnHFnq6oLccpQddMuJ/O17JVA5OHLi0BqCztq7Y1++ucCd98qLI8MIHBV/cKjxQTme3hFBS3MyCqnDsuym2o80HjvFFTtrURmNaGJsmVahImjTsUXKtQZTAVs7Mvv8/+fzUrZAXcLJ6M4koe6XP0b6SmWWNDzyUpQ8bl+LtWx4tuqZ36cRYV3yuVxPNwvIiqiQCSmu7srgTzR6nkyhpCarXwFy1vGd5iP2cY06lFr5Njhhg1Y6+NB28ftbK83s8rf7kLJbKwDFPbLg25a0AdZJEiqr5phixKMDlRUtcssq1hriLqGoH+zeNgVm9OemjsETV8JdF0NHnkIFxWY1OB4Yrp7rtWJ7NgAAAPXklEQVQ3oNs5nplyVf8u2FoLu1JrHveaZWQjqAkshtFa2gzsSG3Zpkbvg3HafF9slPPlldjFlK80Gysm8Mr4MPhneNWENPGjAIpmilTPATdTRTXlCBYHYAQuPwA36xIpWtGN4q3Y2MhiGsUpuSSnlEJRD8PorC7CFYVw+F51qThgabxsTxWzCGY0ZSsb3lfqAy0OPNjNy8xiQQKsHYFQ2HBZVvVbBuq3m1oWKajqaonsM6uZUr6CjXWNZ0l5E3h3jURma6kP3MJIiy1Lm+kahQq41N2iZja5sjtlLYNZHZrH6qUGm4vMbDp6Rw2CFmvuyFkrBcCyMtFqBaECmsHoK9BZ2LA/lJcRqSaDqnaWbrZdGaz3DLgIvBln4woGztbyJGqslwxkhhHrTjTYFXCtOoKS8uLdofVdAbOylGU6nlYpXWZts4nXBq6WxJitMNokHUJnbnJplQm+aGpY2a5GMV2QD1hRubBPFKdumf5OHkLHz0F9luE5kjBjRa0nFE5CUGqHw32MmjZ6xkgINVnSnZ1VZStK2qKlRaLlQgK7uTq7JFXJwM+3SOEKyhZNI+tJ0I5qMYy9k2qJD7dVWdqKXa0CKNR0Ccjg+B2IYu2fcBZJZkMFgM11r0X92wilghFGgzVnexlqB7xL9mS29SiYUVY2nXOZjNBRsyDsQPRWW5hrZ4XcdC4HVWRbjgJr4sFofK5SzjQ7rhI1UebdPdEbj6sqIvTZQZ5va08rABsAW0UxeWytAk7A2KJ9ZpxzCioB24XFtYAeXYxr6anSqhLgppEqWbGwLunTgrV+IjWlL29ljaAl4EQMGsErp4apeZiquwRXLXAqOCeru32mmydc6oWTSWpFAGdzeTB8RTHVMEtlM90CbbQCYhPjq3egYr1FGdYIQjiuDGZ5zZ/AzobKGOyLxti6c4Rwtv2anyWlLICnlLhxJRXt6A5ebDBWFNONbxWZ2d02mnu4S9YECpeppV1zSWRBWxHYzVIv1CXSouwqqX3jBBBDZdYQbpTQW4ZQlS8r5kH4suSRmg2++3JN10x1PaAmEkmtYlEdeGpJEM6kOuCqCR22oSujj5IV2HdT0zj5prLKTjXFAPjdQlyq7xIBxAQP5yMczG4VxAKw0n6ilZ2QBce2pLulkuxxqnoIzFfgqyqjil9S1VNwBrFmeyeops8yOjZUybZdfS8CuaTIJumzs5tODaNtLpFDQ/PcJGweLhmeL1nB0KqiUDScsiUVD89Di3HtrKtSULw3RLiygZD+7sF8JTObgYsrGvDNUFRGl1iy0Ll1YkUc2aJYMog920I8qW6YDCg1Mqk0JHJFKXkbgbRreI+qpYNOZHrVcDUba7pjsphSJNtK6upgRNAVoOS0mugBeN4bIZgHhuPZ/s1ENaX6KsVr+YNrh1Nb7ipR0PE5zbNRegCbrHRUw6Yf07dLBJl1f8KB9as2V1nNqAsl62LBBhehwalerkHmB1JFIEZKSEusdl5JQj1nJlHXSCF342gJ9CYGrXelknJIXqVP8sD+qtplCR3XH2qfKq0ygMp+KnVkKxNlZ8m2YkIlVMiCnXUwl7qznBKSvQz3m3Pt6oQbXO5b5FixCh/fHxUQW/AEcK6zCNqKQnL9sywqmKuwvqSYzT/aPVNNpVyhvRW21aqciCsjdWvBwILUvh5VyCzbWoC1pJjJ680CWsl+udKB6T5RwG1mlohnlpbg47iz5U9ha0FGtmRLFYBtO99y97Ap0z+ZDTAog6kSLZsMHg/IFkkgp6CpvU2U0cYVSdnmkjwBdOmXbxTWNWzuIbipMioVxEckZEoahSOiy2M3K0jcC1LhVDwaqG0ZvkcWqCnrG4GIxykrqlbWdw6LQyBaZR8HmLRIhQWsHswD42ZXVLNkf9l+FlW0HVQ2lwFsC/Z1FdzlQR0KaPfo+Fdfu+/dwVRICu1CGR7AEIiAhc+AZUF0kOBaPxmUqg4i64vQnU4nFDYJ9Nz+1fVXveH9qmr+kPILx8oKcRV/BFbxbE0JMT0kSD4w6L/lNY8ocsqagVdU3A3MjxhxcGuqzsPH4irpaow1q6OyrVjvp9Npc59E91LldboYVzJWdimWfAW2SNEKcDaX2FmBLLA/uKxlmhh613Is1URQApbKfttwxL02q6Onx5pQxSbPojAg+v5hAnN6LHVRDXIsvKtRjiS0qJUyZTAXVbAK82ElFJWaQdVoqUC1Unt7BVaTQudM6SuqexjQJN4+0icaxv/utbKv83ETbT8H8gjcOKxOJmbUa6OOVXht3dFY6rHv9XoNzFLceEA1o8+pKm0LAHPHZ2rYKjFq0hfZFixsqHJgD3eD5n+U0kb1mFjXkn2lvMSSOsNE/CdIAKF0Sytq6urOHUN5gwg4GZosgbmggM5ucra2qrS2Ig1cbiBBcxYzgzUDNLCvL8GbZXNp6ORy3LmS+Kk83zRIAK6A1ioKa2I9NapIuiUFdfC9766PFZUtqUr6KbWk+zZU1a/ZrIXEztrjTOfz7hwKziCeXIaraHtbZIMz+2pGgazCmw4qWAFvEdhodYp0Xq0pV7G1YWYWbO4qhGq42+Z8BYtrLWvluNPpZAeaFFS1vubPgbgxsqcpnAaszBovKaFoDQ8BGtjfUOl4NAG2nmQV04feJgumvX2fsrQEWZghL0JnVdYkn3DOZIeRN86RqPWCmsvGVqEMRnwxQAxwS8EMYo3IzmY2+BCcLp4MKiuyuhImamlbZFcNoNl7tp+RHd18ZjQIRKyXdFRhN98/hyKqwXWNo7O1wiaXoHN108REZZWEq6grnIfjzeg8jdRf1XEL4kkXa5bBjKxoKaljBjeHlVxQ4GaycpW4lDOAKtnTxHAtOfzOtZwHAM7sqVXkV6yu6kap1nHkXKqWF/4XHqjenNKqBjpR3l1ch3Ejg1+EsgdQhsdG0B4FM9sWAVWpuAyiwTPleZxt9VyZVS2qXfReWqTAilpr9ApoWTjxymit7NwV4JTriZyOA9B0k7HFfULourmKYHVnRQvqGL5HMHdqFcR2qWpmcK6eTwx2dipWrviDilr+fKWq3OWRWdHKwA4eu8wjchbeRzFilqjjZN3ufCpfkJ0/scVpnYk6L0PI77lxdWCZ87WiWm7B/AGquQSnujGKsB8CJmiJq8q1pKIVWyqOiTK66r18BN8r74/AE71fdC3yPS2MxdOpnE1tlVxD9JmVOoggN+r4PjAXVFPa3Eg5jVJGFVUGNolH20GVrUB7BOySWq6WqYQdWR92pcFMYMwckbSgCKCqD67DiiWu1g8MQC9ByfcFqW1L+jL714qNCuznoSxt0da2gtWN1G8F0BK0NN0nuimelUF9dIdAfjO44UT3CjQLoUeLHJFTO3gmpRuIIOvwBQCbqNeo3qtZ9iF6xVK13GRlo4zqimq+CGdTiR1uRY8oqgE02hZBa79kZXPMquxRHKla2saZWN4mRqZUj0vLCKhkjKnqOQHNuSZVJoKvAqS1wpEquvWDC1B2ypwrCPsRMEPVTODMLJMDv6qeKXwi2JYV5Sq4qKyvgGsHCLiuj2jR59V8gMqSJ2FJZRXEHVRHj3sFPrct6OpqlW1GpatQdt0GvwfM6n63InsGVFhJGaBqgqqIV6IsXllZgySPq4R3bnt3wi5cv+cN2yqQLW1T95KYVsWWtKk4cB9W53WQQflQYR6Wl4HaJZjvVE0D5yvq+RKgZCs5qdBEP5sD94cAvQLlSgNaSMAtHx88BuNQ41zdFsX30zKbcs0MLD/ihkpQzl0wiTqKLTfbKmCmyYICnK0IbaieC4CG9iSyLQ7cIMGQwau6TKoq60Apl3WN40LZpca1CKKK9VQyyIEn8w0F8F6CL2h8o3ixGwC7s7EWzCOqmcApYxYD4jsAzVS0sl2t98pA7vrKophCVSonbYpgH6mvSn24pTBV4sdtV3BtMq5k82y+IADvUJ0uAlkCVTxIaPm+UNu/qkV4F1TzHXCGrXIAqItBKypqK99VtAOVs64O4ObX7pHLVCpYHcRmwvLR7TvYAKBBN58LGVzDuFz+hQbWgncQyCZAk+VbsPSouf93261iZgmfCpwRbAvqmSqriU2PwhjaoOyYqtIegVXViTsmyta6bGySpY3gyRrpIyAeaWDDxtpsXwKyalMDKNP7YBXMqEskUsi2uC8FNAPxAKTVfT1o6VzM0E0jF+1rWcUuHvdyg7vgoFplX8HpvHpMCOMRUPHzZkInsqlFKNX/EIO52E0SxSzOwob2VmRLW5D1XIU0rbgM1AzWgyC7fe8G7xUAK/taEBat7luqtyP7EmsaJQOj5F+mrnZfCuYCfBUAWwShyd6pMY/vAHG1UqOYpbI/gy5T0CMKm+UO3gFuC85dgfDVeguPDfITrIBLsLrcgdh3CFgFZjaKJ4Iv3F8ANEqvuxR1tVKOgLoCa1jxboBAkj6v7j/icFbA7f4rfRnQDLRViG13i0vqBQrYVqBbADZT0ZpiHoSzvQpopKIFS3sE1HfBWlHXd0H7LnArqvougMtljHBgZnh3Eoz/BKjLML4Z2Aq0+hEJr9jaVUBbvNzCIUiroC7AWmmFw4o5AK3MtB5VypZMSFgs05JyGVwlwBqsEGAAa2ZU1CjUexXGsE4rKriilBvFzOKKo3AuAroE6QFQU3u8YpNXwS5k+1TZt5UrwouN4KiUEw+k3ZWDp1RXHNRqXb21Ts39945yZSg3VnZFNQ9CF3XeZyr5DgBXKiwCMa2MxeTDYXgP1Fsf9QNKZc0k81RJk3r6EQ3rCmBVyLL75EjZ1pIVDHoFtiOAHoB0BdTVylqBsKKKS+AeBXJVLY+CXASuGvO/Auq7GuEjDfGKg1oKa1z/dmmi9I9SUGNhl0AtfulHAawoYrnSkmNXAVuGEhrEVXvUF+A5Ct2PqNOjDetyna4CmeUolmeXLN4Aq7C5Sj10Q7yjgl+t6CNxSRHmI5X+CpwreYB3Qfdqna4q21KdBuc4GoZsn49ZOOiVinwHqK9WzjvgeweEh2AU5+vtxZ9Cd9Wqkh49V18E5oj6vVyn0RStAyGIO5edXRKd5B0VGVXq2yr3xYp+5Ut+C4QJ4P1N339pQMjRejj4vb/Dcr6rQc3O/0rjmtZpeYCBiCHfCemRbNhbK/pNUPc3wfKy5f2D7OlL3/uPhve/oU4T0F8f+VNM2vyoiv0jK+KHQfdHq+0bncz4oz73/+Y6LbKw1o/5B7eOf1Rl/0du9B9tn/9bvrf/j+v0h6ttn2tp/r/4819y4/zv5391uvzzfwDifz6phT1MPgAAAABJRU5ErkJggg==)}.sky-colorpicker .box{display:flex;padding:4px 8px}.sky-colorpicker .box .left{position:relative;padding:16px 8px}.sky-colorpicker .box .right{flex:1 1 auto;padding:12px 8px;display:flex;flex-direction:column;justify-content:center}.sky-colorpicker .hue{cursor:pointer;width:100%;height:16px;border:none;background-size:100% 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC)}.sky-colorpicker .alpha{cursor:pointer;width:100%;height:16px;border:none;margin-top:16px;background-size:100% 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwYQlZMa3gAAAWVJREFUaN7tmEGO6jAQRCsOArHgBpyAJYGjcGocxAm4A2IHpmoWE0eBH+ezmFlNvU06shJ3W6VEelWMUQAIIF9f6qZpimsA1LYtS2uF51/u27YVAFZVRUkEoGHdPV/sIcbIEIIkUdI/9Xa7neyv61+SWFUVAVCSct00TWn2fv6u3+Ecfd3tXzy/0+nEUu+SPjo/kqzrmiQpScN6v98XewfA8/lMkiLJ2WxGSUopcT6fM6U0NX9/frfbjev1WtfrlZfLhYfDQQHG/AIOlnGwjINlHCxjHCzjYJm/TJWdCwquJXseFFzGwDNNeiKMOJTO8xQdDQaeB29+K9efeLaBo9J7vdvtJj1RjFFjfiv7qv95tjx/7leSQgh93e1ffMeIp6O+YQjho/N791t1XVOSSI7N//K+4/GoxWLBx+PB5/Op5XLJ+/3OlJJWqxU3m83ovv5iGf8KjYNlHCxjHCzjYBkHy5gf5gusvQU7U37jTAAAAABJRU5ErkJggg==)}.sky-colorpicker .selected-color{width:40px;height:40px;top:16px;left:8px;position:absolute}.sky-colorpicker .selected-color-background{width:40px;height:40px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC)}.sky-colorpicker .rgba-text{width:100%;font-size:18px;padding:7px 15px 15px;display:flex}.sky-colorpicker .rgba-text input{min-width:0;padding:1px}.sky-colorpicker .rgba-text label{margin:0 0 8px}.sky-colorpicker .rgba-text sky-input-box{flex:1;margin:0 8px 0 0}.sky-colorpicker .rgba-text sky-input-box:first-child{flex:2}.sky-colorpicker .rgba-text sky-input-box:last-child{margin:0}.sky-colorpicker .hex-text{width:100%;font-size:14px;padding:4px 8px}.sky-colorpicker .hex-text .box{padding:0 24px 8px 8px}.sky-colorpicker .hex-text .box input{flex:1 1 auto;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;padding:1px}.sky-colorpicker .hex-text .box div{flex:1 1 auto;text-align:center;color:#686c73;float:left;clear:left}.sky-colorpicker-checkered-background{position:absolute;top:0;left:0;z-index:-1;height:30px;width:30px;background:linear-gradient(45deg,rgba(0,0,0,.0980392) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.0980392) 75%,rgba(0,0,0,.0980392) 0),linear-gradient(45deg,rgba(0,0,0,.0980392) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.0980392) 75%,rgba(0,0,0,.0980392) 0),white;background-repeat:repeat,repeat;background-position:0px 0,5px 5px;transform-origin:0 0 0;background-origin:padding-box,padding-box;-webkit-background-clip:border-box,border-box;background-clip:border-box,border-box;background-size:10px 10px,10px 10px;box-shadow:none;text-shadow:none;transition:none;transform:scaleX(1) scaleY(1) scaleZ(1)}.sky-theme-modern .sky-colorpicker-disabled{opacity:1}.sky-theme-modern .sky-colorpicker-button{width:40px;height:40px;border:1px solid #d2d2d2;border-radius:6px;position:relative}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled{background-color:#ededee!important;border:1px solid #d2d2d2;cursor:default}.sky-theme-modern .sky-colorpicker-button,.sky-theme-modern .sky-colorpicker-button:active{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y29sb3JwaWNrZXIgU1ZHIGxpZ2h0PC90aXRsZT4KICAgIDxnIGlkPSJjb2xvcnBpY2tlci1TVkctbGlnaHQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0zMywwIEMzNS43NjE0MjM3LC01LjA3MjY1MzEzZS0xNiAzOCwyLjIzODU3NjI1IDM4LDUgTDM4LDMzIEMzOCwzNS43NjE0MjM3IDM1Ljc2MTQyMzcsMzggMzMsMzggTDUsMzggQzIuMjM4NTc2MjUsMzggLTUuNTAwMDE1NDRlLTE2LDM1Ljc2MTQyMzcgMCwzMyBMMCw1IEMtMy4zODE3Njg3NmUtMTYsMi4yMzg1NzYyNSAyLjIzODU3NjI1LC0zLjgwOTEzMTA2ZS0xNiA1LDAgTDMzLDAgWiBNMzMsMiBMNSwyIEMzLjM0MzE0NTc1LDIgMiwzLjM0MzE0NTc1IDIsNSBMMiw1IEwyLDMzIEMyLDM0LjY1Njg1NDIgMy4zNDMxNDU3NSwzNiA1LDM2IEw1LDM2IEwyNCwzNiBDMjUuMTA0NTY5NSwzNiAyNiwzNS4xMDQ1Njk1IDI2LDM0IEwyNiwzNCBMMjYsMjggQzI2LDI2Ljg5NTQzMDUgMjYuODk1NDMwNSwyNiAyOCwyNiBMMjgsMjYgTDM0LDI2IEMzNS4xMDQ1Njk1LDI2IDM2LDI1LjEwNDU2OTUgMzYsMjQgTDM2LDI0IEwzNiw1IEMzNiwzLjM0MzE0NTc1IDM0LjY1Njg1NDIsMiAzMywyIEwzMywyIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0zMywyLjUgQzMzLjY5MDM1NTksMi41IDM0LjMxNTM1NTksMi43Nzk4MjIwMyAzNC43Njc3NjcsMy4yMzIyMzMwNSBDMzUuMjIwMTc4LDMuNjg0NjQ0MDYgMzUuNSw0LjMwOTY0NDA2IDM1LjUsNSBMMzUuNSw1IEwzNS41LDI0IEMzNS41LDI0LjQxNDIxMzYgMzUuMzMyMTA2OCwyNC43ODkyMTM2IDM1LjA2MDY2MDIsMjUuMDYwNjYwMiBDMzQuNzg5MjEzNiwyNS4zMzIxMDY4IDM0LjQxNDIxMzYsMjUuNSAzNCwyNS41IEwzNCwyNS41IEwyOCwyNS41IEMyNy4zMDk2NDQxLDI1LjUgMjYuNjg0NjQ0MSwyNS43Nzk4MjIgMjYuMjMyMjMzLDI2LjIzMjIzMyBDMjUuNzc5ODIyLDI2LjY4NDY0NDEgMjUuNSwyNy4zMDk2NDQxIDI1LjUsMjggTDI1LjUsMjggTDI1LjUsMzQgQzI1LjUsMzQuNDE0MjEzNiAyNS4zMzIxMDY4LDM0Ljc4OTIxMzYgMjUuMDYwNjYwMiwzNS4wNjA2NjAyIEMyNC43ODkyMTM2LDM1LjMzMjEwNjggMjQuNDE0MjEzNiwzNS41IDI0LDM1LjUgTDI0LDM1LjUgTDUsMzUuNSBDNC4zMDk2NDQwNiwzNS41IDMuNjg0NjQ0MDYsMzUuMjIwMTc4IDMuMjMyMjMzMDUsMzQuNzY3NzY3IEMyLjc3OTgyMjAzLDM0LjMxNTM1NTkgMi41LDMzLjY5MDM1NTkgMi41LDMzIEwyLjUsMzMgTDIuNSw1IEMyLjUsNC4zMDk2NDQwNiAyLjc3OTgyMjAzLDMuNjg0NjQ0MDYgMy4yMzIyMzMwNSwzLjIzMjIzMzA1IEMzLjY4NDY0NDA2LDIuNzc5ODIyMDMgNC4zMDk2NDQwNiwyLjUgNSwyLjUgTDUsMi41IFoiIGlkPSJQYXRoLUNvcHktNSIgc3Ryb2tlPSIjRDJEMkQyIiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+)}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled,.sky-theme-modern .sky-colorpicker-button:active.sky-colorpicker-button-disabled{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y29sb3JwaWNrZXIgU1ZHIGxpZ2h0PC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJjb2xvcnBpY2tlci1TVkctbGlnaHQiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMywwIEMzNS43NjE0MjM3LDAgMzgsMi4yMzg1NzYyNSAzOCw1IEwzOCwzMyBDMzgsMzUuNzYxNDIzNyAzNS43NjE0MjM3LDM4IDMzLDM4IEw1LDM4IEMyLjIzODU3NjI1LDM4IDAsMzUuNzYxNDIzNyAwLDMzIEwwLDUgQzAsMi4yMzg1NzYyNSAyLjIzODU3NjI1LDAgNSwwIEwzMywwIFogTTMzLDIgTDUsMiBDMy4zNDMxNDU3NSwyIDIsMy4zNDMxNDU3NSAyLDUgTDIsNSBMMiwzMyBDMiwzNC42NTY4NTQyIDMuMzQzMTQ1NzUsMzYgNSwzNiBMNSwzNiBMMjQsMzYgQzI1LjEwNDU2OTUsMzYgMjYsMzUuMTA0NTY5NSAyNiwzNCBMMjYsMzQgTDI2LDI4IEMyNiwyNi44OTU0MzA1IDI2Ljg5NTQzMDUsMjYgMjgsMjYgTDI4LDI2IEwzNCwyNiBDMzUuMTA0NTY5NSwyNiAzNiwyNS4xMDQ1Njk1IDM2LDI0IEwzNiwyNCBMMzYsNSBDMzYsMy4zNDMxNDU3NSAzNC42NTY4NTQyLDIgMzMsMiBMMzMsMiBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNFREVERUUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTMzLDIuNSBDMzMuNjkwMzU1OSwyLjUgMzQuMzE1MzU1OSwyLjc3OTgyMjAzIDM0Ljc2Nzc2NywzLjIzMjIzMzA1IEMzNS4yMjAxNzgsMy42ODQ2NDQwNiAzNS41LDQuMzA5NjQ0MDYgMzUuNSw1IEwzNS41LDUgTDM1LjUsMjQgQzM1LjUsMjQuNDE0MjEzNiAzNS4zMzIxMDY4LDI0Ljc4OTIxMzYgMzUuMDYwNjYwMiwyNS4wNjA2NjAyIEMzNC43ODkyMTM2LDI1LjMzMjEwNjggMzQuNDE0MjEzNiwyNS41IDM0LDI1LjUgTDM0LDI1LjUgTDI4LDI1LjUgQzI3LjMwOTY0NDEsMjUuNSAyNi42ODQ2NDQxLDI1Ljc3OTgyMiAyNi4yMzIyMzMsMjYuMjMyMjMzIEMyNS43Nzk4MjIsMjYuNjg0NjQ0MSAyNS41LDI3LjMwOTY0NDEgMjUuNSwyOCBMMjUuNSwyOCBMMjUuNSwzNCBDMjUuNSwzNC40MTQyMTM2IDI1LjMzMjEwNjgsMzQuNzg5MjEzNiAyNS4wNjA2NjAyLDM1LjA2MDY2MDIgQzI0Ljc4OTIxMzYsMzUuMzMyMTA2OCAyNC40MTQyMTM2LDM1LjUgMjQsMzUuNSBMMjQsMzUuNSBMNSwzNS41IEM0LjMwOTY0NDA2LDM1LjUgMy42ODQ2NDQwNiwzNS4yMjAxNzggMy4yMzIyMzMwNSwzNC43Njc3NjcgQzIuNzc5ODIyMDMsMzQuMzE1MzU1OSAyLjUsMzMuNjkwMzU1OSAyLjUsMzMgTDIuNSwzMyBMMi41LDUgQzIuNSw0LjMwOTY0NDA2IDIuNzc5ODIyMDMsMy42ODQ2NDQwNiAzLjIzMjIzMzA1LDMuMjMyMjMzMDUgQzMuNjg0NjQ0MDYsMi43Nzk4MjIwMyA0LjMwOTY0NDA2LDIuNSA1LDIuNSBMNSwyLjUgTDMzLDIuNSBaIiBpZD0iUGF0aC1Db3B5LTUiIHN0cm9rZT0iI0QyRDJEMiIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.sky-theme-modern .sky-colorpicker-button:focus{box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d;outline:none;text-decoration:none}.sky-theme-modern .sky-colorpicker-button:hover{box-shadow:inset 0 0 0 1px #1870b8;outline:none;text-decoration:none}.sky-theme-modern .sky-colorpicker-button:hover.sky-colorpicker-button-disabled{box-shadow:none}.sky-theme-modern .sky-colorpicker-checkered-background{border-radius:6px;width:40px;height:40px}.sky-theme-modern .sky-colorpicker-button-modern-chevron{position:absolute;bottom:0;right:2px;font-size:10px}.sky-theme-modern .sky-colorpicker-button-modern-chevron.sky-colorpicker-button-modern-chevron-disabled{color:#686c73}.sky-theme-modern .sky-colorpicker-reset-button-modern{width:40px;height:40px}.sky-theme-modern .sky-colorpicker-reset-button-modern.sky-colorpicker-reset-button-disabled{background-color:#ededee;border:0px solid #d2d2d2;color:#686c73}.sky-theme-modern .sky-colorpicker{background-color:transparent;width:310px}.sky-theme-modern .sky-colorpicker .saturation-lightness{height:170px}.sky-theme-modern .sky-colorpicker-container{background-color:#fff;border-radius:0 0 6px 6px}.sky-theme-modern .sky-colorpicker-footer{background:none;border:none;border-radius:0 0 6px 6px;padding:10px 10px 15px}.sky-theme-modern .selected-color{height:46px;width:46px;top:0;left:0}.sky-theme-modern .selected-color-background{height:46px;width:46px}.sky-theme-modern input{text-align:left}.sky-theme-modern .box{padding:15px 30px}.sky-theme-modern .box .left{padding:0 30px 0 0}.sky-theme-modern .box .right{padding:0}.sky-theme-modern .alpha{margin-top:10px}.sky-theme-modern .rgba-text{padding:0 10px;display:flex;justify-content:space-between;flex-wrap:wrap}.sky-theme-modern .rgba-text sky-input-box:first-child{width:100%;flex:0 1 auto;margin:0 0 10px}.sky-theme-modern .rgba-text sky-input-box:not(:first-child){flex:1;margin:0 10px 10px 0}.sky-theme-modern .rgba-text sky-input-box:last-child{margin:0 0 10px}.sky-theme-modern .sky-colorpicker-preset-color-area{padding:10px 10px 15px}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn{height:46px;width:46px;border-radius:4px;margin:0 15px 15px 0}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:active),.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:hover),.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:focus){border:1px solid #d2d2d2}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:nth-child(5n){margin:0 0 15px}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i5__namespace.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i3__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: ["skyColorpickerSlider", "color", "xAxis", "yAxis"], outputs: ["newColorContrast"] }, { type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: ["skyColorpickerText", "color", "maxRange"], outputs: ["newColorContrast"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe, "slice": i6__namespace.SlicePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerComponent, decorators: [{
+        ], viewQueries: [{ propertyName: "colorpickerTemplateRef", first: true, predicate: ["colorpickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "colorpickerRef", first: true, predicate: ["colorpickerRef"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-input-group\"\n  [ngClass]=\"{\n    'sky-colorpicker-hidden': !isVisible,\n    'sky-colorpicker-disabled': disabled\n  }\"\n>\n  <div\n    [hidden]=\"true\"\n  >\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    aria-haspopup=\"dialog\"\n    class=\"sky-colorpicker-button\"\n    type=\"button\"\n    [attr.aria-controls]=\"isOpen ? colorpickerId : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label || (labelledBy ? null : ('skyux_colorpicker_dropdown_button' | skyLibResources))\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.id]=\"triggerButtonId\"\n    [attr.title]=\"label || (labelledBy ? null : ('skyux_colorpicker_dropdown_button' | skyLibResources))\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-sm': 'modern'\n    }\"\n    [style.background-color]=\"backgroundColorForDisplay\"\n    (click)=\"onTriggerButtonClick()\"\n    #triggerButtonRef\n  >\n    <sky-icon *ngIf=\"pickerButtonIcon\"\n      class=\"sky-colorpicker-button-icon\"\n      [icon]=\"pickerButtonIcon\"\n      [iconType]=\"pickerButtonIconType\"\n      [size]=\"'1x'\"\n      [style.color]=\"iconColor\"\n    >\n    </sky-icon>\n    <ng-container *skyThemeIf=\"'modern'\">\n      <sky-icon\n        class=\"sky-colorpicker-button-modern-chevron\"\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n        size=\"xs\"\n        [ngClass]=\"{\n          'sky-colorpicker-button-modern-chevron-disabled': disabled\n        }\"\n      >\n      </sky-icon>\n    </ng-container>\n  </button>\n\n  <ng-template #colorpickerTemplateRef>\n    <div\n      class=\"sky-colorpicker-container\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"triggerButtonId\"\n      [attr.id]=\"colorpickerId\"\n      [hidden]=\"!isPickerVisible\"\n      [skyThemeClass]=\"{\n        'sky-shadow' : 'default',\n        'sky-elevation-4' : 'modern'\n      }\"\n      #colorpickerRef\n    >\n      <div\n        class=\"sky-colorpicker\"\n      >\n        <div\n          class=\"saturation-lightness\"\n          [color]=\"slider.saturation - slider.value\"\n          [skyColorpickerSlider]\n          [style.background-color]=\"hueSliderColor\"\n          [xAxis]=\"1\"\n          [yAxis]=\"1\"\n          (newColorContrast)=\"saturationAndLightness=$event\"\n        >\n          <div\n            class=\"cursor sky-rounded-circle\"\n            [style.left.px]=\"slider.saturation\"\n            [style.top.px]=\"slider.value\"\n          ></div>\n        </div>\n\n        <div\n          class=\"box\"\n        >\n          <div\n            class=\"left\"\n          >\n            <div\n              class=\"selected-color-background sky-rounded-circle\"\n            ></div>\n            <div\n              class=\"selected-color sky-rounded-circle\"\n              [style.background-color]=\"selectedColor?.rgbaText\"\n            ></div>\n          </div>\n          <div\n            class=\"right\"\n          >\n            <div\n              class=\"hue\"\n              [skyColorpickerSlider]\n              [xAxis]=\"1\"\n              (newColorContrast)=\"hue=$event\"\n              #hueSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.hue\"\n              ></div>\n            </div>\n            <div *ngIf=\"this.allowTransparency\"\n              class=\"alpha\"\n              [skyColorpickerSlider]\n              [style.background-color]=\"alphaSliderColor\"\n              [xAxis]=\"1\"\n              (newColorContrast)=\"alphaAxis=$event\"\n              #alphaSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.alpha\"\n              ></div>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"rgba-text\"\n        >\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_hex' | skyLibResources\"\n              [attr.for]=\"skyColorpickerHexId\"\n            >\n              {{ 'skyux_colorpicker_hex' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              pattern=\"^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\n              [attr.id]=\"skyColorpickerHexId\"\n              [skyColorpickerText]\n              [value]=\"hexText\"\n              (newColorContrast)=\"hex=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_red' | skyLibResources\"\n              [attr.for]=\"skyColorpickerRedId\"\n            >\n              {{ 'skyux_colorpicker_red' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerRedId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.red\"\n              (newColorContrast)=\"red=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_green' | skyLibResources\"\n              [attr.for]=\"skyColorpickerGreenId\"\n            >\n              {{ 'skyux_colorpicker_green' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerGreenId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.green\"\n              (newColorContrast)=\"green=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_blue' | skyLibResources\"\n              [attr.for]=\"skyColorpickerBlueId\"\n            >\n              {{ 'skyux_colorpicker_blue' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerBlueId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.blue\"\n              (newColorContrast)=\"blue=$event\"\n            />\n          </sky-input-box>\n          <sky-input-box *ngIf=\"this.allowTransparency\">\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_alpha' | skyLibResources\"\n              [attr.for]=\"skyColorpickerAlphaId\"\n            >\n              {{ 'skyux_colorpicker_alpha' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"1\"\n              min=\"0\"\n              pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n              step=\"0.1\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerAlphaId\"\n              [maxRange]=\"1\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.alpha\"\n              (newColorContrast)=\"alphaColor=$event\"\n            />\n          </sky-input-box>\n        </div>\n        <div *ngIf=\"presetColors && presetColors.length\"\n          class=\"sky-colorpicker-preset-color-area\"\n        >\n          <button *ngFor=\"let color of presetColors | slice:0:12; let i = index;\"\n            type=\"button\"\n            [attr.aria-label]=\"('skyux_colorpicker_preset_color' | skyLibResources) + ' ' + color\"\n            [skyThemeClass]=\"{\n              'sky-preset-color': 'default',\n              'sky-btn sky-btn-link': 'modern'\n            }\"\n            [style.backgroundColor]=\"color\"\n            (click)=\"onPresetClick(color)\"\n          ></button>\n        </div>\n      </div>\n\n      <div\n        class=\"sky-colorpicker-footer\"\n        [skyThemeClass]=\"{\n          'sky-padding-even-large': 'default'\n        }\"\n      >\n        <section\n          class=\"sky-colorpicker-column\"\n        >\n          <button\n            class=\"sky-btn sky-btn-primary sky-btn-colorpicker-apply\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_apply' | skyLibResources\"\n            [skyThemeClass]=\"{ 'sky-margin-inline-sm' : 'modern' }\"\n            (click)=\"onApplyColorClick()\"\n          >\n            {{ 'skyux_colorpicker_apply' | skyLibResources }}\n          </button>\n          <button\n            class=\"sky-btn sky-btn-link sky-btn-colorpicker-close\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_close' | skyLibResources\"\n            (click)=\"onCancelClick()\"\n          >\n            {{ 'skyux_colorpicker_close' | skyLibResources }}\n          </button>\n        </section>\n      </div>\n    </div>\n  </ng-template>\n  <span *ngIf=\"allowTransparency\"\n    aria-hidden=\"true\"\n    class=\"sky-colorpicker-checkered-background\"\n  >\n  </span>\n\n  <button *ngIf=\"showResetButton\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_colorpicker_reset' | skyLibResources\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-reset-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-colorpicker-reset-button': 'default',\n      'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern': 'modern'\n    }\"\n    (click)=\"onResetClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\"\n      icon=\"times\"\n      size=\"sm\"\n    >\n    </sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\"\n      icon=\"trash\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [".sky-colorpicker-container{position:fixed}.sky-colorpicker-button{width:30px;height:30px;border:0;cursor:pointer}.sky-colorpicker-button.sky-colorpicker-button-disabled{cursor:default}.sky-colorpicker-button .sky-colorpicker-button-icon{position:relative;bottom:2px;font-size:12px}.sky-colorpicker-disabled{opacity:.65;cursor:default}.sky-colorpicker-button,.sky-colorpicker-button:active{background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%200h30v30H0V0zm14.5%204H4v22h14v-8h8V4H14.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22%23FFF%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20stroke%3D%22%23CCC%22%20d%3D%22M.5.5v29h29V.5H.5zm18%2018v8h-15v-23h23v15h-8z%22%2F%3E%3Cpath%20fill%3D%22%23292A2B%22%20d%3D%22M23.5%2025L21%2022h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)}.sky-colorpicker-hidden{width:0px;height:0px;overflow:hidden}.sky-colorpicker-reset-button{background-color:#fff;margin-left:5px;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #cdcfd2;width:30px;height:30px;cursor:pointer;color:#686c73}.sky-colorpicker-reset-button:hover{color:#383a3d}.sky-colorpicker-reset-button.sky-colorpicker-reset-button-disabled{color:#686c73;cursor:default}.sky-colorpicker-footer{background-color:#fff;border-top:1px solid #e2e3e4}.sky-colorpicker *{box-sizing:border-box;margin:0}.sky-colorpicker{cursor:default;width:270px;height:auto;background-color:#fff;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-colorpicker i{cursor:default;position:relative}.sky-colorpicker input{text-align:center;font-size:14px;height:26px;color:#212327}.sky-colorpicker input:invalid{box-shadow:none}.sky-colorpicker input:-moz-submit-invalid{box-shadow:none}.sky-colorpicker input:-moz-ui-invalid{box-shadow:none}.sky-colorpicker input::-webkit-inner-spin-button,.sky-colorpicker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sky-colorpicker input[type=number].sky-form-control{-moz-appearance:textfield!important}.sky-colorpicker .button-area{padding:0 15px 15px;text-align:right}.sky-colorpicker .sky-colorpicker-preset-color-area{padding-left:9px;padding-right:9px;padding-bottom:15px;display:flex;flex-direction:row;flex-wrap:wrap}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color{cursor:pointer;width:32px;height:32px;margin:5px;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:hover{cursor:pointer;border:#ffffff solid 2px;margin:4px;width:34px;height:34px;box-shadow:0 0 0 1px #cdcfd2,0 0 0 2px #e2e3e4}.sky-colorpicker .arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.sky-colorpicker div.cursor-sv{cursor:default;position:relative;width:14px;height:14px;border-top:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2}.sky-colorpicker div.cursor{cursor:default;position:relative;width:17px;height:17px;border:#686c73 solid 2px}.sky-colorpicker .saturation-lightness{cursor:pointer;width:100%;height:170px;border:none;background-size:100% 100%;background-image:url(data:image/png;base64,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)}.sky-colorpicker .box{display:flex;padding:4px 8px}.sky-colorpicker .box .left{position:relative;padding:16px 8px}.sky-colorpicker .box .right{flex:1 1 auto;padding:12px 8px;display:flex;flex-direction:column;justify-content:center}.sky-colorpicker .hue{cursor:pointer;width:100%;height:16px;border:none;background-size:100% 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC)}.sky-colorpicker .alpha{cursor:pointer;width:100%;height:16px;border:none;margin-top:16px;background-size:100% 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwYQlZMa3gAAAWVJREFUaN7tmEGO6jAQRCsOArHgBpyAJYGjcGocxAm4A2IHpmoWE0eBH+ezmFlNvU06shJ3W6VEelWMUQAIIF9f6qZpimsA1LYtS2uF51/u27YVAFZVRUkEoGHdPV/sIcbIEIIkUdI/9Xa7neyv61+SWFUVAVCSct00TWn2fv6u3+Ecfd3tXzy/0+nEUu+SPjo/kqzrmiQpScN6v98XewfA8/lMkiLJ2WxGSUopcT6fM6U0NX9/frfbjev1WtfrlZfLhYfDQQHG/AIOlnGwjINlHCxjHCzjYJm/TJWdCwquJXseFFzGwDNNeiKMOJTO8xQdDQaeB29+K9efeLaBo9J7vdvtJj1RjFFjfiv7qv95tjx/7leSQgh93e1ffMeIp6O+YQjho/N791t1XVOSSI7N//K+4/GoxWLBx+PB5/Op5XLJ+/3OlJJWqxU3m83ovv5iGf8KjYNlHCxjHCzjYBkHy5gf5gusvQU7U37jTAAAAABJRU5ErkJggg==)}.sky-colorpicker .selected-color{width:40px;height:40px;top:16px;left:8px;position:absolute}.sky-colorpicker .selected-color-background{width:40px;height:40px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC)}.sky-colorpicker .rgba-text{width:100%;font-size:18px;padding:7px 15px 15px;display:flex}.sky-colorpicker .rgba-text input{min-width:0;padding:1px}.sky-colorpicker .rgba-text label{margin:0 0 8px}.sky-colorpicker .rgba-text sky-input-box{flex:1;margin:0 8px 0 0}.sky-colorpicker .rgba-text sky-input-box:first-child{flex:2}.sky-colorpicker .rgba-text sky-input-box:last-child{margin:0}.sky-colorpicker .hex-text{width:100%;font-size:14px;padding:4px 8px}.sky-colorpicker .hex-text .box{padding:0 24px 8px 8px}.sky-colorpicker .hex-text .box input{flex:1 1 auto;border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;padding:1px}.sky-colorpicker .hex-text .box div{flex:1 1 auto;text-align:center;color:#686c73;float:left;clear:left}.sky-colorpicker-checkered-background{position:absolute;top:0;left:0;z-index:-1;height:30px;width:30px;background:linear-gradient(45deg,rgba(0,0,0,.0980392) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.0980392) 75%,rgba(0,0,0,.0980392) 0),linear-gradient(45deg,rgba(0,0,0,.0980392) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.0980392) 75%,rgba(0,0,0,.0980392) 0),white;background-repeat:repeat,repeat;background-position:0px 0,5px 5px;transform-origin:0 0 0;background-origin:padding-box,padding-box;-webkit-background-clip:border-box,border-box;background-clip:border-box,border-box;background-size:10px 10px,10px 10px;box-shadow:none;text-shadow:none;transition:none;transform:scaleX(1) scaleY(1) scaleZ(1)}.sky-theme-modern .sky-colorpicker-disabled{opacity:1}.sky-theme-modern .sky-colorpicker-button{width:40px;height:40px;border:1px solid #d2d2d2;border-radius:6px;position:relative}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled{background-color:#ededee!important;border:1px solid #d2d2d2;cursor:default}.sky-theme-modern .sky-colorpicker-button .sky-colorpicker-button-icon{bottom:1px;font-size:16px}.sky-theme-modern .sky-colorpicker-button,.sky-theme-modern .sky-colorpicker-button:active{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y29sb3JwaWNrZXIgU1ZHIGxpZ2h0PC90aXRsZT4KICAgIDxnIGlkPSJjb2xvcnBpY2tlci1TVkctbGlnaHQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0zMywwIEMzNS43NjE0MjM3LC01LjA3MjY1MzEzZS0xNiAzOCwyLjIzODU3NjI1IDM4LDUgTDM4LDMzIEMzOCwzNS43NjE0MjM3IDM1Ljc2MTQyMzcsMzggMzMsMzggTDUsMzggQzIuMjM4NTc2MjUsMzggLTUuNTAwMDE1NDRlLTE2LDM1Ljc2MTQyMzcgMCwzMyBMMCw1IEMtMy4zODE3Njg3NmUtMTYsMi4yMzg1NzYyNSAyLjIzODU3NjI1LC0zLjgwOTEzMTA2ZS0xNiA1LDAgTDMzLDAgWiBNMzMsMiBMNSwyIEMzLjM0MzE0NTc1LDIgMiwzLjM0MzE0NTc1IDIsNSBMMiw1IEwyLDMzIEMyLDM0LjY1Njg1NDIgMy4zNDMxNDU3NSwzNiA1LDM2IEw1LDM2IEwyNCwzNiBDMjUuMTA0NTY5NSwzNiAyNiwzNS4xMDQ1Njk1IDI2LDM0IEwyNiwzNCBMMjYsMjggQzI2LDI2Ljg5NTQzMDUgMjYuODk1NDMwNSwyNiAyOCwyNiBMMjgsMjYgTDM0LDI2IEMzNS4xMDQ1Njk1LDI2IDM2LDI1LjEwNDU2OTUgMzYsMjQgTDM2LDI0IEwzNiw1IEMzNiwzLjM0MzE0NTc1IDM0LjY1Njg1NDIsMiAzMywyIEwzMywyIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0zMywyLjUgQzMzLjY5MDM1NTksMi41IDM0LjMxNTM1NTksMi43Nzk4MjIwMyAzNC43Njc3NjcsMy4yMzIyMzMwNSBDMzUuMjIwMTc4LDMuNjg0NjQ0MDYgMzUuNSw0LjMwOTY0NDA2IDM1LjUsNSBMMzUuNSw1IEwzNS41LDI0IEMzNS41LDI0LjQxNDIxMzYgMzUuMzMyMTA2OCwyNC43ODkyMTM2IDM1LjA2MDY2MDIsMjUuMDYwNjYwMiBDMzQuNzg5MjEzNiwyNS4zMzIxMDY4IDM0LjQxNDIxMzYsMjUuNSAzNCwyNS41IEwzNCwyNS41IEwyOCwyNS41IEMyNy4zMDk2NDQxLDI1LjUgMjYuNjg0NjQ0MSwyNS43Nzk4MjIgMjYuMjMyMjMzLDI2LjIzMjIzMyBDMjUuNzc5ODIyLDI2LjY4NDY0NDEgMjUuNSwyNy4zMDk2NDQxIDI1LjUsMjggTDI1LjUsMjggTDI1LjUsMzQgQzI1LjUsMzQuNDE0MjEzNiAyNS4zMzIxMDY4LDM0Ljc4OTIxMzYgMjUuMDYwNjYwMiwzNS4wNjA2NjAyIEMyNC43ODkyMTM2LDM1LjMzMjEwNjggMjQuNDE0MjEzNiwzNS41IDI0LDM1LjUgTDI0LDM1LjUgTDUsMzUuNSBDNC4zMDk2NDQwNiwzNS41IDMuNjg0NjQ0MDYsMzUuMjIwMTc4IDMuMjMyMjMzMDUsMzQuNzY3NzY3IEMyLjc3OTgyMjAzLDM0LjMxNTM1NTkgMi41LDMzLjY5MDM1NTkgMi41LDMzIEwyLjUsMzMgTDIuNSw1IEMyLjUsNC4zMDk2NDQwNiAyLjc3OTgyMjAzLDMuNjg0NjQ0MDYgMy4yMzIyMzMwNSwzLjIzMjIzMzA1IEMzLjY4NDY0NDA2LDIuNzc5ODIyMDMgNC4zMDk2NDQwNiwyLjUgNSwyLjUgTDUsMi41IFoiIGlkPSJQYXRoLUNvcHktNSIgc3Ryb2tlPSIjRDJEMkQyIiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+)}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled,.sky-theme-modern .sky-colorpicker-button:active.sky-colorpicker-button-disabled{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y29sb3JwaWNrZXIgU1ZHIGxpZ2h0PC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJjb2xvcnBpY2tlci1TVkctbGlnaHQiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMywwIEMzNS43NjE0MjM3LDAgMzgsMi4yMzg1NzYyNSAzOCw1IEwzOCwzMyBDMzgsMzUuNzYxNDIzNyAzNS43NjE0MjM3LDM4IDMzLDM4IEw1LDM4IEMyLjIzODU3NjI1LDM4IDAsMzUuNzYxNDIzNyAwLDMzIEwwLDUgQzAsMi4yMzg1NzYyNSAyLjIzODU3NjI1LDAgNSwwIEwzMywwIFogTTMzLDIgTDUsMiBDMy4zNDMxNDU3NSwyIDIsMy4zNDMxNDU3NSAyLDUgTDIsNSBMMiwzMyBDMiwzNC42NTY4NTQyIDMuMzQzMTQ1NzUsMzYgNSwzNiBMNSwzNiBMMjQsMzYgQzI1LjEwNDU2OTUsMzYgMjYsMzUuMTA0NTY5NSAyNiwzNCBMMjYsMzQgTDI2LDI4IEMyNiwyNi44OTU0MzA1IDI2Ljg5NTQzMDUsMjYgMjgsMjYgTDI4LDI2IEwzNCwyNiBDMzUuMTA0NTY5NSwyNiAzNiwyNS4xMDQ1Njk1IDM2LDI0IEwzNiwyNCBMMzYsNSBDMzYsMy4zNDMxNDU3NSAzNC42NTY4NTQyLDIgMzMsMiBMMzMsMiBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNFREVERUUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTMzLDIuNSBDMzMuNjkwMzU1OSwyLjUgMzQuMzE1MzU1OSwyLjc3OTgyMjAzIDM0Ljc2Nzc2NywzLjIzMjIzMzA1IEMzNS4yMjAxNzgsMy42ODQ2NDQwNiAzNS41LDQuMzA5NjQ0MDYgMzUuNSw1IEwzNS41LDUgTDM1LjUsMjQgQzM1LjUsMjQuNDE0MjEzNiAzNS4zMzIxMDY4LDI0Ljc4OTIxMzYgMzUuMDYwNjYwMiwyNS4wNjA2NjAyIEMzNC43ODkyMTM2LDI1LjMzMjEwNjggMzQuNDE0MjEzNiwyNS41IDM0LDI1LjUgTDM0LDI1LjUgTDI4LDI1LjUgQzI3LjMwOTY0NDEsMjUuNSAyNi42ODQ2NDQxLDI1Ljc3OTgyMiAyNi4yMzIyMzMsMjYuMjMyMjMzIEMyNS43Nzk4MjIsMjYuNjg0NjQ0MSAyNS41LDI3LjMwOTY0NDEgMjUuNSwyOCBMMjUuNSwyOCBMMjUuNSwzNCBDMjUuNSwzNC40MTQyMTM2IDI1LjMzMjEwNjgsMzQuNzg5MjEzNiAyNS4wNjA2NjAyLDM1LjA2MDY2MDIgQzI0Ljc4OTIxMzYsMzUuMzMyMTA2OCAyNC40MTQyMTM2LDM1LjUgMjQsMzUuNSBMMjQsMzUuNSBMNSwzNS41IEM0LjMwOTY0NDA2LDM1LjUgMy42ODQ2NDQwNiwzNS4yMjAxNzggMy4yMzIyMzMwNSwzNC43Njc3NjcgQzIuNzc5ODIyMDMsMzQuMzE1MzU1OSAyLjUsMzMuNjkwMzU1OSAyLjUsMzMgTDIuNSwzMyBMMi41LDUgQzIuNSw0LjMwOTY0NDA2IDIuNzc5ODIyMDMsMy42ODQ2NDQwNiAzLjIzMjIzMzA1LDMuMjMyMjMzMDUgQzMuNjg0NjQ0MDYsMi43Nzk4MjIwMyA0LjMwOTY0NDA2LDIuNSA1LDIuNSBMNSwyLjUgTDMzLDIuNSBaIiBpZD0iUGF0aC1Db3B5LTUiIHN0cm9rZT0iI0QyRDJEMiIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.sky-theme-modern .sky-colorpicker-button:focus{box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d;outline:none;text-decoration:none}.sky-theme-modern .sky-colorpicker-button:hover{box-shadow:inset 0 0 0 1px #1870b8;outline:none;text-decoration:none}.sky-theme-modern .sky-colorpicker-button:hover.sky-colorpicker-button-disabled{box-shadow:none}.sky-theme-modern .sky-colorpicker-checkered-background{border-radius:6px;width:40px;height:40px}.sky-theme-modern .sky-colorpicker-button-modern-chevron{position:absolute;bottom:0;right:2px;font-size:10px}.sky-theme-modern .sky-colorpicker-button-modern-chevron.sky-colorpicker-button-modern-chevron-disabled{color:#686c73}.sky-theme-modern .sky-colorpicker-reset-button-modern{width:40px;height:40px}.sky-theme-modern .sky-colorpicker-reset-button-modern.sky-colorpicker-reset-button-disabled{background-color:#ededee;border:0px solid #d2d2d2;color:#686c73}.sky-theme-modern .sky-colorpicker{background-color:transparent;width:310px}.sky-theme-modern .sky-colorpicker .saturation-lightness{height:170px}.sky-theme-modern .sky-colorpicker-container{background-color:#fff;border-radius:0 0 6px 6px}.sky-theme-modern .sky-colorpicker-footer{background:none;border:none;border-radius:0 0 6px 6px;padding:10px 10px 15px}.sky-theme-modern .selected-color{height:46px;width:46px;top:0;left:0}.sky-theme-modern .selected-color-background{height:46px;width:46px}.sky-theme-modern input{text-align:left}.sky-theme-modern .box{padding:15px 30px}.sky-theme-modern .box .left{padding:0 30px 0 0}.sky-theme-modern .box .right{padding:0}.sky-theme-modern .alpha{margin-top:10px}.sky-theme-modern .rgba-text{padding:0 10px;display:flex;justify-content:space-between;flex-wrap:wrap}.sky-theme-modern .rgba-text sky-input-box:first-child{width:100%;flex:0 1 auto;margin:0 0 10px}.sky-theme-modern .rgba-text sky-input-box:not(:first-child){flex:1;margin:0 10px 10px 0}.sky-theme-modern .rgba-text sky-input-box:last-child{margin:0 0 10px}.sky-theme-modern .sky-colorpicker-preset-color-area{padding:10px 10px 15px}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn{height:46px;width:46px;border-radius:4px;margin:0 15px 15px 0}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:active),.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:hover),.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:not(:focus){border:1px solid #d2d2d2}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:nth-child(5n){margin:0 0 15px}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i5__namespace.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: ["skyColorpickerSlider", "color", "xAxis", "yAxis"], outputs: ["newColorContrast"] }, { type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: ["skyColorpickerText", "color", "maxRange"], outputs: ["newColorContrast"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe, "slice": i6__namespace.SlicePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-colorpicker',
@@ -990,7 +1014,11 @@
             return [{ type: i1__namespace.SkyAffixService }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyOverlayService }, { type: SkyColorpickerService }, { type: i3__namespace.SkyThemeService, decorators: [{
                             type: i0.Optional
                         }] }];
-        }, propDecorators: { label: [{
+        }, propDecorators: { pickerButtonIcon: [{
+                    type: i0.Input
+                }], pickerButtonIconType: [{
+                    type: i0.Input
+                }], label: [{
                     type: i0.Input
                 }], labelledBy: [{
                     type: i0.Input
@@ -1236,12 +1264,12 @@
         };
         return SkyColorpickerInputDirective;
     }());
-    SkyColorpickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", 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: [
+    SkyColorpickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", 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.7", ngImport: i0__namespace, type: SkyColorpickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyColorpickerInput]',
@@ -1280,8 +1308,8 @@
         }
         return SkyColorpickerModule;
     }());
-    SkyColorpickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyColorpickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerModule, declarations: [SkyColorpickerComponent,
+    SkyColorpickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyColorpickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerModule, declarations: [SkyColorpickerComponent,
             SkyColorpickerInputDirective,
             SkyColorpickerTextDirective,
             SkyColorpickerSliderDirective], imports: [i6.CommonModule,
@@ -1293,7 +1321,7 @@
             i1.SkyOverlayModule,
             i3.SkyThemeModule], exports: [SkyColorpickerComponent,
             SkyColorpickerInputDirective] });
-    SkyColorpickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerModule, imports: [[
+    SkyColorpickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerModule, imports: [[
                 i6.CommonModule,
                 i1.SkyAffixModule,
                 SkyColorpickerResourcesModule,
@@ -1303,7 +1331,7 @@
                 i1.SkyOverlayModule,
                 i3.SkyThemeModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyColorpickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyColorpickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -1337,10 +1365,10 @@
      */
 
     exports.SkyColorpickerModule = SkyColorpickerModule;
-    exports.λ1 = SkyColorpickerComponent;
-    exports.λ2 = SkyColorpickerInputDirective;
+    exports["λ1"] = SkyColorpickerComponent;
+    exports["λ2"] = SkyColorpickerInputDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-colorpicker.umd.js.map