@skyux/colorpicker 13.14.2 → 13.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-colorpicker.mjs +26 -26
- package/package.json +12 -12
|
@@ -78,11 +78,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
78
78
|
* Import into any component library module that needs to use resource strings.
|
|
79
79
|
*/
|
|
80
80
|
class SkyColorpickerResourcesModule {
|
|
81
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
82
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
83
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
81
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
82
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerResourcesModule, exports: [SkyI18nModule] }); }
|
|
83
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerResourcesModule, imports: [SkyI18nModule] }); }
|
|
84
84
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerResourcesModule, decorators: [{
|
|
86
86
|
type: NgModule,
|
|
87
87
|
args: [{
|
|
88
88
|
exports: [SkyI18nModule],
|
|
@@ -103,10 +103,10 @@ class SkyColorpickerInputService {
|
|
|
103
103
|
this.labelText.complete();
|
|
104
104
|
this.ariaError.complete();
|
|
105
105
|
}
|
|
106
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
107
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
107
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerInputService }); }
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerInputService, decorators: [{
|
|
110
110
|
type: Injectable
|
|
111
111
|
}] });
|
|
112
112
|
|
|
@@ -443,10 +443,10 @@ class SkyColorpickerService {
|
|
|
443
443
|
};
|
|
444
444
|
return denormalizeCmyk;
|
|
445
445
|
}
|
|
446
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
447
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
447
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerService }); }
|
|
448
448
|
}
|
|
449
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerService, decorators: [{
|
|
450
450
|
type: Injectable
|
|
451
451
|
}] });
|
|
452
452
|
|
|
@@ -710,10 +710,10 @@ class SkyColorpickerInputDirective {
|
|
|
710
710
|
#setInputId(id) {
|
|
711
711
|
this.#renderer.setAttribute(this.#elementRef.nativeElement, 'id', id);
|
|
712
712
|
}
|
|
713
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
714
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
713
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyColorpickerService }, { token: i2.SkyLibResourcesService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
714
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: SkyColorpickerInputDirective, isStandalone: true, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", id: "id", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { listeners: { "input": "changeInput()", "change": "onChange()" }, properties: { "readonly": "this.readonly", "class.sky-colorpicker-input": "this.colorInputClass" } }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, hostDirectives: [{ directive: i4.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0 }); }
|
|
715
715
|
}
|
|
716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerInputDirective, decorators: [{
|
|
717
717
|
type: Directive,
|
|
718
718
|
args: [{
|
|
719
719
|
selector: '[skyColorpickerInput]',
|
|
@@ -827,10 +827,10 @@ class SkyColorpickerSliderDirective {
|
|
|
827
827
|
this.#el.nativeElement.getBoundingClientRect().top -
|
|
828
828
|
window.pageYOffset);
|
|
829
829
|
}
|
|
830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
831
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerSliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
831
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: SkyColorpickerSliderDirective, isStandalone: true, selector: "[skyColorpickerSlider]", inputs: { skyColorpickerSlider: "skyColorpickerSlider", color: "color", xAxis: "xAxis", yAxis: "yAxis" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "touchstart": "start($event)", "mousedown": "start($event)" } }, ngImport: i0 }); }
|
|
832
832
|
}
|
|
833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerSliderDirective, decorators: [{
|
|
834
834
|
type: Directive,
|
|
835
835
|
args: [{
|
|
836
836
|
selector: '[skyColorpickerSlider]',
|
|
@@ -883,10 +883,10 @@ class SkyColorpickerTextDirective {
|
|
|
883
883
|
});
|
|
884
884
|
}
|
|
885
885
|
}
|
|
886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
887
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
886
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
887
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: SkyColorpickerTextDirective, isStandalone: true, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0 }); }
|
|
888
888
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerTextDirective, decorators: [{
|
|
890
890
|
type: Directive,
|
|
891
891
|
args: [{
|
|
892
892
|
selector: '[skyColorpickerText]',
|
|
@@ -1447,14 +1447,14 @@ class SkyColorpickerComponent {
|
|
|
1447
1447
|
}
|
|
1448
1448
|
this.closePicker();
|
|
1449
1449
|
}
|
|
1450
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: SkyColorpickerService }, { token: i3.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SkyColorpickerComponent, isStandalone: true, selector: "sky-colorpicker", inputs: { pickerButtonIcon: "pickerButtonIcon", label: "label", labelledBy: "labelledBy", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], messageStream: "messageStream", showResetButton: "showResetButton" }, outputs: { selectedColorChanged: "selectedColorChanged", selectedColorApplied: "selectedColorApplied" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
1452
1452
|
SkyColorpickerInputService,
|
|
1453
1453
|
SkyColorpickerService,
|
|
1454
1454
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1455
1455
|
], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "requiredState", first: true, predicate: SkyRequiredStateDirective, descendants: true }], viewQueries: [{ propertyName: "colorpickerTemplateRef", first: true, predicate: ["colorpickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "colorpickerRef", first: true, predicate: ["colorpickerRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span class=\"sky-color-picker-label-wrapper\">\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n [class.sky-control-label-required]=\"requiredState?.isRequired()\"\n [for]=\"inputId\"\n >{{ labelText }}</label\n >\n @if ((helpPopoverContent || helpKey) && !labelHidden) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n }\n</span>\n\n<div\n class=\"sky-colorpicker-input-group sky-input-group\"\n [class.sky-colorpicker-hidden]=\"!isVisible\"\n [class.sky-colorpicker-disabled]=\"disabled\"\n>\n <div [hidden]=\"true\">\n <ng-content />\n </div>\n\n <button\n #triggerButtonRef\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-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-label]=\"\n label ||\n (labelledBy\n ? null\n : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"labelledBy\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n label ||\n (labelledBy\n ? null\n : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n \"\n [disabled]=\"disabled\"\n [class.sky-colorpicker-button-disabled]=\"disabled\"\n [class.sky-colorpicker-error]=\"\n (ngControl?.touched || ngControl?.dirty) && ngControl?.errors\n \"\n [style.background-color]=\"backgroundColorForDisplay\"\n (click)=\"onTriggerButtonClick()\"\n >\n @if (pickerButtonIcon) {\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-colorpicker-button-icon\"\n variant=\"solid\"\n iconSize=\"s\"\n [iconName]=\"pickerButtonIcon\"\n [style.color]=\"iconColor\"\n />\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-colorpicker-button-icon\"\n variant=\"solid\"\n [iconName]=\"pickerButtonIcon\"\n [style.color]=\"iconColor\"\n />\n }\n <ng-container *skyThemeIf=\"'modern'\">\n <sky-icon\n class=\"sky-colorpicker-button-modern-chevron\"\n iconName=\"chevron-down\"\n iconSize=\"xxs\"\n [class.sky-colorpicker-button-modern-chevron-disabled]=\"disabled\"\n />\n </ng-container>\n </button>\n\n <ng-template #colorpickerTemplateRef>\n <div\n #colorpickerRef\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 [cdkTrapFocus]=\"true\"\n [cdkTrapFocusAutoCapture]=\"false\"\n >\n <div class=\"sky-colorpicker\">\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 class=\"box\">\n <div class=\"left\">\n <div class=\"selected-color-background sky-rounded-circle\"></div>\n <div\n class=\"selected-color sky-rounded-circle\"\n [style.background-color]=\"selectedColor?.rgbaText\"\n ></div>\n </div>\n <div class=\"right\">\n <div\n #hueSlider\n class=\"hue\"\n [skyColorpickerSlider]\n [xAxis]=\"1\"\n (newColorContrast)=\"hue = $event\"\n >\n <div\n class=\"cursor sky-rounded-circle\"\n [style.left.px]=\"slider.hue\"\n ></div>\n </div>\n @if (allowTransparency) {\n <div\n #alphaSlider\n class=\"alpha\"\n [skyColorpickerSlider]\n [style.background-color]=\"alphaSliderColor\"\n [xAxis]=\"1\"\n (newColorContrast)=\"alphaAxis = $event\"\n >\n <div\n class=\"cursor sky-rounded-circle\"\n [style.left.px]=\"slider.alpha\"\n ></div>\n </div>\n }\n </div>\n </div>\n\n <div\n class=\"rgba-text\"\n (keydown.enter)=\"onContainerEnterKeyDown($event)\"\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\n <fieldset\n [attr.aria-label]=\"'skyux_colorpicker_aria_rgba' | skyLibResources\"\n >\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n 'skyux_colorpicker_aria_red' | skyLibResources\n \"\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]=\"\n 'skyux_colorpicker_aria_green' | skyLibResources\n \"\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]=\"\n 'skyux_colorpicker_aria_blue' | skyLibResources\n \"\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 @if (allowTransparency) {\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n 'skyux_colorpicker_aria_alpha' | skyLibResources\n \"\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 }\n </fieldset>\n </div>\n @if (presetColors && presetColors.length) {\n <div class=\"sky-colorpicker-preset-color-area\">\n @for (\n color of presetColors | slice: 0 : 12;\n track color;\n let i = $index\n ) {\n <button\n class=\"sky-preset-color\"\n type=\"button\"\n [attr.aria-label]=\"\n ('skyux_colorpicker_preset_color' | skyLibResources) +\n ' ' +\n color\n \"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-link': 'modern'\n }\"\n [style.backgroundColor]=\"color\"\n (click)=\"onPresetClick(color)\"\n ></button>\n }\n </div>\n }\n </div>\n\n <div class=\"sky-colorpicker-footer\">\n <section class=\"sky-colorpicker-column\">\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 (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 @if (allowTransparency) {\n <span aria-hidden=\"true\" class=\"sky-colorpicker-checkered-background\">\n </span>\n }\n\n @if (showResetButton) {\n <button\n type=\"button\"\n [attr.aria-label]=\"'skyux_colorpicker_reset' | skyLibResources\"\n [disabled]=\"disabled\"\n [class.sky-colorpicker-reset-button-disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-colorpicker-reset-button': 'default',\n 'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern':\n 'modern'\n }\"\n (click)=\"onResetClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" iconName=\"close\" iconSize=\"s\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"delete\" />\n </button>\n }\n</div>\n\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-colorpicker-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-color-picker-label-wrapper:not(.sky-theme-modern *){--sky-override-colorpicker-label-color: var(--sky-text-color-default);--sky-override-colorpicker-label-space: 5px;--sky-override-colorpicker-label-font-size: 15px;--sky-override-colorpicker-label-font-weight: 400;--sky-override-colorpicker-label-line-height: normal}.sky-colorpicker-hint-text:not(.sky-theme-modern *){--sky-override-colorpicker-hint-text-space: var(--sky-margin-stacked-xs)}.sky-colorpicker-input-group:not(.sky-theme-modern *){--sky-override-colorpicker-button-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-override-colorpicker-button-border-radius: 0;--sky-override-colorpicker-button-box-shadow: none;--sky-override-colorpicker-button-box-shadow-focus: none;--sky-override-colorpicker-button-error-border: 1px solid var(--sky-highlight-color-danger);--sky-override-colorpicker-button-error-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-colorpicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-colorpicker-button-size: 30px;--sky-override-colorpicker-disabled-cursor: default;--sky-override-colorpicker-disabled-opacity: .65}.sky-colorpicker-container:not(.sky-theme-modern *){--sky-override-colorpicker-alpha-margin-top: 16px;--sky-override-colorpicker-background-color: #fff;--sky-override-colorpicker-box-padding: 4px 8px;--sky-override-colorpicker-current-color-padding: 16px 8px;--sky-override-colorpicker-current-controls-padding: 12px 8px;--sky-override-colorpicker-footer-border-top: 1px solid #e2e3e4;--sky-override-colorpicker-footer-button-spacing: 0;--sky-override-colorpicker-footer-padding: 15px;--sky-override-colorpicker-hue-alpha-height: 16px;--sky-override-colorpicker-input-font-size: 14px;--sky-override-colorpicker-input-height: 26px;--sky-override-colorpicker-input-label-margin: 0 0 8px 0;--sky-override-colorpicker-input-padding: 1px;--sky-override-colorpicker-input-text-align: center;--sky-override-colorpicker-rgba-padding: 7px 15px 15px;--sky-override-colorpicker-rgba-space-between: 8px;--sky-override-colorpicker-selected-color-left: 8px;--sky-override-colorpicker-selected-color-size: 40px;--sky-override-colorpicker-selected-color-top: 16px;--sky-override-colorpicker-selector-size: 17px;--sky-override-colorpicker-swatch-area-padding: 0 9px 15px 9px;--sky-override-colorpicker-swatch-border-radius: 0;--sky-override-colorpicker-swatch-border: 1px solid #e2e3e4;--sky-override-colorpicker-swatch-hover-border: #ffffff solid 2px;--sky-override-colorpicker-swatch-hover-box-shadow: 0 0 0 1px #cdcfd2, 0 0 0 2px #e2e3e4;--sky-override-colorpicker-swatch-hover-margin: 4px;--sky-override-colorpicker-swatch-margin: 5px;--sky-override-colorpicker-swatch-size-hover: 34px;--sky-override-colorpicker-swatch-size: 32px;--sky-override-colorpicker-width: 270px;--sky-override-colorpicker-rgba-font-size: 18px}sky-colorpicker.sky-form-field-stacked{display:block}.sky-colorpicker-container{position:fixed;max-height:100vh;overflow-y:auto;overflow-x:hidden;background-color:var(--sky-override-colorpicker-background-color, var(--sky-color-background-container-menu));border-radius:0 0 var(--sky-border-radius-s) var(--sky-border-radius-s)}.sky-colorpicker-button{--sky-colorpicker-border-padding-size: calc( var(--sky-border-width-input-base) + calc(var(--sky-border-width-input-base) * 2) );--sky-color-picker-inner-border-size: calc( var(--sky-colorpicker-border-padding-size) + var(--sky-border-width-input-base) );height:var(--sky-override-colorpicker-button-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-top) + var(--sky-comp-button-icon-space-inset-bottom)));width:var(--sky-override-colorpicker-button-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));border:none;border-radius:var(--sky-override-colorpicker-button-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-colorpicker-button-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-input-base), inset 0 0 0 var(--sky-colorpicker-border-padding-size) var(--sky-color-background-container-base), inset 0 0 0 var(--sky-color-picker-inner-border-size) var(--sky-color-border-input-base));cursor:pointer;position:relative;z-index:1}.sky-colorpicker-button:hover{box-shadow:var(--sky-override-colorpicker-button-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover), inset 0 0 0 var(--sky-colorpicker-border-padding-size) var(--sky-color-background-container-base), inset 0 0 0 var(--sky-color-picker-inner-border-size) var(--sky-color-border-input-base))}.sky-colorpicker-button:focus-visible:not(:active){box-shadow:var(--sky-override-colorpicker-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), inset 0 0 0 var(--sky-colorpicker-border-padding-size) var(--sky-color-background-container-base), inset 0 0 0 var(--sky-color-picker-inner-border-size) var(--sky-color-border-input-base));outline:var(--sky-override-colorpicker-button-focus-outline)}.sky-colorpicker-button.sky-colorpicker-button-disabled{cursor:var(--sky-override-colorpicker-disabled-cursor, not-allowed);box-shadow:var(--sky-override-colorpicker-button-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-color-border-action-secondary-disabled), inset 0 0 0 var(--sky-colorpicker-border-padding-size) var(--sky-color-background-input-disabled), inset 0 0 0 var(--sky-color-picker-inner-border-size) var(--sky-color-border-action-secondary-disabled))}.sky-colorpicker-disabled{opacity:var(--sky-override-colorpicker-disabled-opacity);cursor:default}.sky-colorpicker-button,.sky-colorpicker-button:active{background-image:var(--sky-override-colorpicker-button-background-image)}.sky-colorpicker-hidden{width:0px;height:0px;overflow:hidden}.sky-colorpicker-hint-text{margin-top:var(--sky-override-colorpicker-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-colorpicker-error{background-origin:border-box;box-shadow:var(--sky-override-colorpicker-button-error-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error), inset 0 0 0 var(--sky-colorpicker-border-padding-size) var(--sky-color-background-container-base), inset 0 0 0 calc(var(--sky-colorpicker-border-padding-size) + var(--sky-border-width-action-base)) var(--sky-color-border-input-base));border:var(--sky-override-colorpicker-button-error-border);outline:none}.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-input-group{position:relative;z-index:0}.sky-colorpicker-input-group .sky-colorpicker-reset-button-modern{margin-left:var(--sky-space-gap-action_group-m)}.sky-colorpicker-input-group .sky-colorpicker-reset-button-modern.sky-colorpicker-reset-button-disabled{background-color:var(--sky-color-background-action-tertiary-disabled)}.sky-colorpicker-input-group .sky-colorpicker-button-modern-chevron{position:absolute;background-color:var(--sky-color-background-container-base);border-top-left-radius:calc(var(--sky-border-radius-s) - var(--sky-colorpicker-border-padding-size));border-bottom-right-radius:calc(var(--sky-border-radius-s) - var(--sky-colorpicker-border-padding-size));border-left:var(--sky-border-width-input-base) solid var(--sky-color-border-input-base);border-top:var(--sky-border-width-input-base) solid var(--sky-color-border-input-base);bottom:var(--sky-colorpicker-border-padding-size);color:var(--sky-color-icon-default);right:var(--sky-colorpicker-border-padding-size)}.sky-colorpicker-input-group .sky-colorpicker-button-modern-chevron.sky-colorpicker-button-modern-chevron-disabled{color:var(--sky-color-text-deemphasized)}.sky-colorpicker-footer{border-top:var(--sky-override-colorpicker-footer-border-top, none);padding:var(--sky-override-colorpicker-footer-padding, var(--sky-comp-colorpicker-content-space-inset-top) var(--sky-comp-colorpicker-content-space-inset-right) var(--sky-comp-colorpicker-content-space-inset-bottom) var(--sky-comp-colorpicker-content-space-inset-left))}.sky-colorpicker-footer .sky-btn-colorpicker-apply{margin-right:var(--sky-override-colorpicker-footer-button-spacing, var(--sky-space-gap-action_group-m))}.sky-colorpicker *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0}.sky-colorpicker{cursor:default;width:var(--sky-override-colorpicker-width, calc(var(--sky-size-width-viewport-smallest) - (var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right))));height:auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-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:var(--sky-override-colorpicker-input-text-align);font-size:var(--sky-override-colorpicker-input-font-size);height:var(--sky-override-colorpicker-input-height)}.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 .sky-colorpicker-preset-color-area{padding:var(--sky-override-colorpicker-swatch-area-padding, var(--sky-comp-colorpicker-content-space-inset-top) var(--sky-comp-colorpicker-content-space-inset-right) var(--sky-comp-colorpicker-content-space-inset-bottom) var(--sky-comp-colorpicker-content-space-inset-left));display:flex;flex-direction:row;flex-wrap:wrap}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color{cursor:pointer;width:var(--sky-override-colorpicker-swatch-size, calc((var(--sky-size-width-viewport-smallest) - (var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)) - (var(--sky-comp-colorpicker-content-space-inset-left) + var(--sky-comp-colorpicker-content-space-inset-right)) - var(--sky-space-gap-form-m) * 4) / 5));height:var(--sky-override-colorpicker-swatch-size, calc((var(--sky-size-width-viewport-smallest) - (var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)) - (var(--sky-comp-colorpicker-content-space-inset-left) + var(--sky-comp-colorpicker-content-space-inset-right)) - var(--sky-space-gap-form-m) * 4) / 5));border-radius:var(--sky-override-colorpicker-swatch-border-radius, var(--sky-border-radius-s));margin:var(--sky-override-colorpicker-swatch-margin, 0 var(--sky-space-gap-form-m) var(--sky-space-gap-form-m) 0)}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:not(:active),.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:not(:hover),.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:not(:focus){border:var(--sky-override-colorpicker-swatch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base))}.sky-colorpicker .sky-colorpicker-preset-color-area .sky-preset-color:hover{cursor:pointer;border:var(--sky-override-colorpicker-swatch-hover-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));margin:var(--sky-override-colorpicker-swatch-hover-margin, 0 var(--sky-space-gap-form-m) var(--sky-space-gap-form-m) 0);width:var(--sky-override-colorpicker-swatch-size-hover, calc((var(--sky-size-width-viewport-smallest) - (var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)) - (var(--sky-comp-colorpicker-content-space-inset-left) + var(--sky-comp-colorpicker-content-space-inset-right)) - var(--sky-space-gap-form-m) * 4) / 5));height:var(--sky-override-colorpicker-swatch-size-hover, calc((var(--sky-size-width-viewport-smallest) - (var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)) - (var(--sky-comp-colorpicker-content-space-inset-left) + var(--sky-comp-colorpicker-content-space-inset-right)) - var(--sky-space-gap-form-m) * 4) / 5));box-shadow:var(--sky-override-colorpicker-swatch-hover-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-colorpicker div.cursor{cursor:default;position:relative;width:var(--sky-override-colorpicker-selector-size, calc(var(--sky-font-size-body-m) + 1px));height:var(--sky-override-colorpicker-selector-size, calc(var(--sky-font-size-body-m) + 1px));border:#ffffff solid 2px;outline:thin solid}.sky-colorpicker .saturation-lightness{cursor:pointer;width:100%;height:170px;border:none;background-size:100% 100%;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/2.0.1/assets/images/colorpicker/saturation-lightness.webp)}.sky-colorpicker .box{display:flex;padding:var(--sky-override-colorpicker-box-padding, var(--sky-comp-colorpicker-content-space-inset-top) var(--sky-comp-colorpicker-content-space-inset-right) var(--sky-comp-colorpicker-content-space-inset-bottom) var(--sky-comp-colorpicker-content-space-inset-left))}.sky-colorpicker .box .left{position:relative;padding:var(--sky-override-colorpicker-current-color-padding, 0 var(--sky-space-gap-form-xl) 0 0)}.sky-colorpicker .box .right{flex:1 1 auto;padding:var(--sky-override-colorpicker-current-controls-padding);display:flex;flex-direction:column;justify-content:center}.sky-colorpicker .hue{cursor:pointer;width:100%;height:var(--sky-override-colorpicker-hue-alpha-height, var(--sky-font-size-body-m));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:var(--sky-override-colorpicker-hue-alpha-height, var(--sky-font-size-body-m));border:none;margin-top:var(--sky-override-colorpicker-alpha-margin-top, var(--sky-space-gap-form-s));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:var(--sky-override-colorpicker-selected-color-size, calc(var(--sky-font-size-body-m) * 2 + var(--sky-space-gap-form-s)));height:var(--sky-override-colorpicker-selected-color-size, calc(var(--sky-font-size-body-m) * 2 + var(--sky-space-gap-form-s)));top:var(--sky-override-colorpicker-selected-color-top, 0);left:var(--sky-override-colorpicker-selected-color-left, 0);position:absolute}.sky-colorpicker .selected-color-background{width:var(--sky-override-colorpicker-selected-color-size, calc(var(--sky-font-size-body-m) * 2 + var(--sky-space-gap-form-s)));height:var(--sky-override-colorpicker-selected-color-size, calc(var(--sky-font-size-body-m) * 2 + var(--sky-space-gap-form-s)));background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC)}.sky-colorpicker .rgba-text{width:100%;font-size:var(--sky-override-colorpicker-rgba-font-size);padding:var(--sky-override-colorpicker-rgba-padding, var(--sky-comp-colorpicker-content-space-inset-top) var(--sky-comp-colorpicker-content-space-inset-right) var(--sky-comp-colorpicker-content-space-inset-bottom) var(--sky-comp-colorpicker-content-space-inset-left));display:flex}.sky-colorpicker .rgba-text input{min-width:0;padding:var(--sky-override-colorpicker-input-padding)}.sky-colorpicker .rgba-text label{margin:var(--sky-override-colorpicker-input-label-margin)}.sky-colorpicker .rgba-text sky-input-box{flex:1;margin:0 var(--sky-override-colorpicker-rgba-space-between, var(--sky-space-gap-form-s)) 0 0}.sky-colorpicker .rgba-text>sky-input-box{flex:2}.sky-colorpicker .rgba-text>fieldset{display:flex;flex:4}.sky-colorpicker .rgba-text sky-input-box:last-child{margin:0}.sky-colorpicker-checkered-background{position:absolute;top:0;left:0;height:var(--sky-override-colorpicker-button-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));width:var(--sky-override-colorpicker-button-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));background:-webkit-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),-webkit-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),#fff;background:-moz-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),-moz-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),#fff;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),#fff;background-repeat:repeat,repeat;background-position:0px 0,5px 5px;-webkit-transform-origin:0 0 0;transform-origin:0 0 0;-webkit-background-origin:padding-box,padding-box;background-origin:padding-box,padding-box;-webkit-background-clip:border-box,border-box;background-clip:border-box,border-box;-webkit-background-size:10px 10px,10px 10px;background-size:10px 10px,10px 10px;-webkit-box-shadow:none;border-radius:var(--sky-override-colorpicker-button-border-radius, var(--sky-border-radius-s));box-shadow:none;text-shadow:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;-webkit-transform:scaleX(1) scaleY(1) scaleZ(1);transform:scaleX(1) scaleY(1) scaleZ(1)}.sky-color-picker-label-wrapper .sky-control-label{color:var(--sky-override-colorpicker-label-color, var(--sky-color-text-default));margin-bottom:var(--sky-override-colorpicker-label-space, var(--sky-space-gap-form-xs));font-size:var(--sky-override-colorpicker-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-colorpicker-label-font-weight, var(--sky-font-style-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-colorpicker-label-line-height, var(--sky-font-line_height-input-label))}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled{background-color:var(--sky-color-background-input-disabled)!important}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled .sky-colorpicker-button-modern-chevron{background-color:var(--sky-color-background-input-disabled);border-left:1px solid var(--sky-color-border-action-secondary-disabled);border-top:1px solid var(--sky-color-border-action-secondary-disabled)}.sky-theme-modern .sky-colorpicker-button.sky-colorpicker-button-disabled .sky-colorpicker-button-icon{color:var(--sky-color-text-deemphasized)!important}.sky-theme-modern .rgba-text{flex-wrap:wrap}.sky-theme-modern .rgba-text>sky-input-box:first-child{width:100%;flex:0 1 auto;margin:0 0 var(--sky-space-gap-form-s) 0}.sky-theme-modern .sky-colorpicker-preset-color-area .sky-btn:nth-child(5n){margin:0 0 var(--sky-space-gap-form-m) 0}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: i4.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i4.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "ngmodule", type: SkyColorpickerResourcesModule }, { kind: "directive", type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: ["skyColorpickerSlider", "color", "xAxis", "yAxis"], outputs: ["newColorContrast"] }, { kind: "directive", type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: ["skyColorpickerText", "color", "maxRange"], outputs: ["newColorContrast"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1456
1456
|
}
|
|
1457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerComponent, decorators: [{
|
|
1458
1458
|
type: Component,
|
|
1459
1459
|
args: [{ selector: 'sky-colorpicker', providers: [
|
|
1460
1460
|
SkyColorpickerInputService,
|
|
@@ -1539,16 +1539,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1539
1539
|
}] } });
|
|
1540
1540
|
|
|
1541
1541
|
class SkyColorpickerModule {
|
|
1542
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1543
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
1542
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1543
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
|
|
1544
1544
|
SkyColorpickerComponent,
|
|
1545
1545
|
SkyColorpickerInputDirective,
|
|
1546
1546
|
SkyColorpickerTextDirective,
|
|
1547
1547
|
SkyColorpickerSliderDirective], exports: [SkyColorpickerComponent, SkyColorpickerInputDirective] }); }
|
|
1548
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
1548
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
|
|
1549
1549
|
SkyColorpickerComponent] }); }
|
|
1550
1550
|
}
|
|
1551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SkyColorpickerModule, decorators: [{
|
|
1552
1552
|
type: NgModule,
|
|
1553
1553
|
args: [{
|
|
1554
1554
|
imports: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/colorpicker",
|
|
3
|
-
"version": "13.14.
|
|
3
|
+
"version": "13.14.3",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -17,17 +17,17 @@
|
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"@angular/cdk": "^20.2.14",
|
|
20
|
-
"@angular/common": "^20.3.
|
|
21
|
-
"@angular/core": "^20.3.
|
|
22
|
-
"@angular/forms": "^20.3.
|
|
23
|
-
"@angular/platform-browser": "^20.3.
|
|
24
|
-
"@skyux-sdk/testing": "13.14.
|
|
25
|
-
"@skyux/core": "13.14.
|
|
26
|
-
"@skyux/forms": "13.14.
|
|
27
|
-
"@skyux/help-inline": "13.14.
|
|
28
|
-
"@skyux/i18n": "13.14.
|
|
29
|
-
"@skyux/icon": "13.14.
|
|
30
|
-
"@skyux/theme": "13.14.
|
|
20
|
+
"@angular/common": "^20.3.17",
|
|
21
|
+
"@angular/core": "^20.3.17",
|
|
22
|
+
"@angular/forms": "^20.3.17",
|
|
23
|
+
"@angular/platform-browser": "^20.3.17",
|
|
24
|
+
"@skyux-sdk/testing": "13.14.3",
|
|
25
|
+
"@skyux/core": "13.14.3",
|
|
26
|
+
"@skyux/forms": "13.14.3",
|
|
27
|
+
"@skyux/help-inline": "13.14.3",
|
|
28
|
+
"@skyux/i18n": "13.14.3",
|
|
29
|
+
"@skyux/icon": "13.14.3",
|
|
30
|
+
"@skyux/theme": "13.14.3"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"tslib": "^2.8.1"
|