@skyux/colorpicker 15.0.0-alpha.4 → 15.0.0-alpha.6

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.
Files changed (4) hide show
  1. package/fesm2022/skyux-colorpicker-testing.mjs +1 -2
  2. package/fesm2022/skyux-colorpicker-testing.mjs.map +1 -1
  3. package/fesm2022/skyux-colorpicker.mjs +26 -26
  4. package/package.json +12 -18
package/fesm2022/skyux-colorpicker-testing.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  import { By } from '@angular/platform-browser';
2
- import { SkyAppTestUtility } from '@skyux-sdk/testing';
2
+ import { SkyAppTestUtility, SkyComponentHarness } from '@skyux/core/testing';
3
3
  import { HarnessPredicate } from '@angular/cdk/testing';
4
- import { SkyComponentHarness } from '@skyux/core/testing';
5
4
  import { SkyFormErrorHarness, SkyFormErrorsHarness } from '@skyux/forms/testing';
6
5
  import { SkyHelpInlineHarness } from '@skyux/help-inline/testing';
7
6
  import { SkyIconHarness } from '@skyux/icon/testing';
package/fesm2022/skyux-colorpicker-testing.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skyux-colorpicker-testing.mjs","sources":["../../../../../libs/components/colorpicker/testing/src/legacy/colorpicker-fixture.ts","../../../../../libs/components/colorpicker/testing/src/modules/colorpicker/colorpicker-dropdown-harness.ts","../../../../../libs/components/colorpicker/testing/src/modules/colorpicker/colorpicker-harness.ts","../../../../../libs/components/colorpicker/testing/src/skyux-colorpicker-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux-sdk/testing';\n\n/**\n * Allows interaction with a SKY UX colorpicker component.\n * @deprecated Use `SkyColorpickerHarness` instead.\n * @internal\n */\nexport class SkyColorpickerFixture {\n #debugEl: DebugElement;\n #fixture: ComponentFixture<unknown>;\n\n constructor(fixture: ComponentFixture<unknown>, skyTestId: string) {\n this.#fixture = fixture;\n this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(\n fixture,\n skyTestId,\n 'sky-colorpicker',\n );\n }\n\n /**\n * The colorpicker's currently selected color formatted to the `outputFormat`.\n */\n public get value(): string {\n return this.#getColorpickerInputEl().nativeElement.value;\n }\n\n /**\n * Set the colorpicker's color hex code.\n * @param hexValue The new color hex code. Must include '#'.\n */\n public async setValueFromHex(hexValue: string): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const hexInput = document.querySelector(\n 'input[id^=sky-colorpicker-hex-]',\n ) as HTMLInputElement;\n\n hexInput.value = hexValue;\n SkyAppTestUtility.fireDomEvent(hexInput, 'input');\n\n await this.#clickColorpickerApplyButtonEl();\n await this.#fixture.whenStable();\n }\n\n /**\n * Set the colorpicker's color RGB values.\n * @param red The red color value.\n * @param green The green color value.\n * @param blue The blue color value.\n * @param alpha The alpha channel value.\n */\n public async setValueFromRGBA(\n red: number,\n green: number,\n blue: number,\n alpha: number,\n ): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const rInput = document.querySelector(\n 'input[id^=sky-colorpicker-red-]',\n ) as HTMLInputElement;\n const gInput = document.querySelector(\n 'input[id^=sky-colorpicker-green-]',\n ) as HTMLInputElement;\n const bInput = document.querySelector(\n 'input[id^=sky-colorpicker-blue-]',\n ) as HTMLInputElement;\n const aInput = document.querySelector(\n 'input[id^=sky-colorpicker-alpha-]',\n ) as HTMLInputElement;\n\n rInput.value = red.toString();\n gInput.value = green.toString();\n bInput.value = blue.toString();\n aInput.value = alpha.toString();\n\n SkyAppTestUtility.fireDomEvent(rInput, 'input');\n SkyAppTestUtility.fireDomEvent(gInput, 'input');\n SkyAppTestUtility.fireDomEvent(bInput, 'input');\n SkyAppTestUtility.fireDomEvent(aInput, 'input');\n\n await this.#clickColorpickerApplyButtonEl();\n\n await this.#fixture.whenStable();\n }\n\n /**\n * Set the colorpicker's color to the provided preset color at the given index.\n * @param presetIndex The index of the color in the `presetColors` list to select.\n */\n public async setValueFromPresets(presetIndex: number): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const presetColors = document.querySelectorAll(\n '.sky-colorpicker-preset-color-area button',\n );\n const presetColor =\n presetColors && (presetColors[presetIndex] as HTMLButtonElement);\n\n if (presetColor) {\n presetColor.click();\n this.#fixture.detectChanges();\n }\n\n await this.#clickColorpickerApplyButtonEl();\n\n await this.#fixture.whenStable();\n }\n\n async #clickColorpickerButtonEl(): Promise<void> {\n const colorpickerButton = this.#debugEl.query(\n By.css('sky-colorpicker button'),\n ).nativeElement;\n\n colorpickerButton.click();\n\n this.#fixture.detectChanges();\n\n await this.#fixture.whenStable();\n }\n\n async #clickColorpickerApplyButtonEl(): Promise<void> {\n const applyButton = document.querySelector(\n '.sky-btn-colorpicker-apply',\n ) as HTMLButtonElement;\n\n applyButton.click();\n\n this.#fixture.detectChanges();\n\n await this.#fixture.whenStable();\n }\n\n #getColorpickerInputEl(): DebugElement {\n return this.#debugEl.query(By.css('sky-colorpicker input'));\n }\n}\n","import { HarnessPredicate, TestElement } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\n\nimport { SkyColorpickerDropdownHarnessFilters } from './colorpicker-dropdown-harness.filters';\n\n/**\n * Harness for interacting with colorpicker dropdown in tests.\n */\nexport class SkyColorpickerDropdownHarness extends SkyComponentHarness {\n /**\n * @internal\n */\n public static hostSelector = '.sky-colorpicker-container';\n\n #getApplyButton = this.locatorFor('.sky-btn-colorpicker-apply');\n #getCancelButton = this.locatorFor('.sky-btn-colorpicker-close');\n #getInputs = this.locatorForAll('input.sky-form-control');\n #getSwatches = this.locatorForAll('button.sky-preset-color');\n\n public static with(\n filters: SkyColorpickerDropdownHarnessFilters,\n ): HarnessPredicate<SkyColorpickerDropdownHarness> {\n return new HarnessPredicate(SkyColorpickerDropdownHarness, filters);\n }\n\n /**\n * Whether transparency is allowed.\n */\n public async allowsTransparency(): Promise<boolean> {\n return !!(await this.#getAlphaInput());\n }\n\n /**\n * Clicks the colorpicker dropdown apply button.\n */\n public async clickApplyButton(): Promise<void> {\n await (await this.#getApplyButton()).click();\n }\n\n /**\n * Clicks the colorpicker dropdown cancel button.\n */\n public async clickCancelButton(): Promise<void> {\n await (await this.#getCancelButton()).click();\n }\n\n /**\n * Clicks a specified swatch in the color preset section.\n * @param swatchHex Hex code of the swatch to click.\n */\n public async clickPresetColorSwatch(swatchHex: string): Promise<void> {\n const swatches = await this.#getSwatchButtons();\n const ariaLabel = `Preset Color: ${swatchHex}`;\n\n for (const swatch of swatches) {\n if ((await swatch.getAttribute('aria-label')) === ariaLabel) {\n return await swatch.click();\n }\n }\n }\n\n /**\n * Gets an array of the hex codes of the preset color swatches.\n */\n public async getPresetColorSwatches(): Promise<string[]> {\n const swatches = await this.#getSwatchButtons();\n\n return await Promise.all(\n swatches.map(async (swatch): Promise<string> => {\n const swatchHex = (await swatch.getAttribute('aria-label'))\n ?.split(':')[1]\n .trim();\n if (!swatchHex) {\n throw new Error('Preset swatch is undefined.');\n }\n return swatchHex;\n }),\n );\n }\n\n /**\n * Enters a value into the alpha input box.\n * @param value A decimal value from 0-1.\n */\n public async setAlphaValue(value: string): Promise<void> {\n const input = await this.#getAlphaInput();\n\n if (!input) {\n throw new Error('Alpha input cannot be found.');\n }\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the blue input box.\n * @param value A value from 0-255\n */\n public async setBlueValue(value: string): Promise<void> {\n const input = await this.#getBlueInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the green input box.\n * @param value A value from 0-255\n */\n public async setGreenValue(value: string): Promise<void> {\n const input = await this.#getGreenInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the hex input box.\n * @param value A hex value\n */\n public async setHexValue(value: string): Promise<void> {\n const input = await this.#getHexInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the red input box.\n * @param value A value from 0-255\n */\n public async setRedValue(value: string): Promise<void> {\n const input = await this.#getRedInput();\n\n await this.#setInputValue(input, value);\n }\n\n async #getAlphaInput(): Promise<TestElement | null> {\n return (await this.#getInputs())[4];\n }\n\n async #getBlueInput(): Promise<TestElement> {\n return (await this.#getInputs())[3];\n }\n\n async #getGreenInput(): Promise<TestElement> {\n return (await this.#getInputs())[2];\n }\n\n async #getHexInput(): Promise<TestElement> {\n return (await this.#getInputs())[0];\n }\n\n async #getRedInput(): Promise<TestElement> {\n return (await this.#getInputs())[1];\n }\n\n async #getSwatchButtons(): Promise<TestElement[]> {\n const swatches = await this.#getSwatches();\n\n if (swatches.length > 0) {\n return swatches;\n } else {\n throw new Error('No swatches found.');\n }\n }\n\n async #setInputValue(input: TestElement, value: string): Promise<void> {\n await input.setInputValue(value);\n await input.dispatchEvent('input');\n }\n}\n","import { HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\nimport {\n SkyFormErrorHarness,\n SkyFormErrorsHarness,\n} from '@skyux/forms/testing';\nimport { SkyHelpInlineHarness } from '@skyux/help-inline/testing';\nimport { SkyIconHarness } from '@skyux/icon/testing';\n\nimport { SkyColorpickerDropdownHarness } from './colorpicker-dropdown-harness';\nimport { SkyColorpickerHarnessFilters } from './colorpicker-harness.filters';\n\n/**\n * Harness for interacting with colorpicker components in tests.\n */\nexport class SkyColorpickerHarness extends SkyComponentHarness {\n /**\n * @internal\n */\n public static hostSelector = 'sky-colorpicker';\n\n #documentRootLocator = this.documentRootLocatorFactory();\n\n #getButton = this.locatorFor('button.sky-colorpicker-button');\n #getHintText = this.locatorFor('.sky-colorpicker-hint-text');\n #getLabel = this.locatorFor('label.sky-control-label');\n #resetButtonDefault = this.locatorForOptional(\n 'button.sky-colorpicker-reset-button',\n );\n #resetButtonModern = this.locatorForOptional(\n 'button.sky-colorpicker-reset-button-modern',\n );\n\n /**\n * Gets a `HarnessPredicate` that can be used to search for a\n * `SkyColorpickerHarness` that meets certain criteria\n */\n public static with(\n filters: SkyColorpickerHarnessFilters,\n ): HarnessPredicate<SkyColorpickerHarness> {\n return SkyColorpickerHarness.getDataSkyIdPredicate(filters);\n }\n\n /**\n * Clicks the colorpicker button.\n */\n public async clickColorpickerButton(): Promise<void> {\n const button = await this.#getButton();\n return await button.click();\n }\n\n /**\n * Clicks the help inline button.\n */\n public async clickHelpInline(): Promise<void> {\n await (await this.#getHelpInline()).click();\n }\n\n /**\n * Clicks the reset button. Throws an error if the reset button is hidden.\n */\n public async clickResetButton(): Promise<void> {\n const defaultButton = (await this.#resetButtonDefault()) ?? null;\n const modernButton = (await this.#resetButtonModern()) ?? null;\n\n if (!defaultButton && !modernButton) {\n throw new Error('No reset button found.');\n }\n if (defaultButton) {\n return await defaultButton?.click();\n } else if (modernButton) {\n return await modernButton?.click();\n }\n }\n\n /**\n * Gets the colorpicker button's `aria-label`.\n */\n public async getAriaLabel(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-label');\n }\n\n /**\n * Gets the colorpicker button's `aria-labelledby`\n */\n public async getAriaLabelledby(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-labelledby');\n }\n\n /**\n * Gets the `SkyColorpickerDropdownHarness` for the colorpicker dropdown controlled by\n * the colorpicker button. Throws an error if the dropdown is not open.\n */\n public async getColorpickerDropdown(): Promise<SkyColorpickerDropdownHarness> {\n const overlayId = await this.#getOverlayId();\n\n if (!overlayId) {\n throw new Error(\n 'Unable to get colorpicker dropdown because dropdown is closed',\n );\n }\n\n return await this.#documentRootLocator.locatorFor(\n SkyColorpickerDropdownHarness.with({ selector: `#${overlayId}` }),\n )();\n }\n\n /**\n * Gets the `SkyIconHarness` for the colorpicker icon.\n * @internal\n */\n public async getColorpickerIcon(): Promise<SkyIconHarness> {\n return await this.locatorFor(SkyIconHarness)();\n }\n\n /**\n * Gets the custom form error.\n */\n public async getCustomError(errorName: string): Promise<SkyFormErrorHarness> {\n return await this.locatorFor(\n SkyFormErrorHarness.with({ errorName: errorName }),\n )();\n }\n\n /**\n * Gets the help inline popover content.\n */\n public async getHelpPopoverContent(): Promise<string | undefined> {\n return await (await this.#getHelpInline()).getPopoverContent();\n }\n\n /**\n * Gets the help inline popover title.\n */\n public async getHelpPopoverTitle(): Promise<string | undefined> {\n return await (await this.#getHelpInline()).getPopoverTitle();\n }\n\n /**\n * Gets the colorpicker component's hint text.\n */\n public async getHintText(): Promise<string> {\n return (await (await this.#getHintText()).text()).trim();\n }\n\n /**\n * Whether the colorpicker component's label is hidden.\n */\n public async getLabelHidden(): Promise<boolean> {\n return await (await this.#getLabel()).hasClass('sky-screen-reader-only');\n }\n\n /**\n * Gets the colorpicker component's label text.\n */\n public async getLabelText(): Promise<string> {\n return (await (await this.#getLabel()).text()).trim();\n }\n\n /**\n * Whether the custom error has fired.\n * @param errorName `errorName` of the custom error.\n */\n public async hasError(errorName: string): Promise<boolean> {\n return await (await this.#getFormErrors())?.hasError(errorName);\n }\n\n /**\n * Whether the required error has fired.\n */\n public async hasRequiredError(): Promise<boolean> {\n return await (await this.#getFormErrors())?.hasError('required');\n }\n\n /**\n * Whether the reset button is shown.\n */\n public async hasResetButton(): Promise<boolean> {\n const defaultButton = (await this.#resetButtonDefault()) ?? null;\n const modernButton = (await this.#resetButtonModern()) ?? null;\n\n return !!defaultButton || !!modernButton;\n }\n\n /**\n * Whether the colorpicker component is open.\n */\n public async isColorpickerOpen(): Promise<boolean> {\n try {\n await this.getColorpickerDropdown();\n return true;\n } catch {\n return false;\n }\n }\n\n /**\n * Whether the colorpicker component is stacked.\n */\n public async isStacked(): Promise<boolean> {\n return await (await this.host()).hasClass('sky-form-field-stacked');\n }\n\n async #getFormErrors(): Promise<SkyFormErrorsHarness> {\n return await this.locatorFor(SkyFormErrorsHarness)();\n }\n\n async #getHelpInline(): Promise<SkyHelpInlineHarness> {\n const harness = await this.locatorForOptional(SkyHelpInlineHarness)();\n\n if (harness) {\n return harness;\n }\n\n throw Error('No help inline found.');\n }\n\n async #getOverlayId(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-controls');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"skyux-colorpicker-testing.mjs","sources":["../../../../../libs/components/colorpicker/testing/src/legacy/colorpicker-fixture.ts","../../../../../libs/components/colorpicker/testing/src/modules/colorpicker/colorpicker-dropdown-harness.ts","../../../../../libs/components/colorpicker/testing/src/modules/colorpicker/colorpicker-harness.ts","../../../../../libs/components/colorpicker/testing/src/skyux-colorpicker-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux/core/testing';\n\n/**\n * Allows interaction with a SKY UX colorpicker component.\n * @deprecated Use `SkyColorpickerHarness` instead.\n * @internal\n */\nexport class SkyColorpickerFixture {\n #debugEl: DebugElement;\n #fixture: ComponentFixture<unknown>;\n\n constructor(fixture: ComponentFixture<unknown>, skyTestId: string) {\n this.#fixture = fixture;\n this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(\n fixture,\n skyTestId,\n 'sky-colorpicker',\n );\n }\n\n /**\n * The colorpicker's currently selected color formatted to the `outputFormat`.\n */\n public get value(): string {\n return this.#getColorpickerInputEl().nativeElement.value;\n }\n\n /**\n * Set the colorpicker's color hex code.\n * @param hexValue The new color hex code. Must include '#'.\n */\n public async setValueFromHex(hexValue: string): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const hexInput = document.querySelector(\n 'input[id^=sky-colorpicker-hex-]',\n ) as HTMLInputElement;\n\n hexInput.value = hexValue;\n SkyAppTestUtility.fireDomEvent(hexInput, 'input');\n\n await this.#clickColorpickerApplyButtonEl();\n await this.#fixture.whenStable();\n }\n\n /**\n * Set the colorpicker's color RGB values.\n * @param red The red color value.\n * @param green The green color value.\n * @param blue The blue color value.\n * @param alpha The alpha channel value.\n */\n public async setValueFromRGBA(\n red: number,\n green: number,\n blue: number,\n alpha: number,\n ): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const rInput = document.querySelector(\n 'input[id^=sky-colorpicker-red-]',\n ) as HTMLInputElement;\n const gInput = document.querySelector(\n 'input[id^=sky-colorpicker-green-]',\n ) as HTMLInputElement;\n const bInput = document.querySelector(\n 'input[id^=sky-colorpicker-blue-]',\n ) as HTMLInputElement;\n const aInput = document.querySelector(\n 'input[id^=sky-colorpicker-alpha-]',\n ) as HTMLInputElement;\n\n rInput.value = red.toString();\n gInput.value = green.toString();\n bInput.value = blue.toString();\n aInput.value = alpha.toString();\n\n SkyAppTestUtility.fireDomEvent(rInput, 'input');\n SkyAppTestUtility.fireDomEvent(gInput, 'input');\n SkyAppTestUtility.fireDomEvent(bInput, 'input');\n SkyAppTestUtility.fireDomEvent(aInput, 'input');\n\n await this.#clickColorpickerApplyButtonEl();\n\n await this.#fixture.whenStable();\n }\n\n /**\n * Set the colorpicker's color to the provided preset color at the given index.\n * @param presetIndex The index of the color in the `presetColors` list to select.\n */\n public async setValueFromPresets(presetIndex: number): Promise<void> {\n await this.#clickColorpickerButtonEl();\n\n const presetColors = document.querySelectorAll(\n '.sky-colorpicker-preset-color-area button',\n );\n const presetColor =\n presetColors && (presetColors[presetIndex] as HTMLButtonElement);\n\n if (presetColor) {\n presetColor.click();\n this.#fixture.detectChanges();\n }\n\n await this.#clickColorpickerApplyButtonEl();\n\n await this.#fixture.whenStable();\n }\n\n async #clickColorpickerButtonEl(): Promise<void> {\n const colorpickerButton = this.#debugEl.query(\n By.css('sky-colorpicker button'),\n ).nativeElement;\n\n colorpickerButton.click();\n\n this.#fixture.detectChanges();\n\n await this.#fixture.whenStable();\n }\n\n async #clickColorpickerApplyButtonEl(): Promise<void> {\n const applyButton = document.querySelector(\n '.sky-btn-colorpicker-apply',\n ) as HTMLButtonElement;\n\n applyButton.click();\n\n this.#fixture.detectChanges();\n\n await this.#fixture.whenStable();\n }\n\n #getColorpickerInputEl(): DebugElement {\n return this.#debugEl.query(By.css('sky-colorpicker input'));\n }\n}\n","import { HarnessPredicate, TestElement } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\n\nimport { SkyColorpickerDropdownHarnessFilters } from './colorpicker-dropdown-harness.filters';\n\n/**\n * Harness for interacting with colorpicker dropdown in tests.\n */\nexport class SkyColorpickerDropdownHarness extends SkyComponentHarness {\n /**\n * @internal\n */\n public static hostSelector = '.sky-colorpicker-container';\n\n #getApplyButton = this.locatorFor('.sky-btn-colorpicker-apply');\n #getCancelButton = this.locatorFor('.sky-btn-colorpicker-close');\n #getInputs = this.locatorForAll('input.sky-form-control');\n #getSwatches = this.locatorForAll('button.sky-preset-color');\n\n public static with(\n filters: SkyColorpickerDropdownHarnessFilters,\n ): HarnessPredicate<SkyColorpickerDropdownHarness> {\n return new HarnessPredicate(SkyColorpickerDropdownHarness, filters);\n }\n\n /**\n * Whether transparency is allowed.\n */\n public async allowsTransparency(): Promise<boolean> {\n return !!(await this.#getAlphaInput());\n }\n\n /**\n * Clicks the colorpicker dropdown apply button.\n */\n public async clickApplyButton(): Promise<void> {\n await (await this.#getApplyButton()).click();\n }\n\n /**\n * Clicks the colorpicker dropdown cancel button.\n */\n public async clickCancelButton(): Promise<void> {\n await (await this.#getCancelButton()).click();\n }\n\n /**\n * Clicks a specified swatch in the color preset section.\n * @param swatchHex Hex code of the swatch to click.\n */\n public async clickPresetColorSwatch(swatchHex: string): Promise<void> {\n const swatches = await this.#getSwatchButtons();\n const ariaLabel = `Preset Color: ${swatchHex}`;\n\n for (const swatch of swatches) {\n if ((await swatch.getAttribute('aria-label')) === ariaLabel) {\n return await swatch.click();\n }\n }\n }\n\n /**\n * Gets an array of the hex codes of the preset color swatches.\n */\n public async getPresetColorSwatches(): Promise<string[]> {\n const swatches = await this.#getSwatchButtons();\n\n return await Promise.all(\n swatches.map(async (swatch): Promise<string> => {\n const swatchHex = (await swatch.getAttribute('aria-label'))\n ?.split(':')[1]\n .trim();\n if (!swatchHex) {\n throw new Error('Preset swatch is undefined.');\n }\n return swatchHex;\n }),\n );\n }\n\n /**\n * Enters a value into the alpha input box.\n * @param value A decimal value from 0-1.\n */\n public async setAlphaValue(value: string): Promise<void> {\n const input = await this.#getAlphaInput();\n\n if (!input) {\n throw new Error('Alpha input cannot be found.');\n }\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the blue input box.\n * @param value A value from 0-255\n */\n public async setBlueValue(value: string): Promise<void> {\n const input = await this.#getBlueInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the green input box.\n * @param value A value from 0-255\n */\n public async setGreenValue(value: string): Promise<void> {\n const input = await this.#getGreenInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the hex input box.\n * @param value A hex value\n */\n public async setHexValue(value: string): Promise<void> {\n const input = await this.#getHexInput();\n\n await this.#setInputValue(input, value);\n }\n\n /**\n * Enters a value into the red input box.\n * @param value A value from 0-255\n */\n public async setRedValue(value: string): Promise<void> {\n const input = await this.#getRedInput();\n\n await this.#setInputValue(input, value);\n }\n\n async #getAlphaInput(): Promise<TestElement | null> {\n return (await this.#getInputs())[4];\n }\n\n async #getBlueInput(): Promise<TestElement> {\n return (await this.#getInputs())[3];\n }\n\n async #getGreenInput(): Promise<TestElement> {\n return (await this.#getInputs())[2];\n }\n\n async #getHexInput(): Promise<TestElement> {\n return (await this.#getInputs())[0];\n }\n\n async #getRedInput(): Promise<TestElement> {\n return (await this.#getInputs())[1];\n }\n\n async #getSwatchButtons(): Promise<TestElement[]> {\n const swatches = await this.#getSwatches();\n\n if (swatches.length > 0) {\n return swatches;\n } else {\n throw new Error('No swatches found.');\n }\n }\n\n async #setInputValue(input: TestElement, value: string): Promise<void> {\n await input.setInputValue(value);\n await input.dispatchEvent('input');\n }\n}\n","import { HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\nimport {\n SkyFormErrorHarness,\n SkyFormErrorsHarness,\n} from '@skyux/forms/testing';\nimport { SkyHelpInlineHarness } from '@skyux/help-inline/testing';\nimport { SkyIconHarness } from '@skyux/icon/testing';\n\nimport { SkyColorpickerDropdownHarness } from './colorpicker-dropdown-harness';\nimport { SkyColorpickerHarnessFilters } from './colorpicker-harness.filters';\n\n/**\n * Harness for interacting with colorpicker components in tests.\n */\nexport class SkyColorpickerHarness extends SkyComponentHarness {\n /**\n * @internal\n */\n public static hostSelector = 'sky-colorpicker';\n\n #documentRootLocator = this.documentRootLocatorFactory();\n\n #getButton = this.locatorFor('button.sky-colorpicker-button');\n #getHintText = this.locatorFor('.sky-colorpicker-hint-text');\n #getLabel = this.locatorFor('label.sky-control-label');\n #resetButtonDefault = this.locatorForOptional(\n 'button.sky-colorpicker-reset-button',\n );\n #resetButtonModern = this.locatorForOptional(\n 'button.sky-colorpicker-reset-button-modern',\n );\n\n /**\n * Gets a `HarnessPredicate` that can be used to search for a\n * `SkyColorpickerHarness` that meets certain criteria\n */\n public static with(\n filters: SkyColorpickerHarnessFilters,\n ): HarnessPredicate<SkyColorpickerHarness> {\n return SkyColorpickerHarness.getDataSkyIdPredicate(filters);\n }\n\n /**\n * Clicks the colorpicker button.\n */\n public async clickColorpickerButton(): Promise<void> {\n const button = await this.#getButton();\n return await button.click();\n }\n\n /**\n * Clicks the help inline button.\n */\n public async clickHelpInline(): Promise<void> {\n await (await this.#getHelpInline()).click();\n }\n\n /**\n * Clicks the reset button. Throws an error if the reset button is hidden.\n */\n public async clickResetButton(): Promise<void> {\n const defaultButton = (await this.#resetButtonDefault()) ?? null;\n const modernButton = (await this.#resetButtonModern()) ?? null;\n\n if (!defaultButton && !modernButton) {\n throw new Error('No reset button found.');\n }\n if (defaultButton) {\n return await defaultButton?.click();\n } else if (modernButton) {\n return await modernButton?.click();\n }\n }\n\n /**\n * Gets the colorpicker button's `aria-label`.\n */\n public async getAriaLabel(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-label');\n }\n\n /**\n * Gets the colorpicker button's `aria-labelledby`\n */\n public async getAriaLabelledby(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-labelledby');\n }\n\n /**\n * Gets the `SkyColorpickerDropdownHarness` for the colorpicker dropdown controlled by\n * the colorpicker button. Throws an error if the dropdown is not open.\n */\n public async getColorpickerDropdown(): Promise<SkyColorpickerDropdownHarness> {\n const overlayId = await this.#getOverlayId();\n\n if (!overlayId) {\n throw new Error(\n 'Unable to get colorpicker dropdown because dropdown is closed',\n );\n }\n\n return await this.#documentRootLocator.locatorFor(\n SkyColorpickerDropdownHarness.with({ selector: `#${overlayId}` }),\n )();\n }\n\n /**\n * Gets the `SkyIconHarness` for the colorpicker icon.\n * @internal\n */\n public async getColorpickerIcon(): Promise<SkyIconHarness> {\n return await this.locatorFor(SkyIconHarness)();\n }\n\n /**\n * Gets the custom form error.\n */\n public async getCustomError(errorName: string): Promise<SkyFormErrorHarness> {\n return await this.locatorFor(\n SkyFormErrorHarness.with({ errorName: errorName }),\n )();\n }\n\n /**\n * Gets the help inline popover content.\n */\n public async getHelpPopoverContent(): Promise<string | undefined> {\n return await (await this.#getHelpInline()).getPopoverContent();\n }\n\n /**\n * Gets the help inline popover title.\n */\n public async getHelpPopoverTitle(): Promise<string | undefined> {\n return await (await this.#getHelpInline()).getPopoverTitle();\n }\n\n /**\n * Gets the colorpicker component's hint text.\n */\n public async getHintText(): Promise<string> {\n return (await (await this.#getHintText()).text()).trim();\n }\n\n /**\n * Whether the colorpicker component's label is hidden.\n */\n public async getLabelHidden(): Promise<boolean> {\n return await (await this.#getLabel()).hasClass('sky-screen-reader-only');\n }\n\n /**\n * Gets the colorpicker component's label text.\n */\n public async getLabelText(): Promise<string> {\n return (await (await this.#getLabel()).text()).trim();\n }\n\n /**\n * Whether the custom error has fired.\n * @param errorName `errorName` of the custom error.\n */\n public async hasError(errorName: string): Promise<boolean> {\n return await (await this.#getFormErrors())?.hasError(errorName);\n }\n\n /**\n * Whether the required error has fired.\n */\n public async hasRequiredError(): Promise<boolean> {\n return await (await this.#getFormErrors())?.hasError('required');\n }\n\n /**\n * Whether the reset button is shown.\n */\n public async hasResetButton(): Promise<boolean> {\n const defaultButton = (await this.#resetButtonDefault()) ?? null;\n const modernButton = (await this.#resetButtonModern()) ?? null;\n\n return !!defaultButton || !!modernButton;\n }\n\n /**\n * Whether the colorpicker component is open.\n */\n public async isColorpickerOpen(): Promise<boolean> {\n try {\n await this.getColorpickerDropdown();\n return true;\n } catch {\n return false;\n }\n }\n\n /**\n * Whether the colorpicker component is stacked.\n */\n public async isStacked(): Promise<boolean> {\n return await (await this.host()).hasClass('sky-form-field-stacked');\n }\n\n async #getFormErrors(): Promise<SkyFormErrorsHarness> {\n return await this.locatorFor(SkyFormErrorsHarness)();\n }\n\n async #getHelpInline(): Promise<SkyHelpInlineHarness> {\n const harness = await this.locatorForOptional(SkyHelpInlineHarness)();\n\n if (harness) {\n return harness;\n }\n\n throw Error('No help inline found.');\n }\n\n async #getOverlayId(): Promise<string | null> {\n return await (await this.#getButton()).getAttribute('aria-controls');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/skyux-colorpicker.mjs CHANGED
@@ -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: "22.0.6", ngImport: i0, type: SkyColorpickerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
82
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerResourcesModule, exports: [SkyI18nModule] }); }
83
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerResourcesModule, imports: [SkyI18nModule] }); }
81
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
82
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerResourcesModule, exports: [SkyI18nModule] }); }
83
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerResourcesModule, imports: [SkyI18nModule] }); }
84
84
  }
85
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerResourcesModule, decorators: [{
85
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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: "22.0.6", ngImport: i0, type: SkyColorpickerInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
107
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerInputService }); }
106
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
107
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerInputService }); }
108
108
  }
109
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerInputService, decorators: [{
109
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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: "22.0.6", ngImport: i0, type: SkyColorpickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
447
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerService }); }
446
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
447
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerService }); }
448
448
  }
449
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerService, decorators: [{
449
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerService, decorators: [{
450
450
  type: Injectable
451
451
  }] });
452
452
 
@@ -708,10 +708,10 @@ class SkyColorpickerInputDirective {
708
708
  #setInputId(id) {
709
709
  this.#renderer.setAttribute(this.#elementRef.nativeElement, 'id', id);
710
710
  }
711
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
712
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyColorpickerInputDirective, isStandalone: true, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", id: "id", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { attributes: { "readonly": "true" }, listeners: { "input": "changeInput()", "change": "onChange()" }, classAttribute: "sky-colorpicker-input" }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, hostDirectives: [{ directive: i2.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0 }); }
711
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
712
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyColorpickerInputDirective, isStandalone: true, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", id: "id", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { attributes: { "readonly": "true" }, listeners: { "input": "changeInput()", "change": "onChange()" }, classAttribute: "sky-colorpicker-input" }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, hostDirectives: [{ directive: i2.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0 }); }
713
713
  }
714
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerInputDirective, decorators: [{
714
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerInputDirective, decorators: [{
715
715
  type: Directive,
716
716
  args: [{
717
717
  selector: '[skyColorpickerInput]',
@@ -819,10 +819,10 @@ class SkyColorpickerSliderDirective {
819
819
  this.#el.nativeElement.getBoundingClientRect().top -
820
820
  window.pageYOffset);
821
821
  }
822
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
823
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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 }); }
822
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
823
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", 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 }); }
824
824
  }
825
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerSliderDirective, decorators: [{
825
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerSliderDirective, decorators: [{
826
826
  type: Directive,
827
827
  args: [{
828
828
  selector: '[skyColorpickerSlider]',
@@ -875,10 +875,10 @@ class SkyColorpickerTextDirective {
875
875
  });
876
876
  }
877
877
  }
878
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
879
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyColorpickerTextDirective, isStandalone: true, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0 }); }
878
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
879
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyColorpickerTextDirective, isStandalone: true, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0 }); }
880
880
  }
881
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerTextDirective, decorators: [{
881
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerTextDirective, decorators: [{
882
882
  type: Directive,
883
883
  args: [{
884
884
  selector: '[skyColorpickerText]',
@@ -1439,14 +1439,14 @@ class SkyColorpickerComponent {
1439
1439
  }
1440
1440
  this.closePicker();
1441
1441
  }
1442
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1443
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [
1442
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1443
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
1444
1444
  SkyColorpickerInputService,
1445
1445
  SkyColorpickerService,
1446
1446
  { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
1447
1447
  ], 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.2/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: i2.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3.λ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: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ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: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1448
1448
  }
1449
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerComponent, decorators: [{
1449
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerComponent, decorators: [{
1450
1450
  type: Component,
1451
1451
  args: [{ selector: 'sky-colorpicker', providers: [
1452
1452
  SkyColorpickerInputService,
@@ -1529,16 +1529,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
1529
1529
  }] } });
1530
1530
 
1531
1531
  class SkyColorpickerModule {
1532
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1533
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
1532
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1533
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
1534
1534
  SkyColorpickerComponent,
1535
1535
  SkyColorpickerInputDirective,
1536
1536
  SkyColorpickerTextDirective,
1537
1537
  SkyColorpickerSliderDirective], exports: [SkyColorpickerComponent, SkyColorpickerInputDirective] }); }
1538
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
1538
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerModule, imports: [SkyColorpickerResourcesModule,
1539
1539
  SkyColorpickerComponent] }); }
1540
1540
  }
1541
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyColorpickerModule, decorators: [{
1541
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyColorpickerModule, decorators: [{
1542
1542
  type: NgModule,
1543
1543
  args: [{
1544
1544
  imports: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/colorpicker",
3
- "version": "15.0.0-alpha.4",
3
+ "version": "15.0.0-alpha.6",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -16,27 +16,21 @@
16
16
  },
17
17
  "homepage": "https://github.com/blackbaud/skyux#readme",
18
18
  "peerDependencies": {
19
- "@angular/cdk": "^22.0.4",
20
- "@angular/common": "^22.0.6",
21
- "@angular/core": "^22.0.6",
22
- "@angular/forms": "^22.0.6",
23
- "@angular/platform-browser": "^22.0.6",
24
- "@skyux-sdk/testing": "15.0.0-alpha.4",
25
- "@skyux/core": "15.0.0-alpha.4",
26
- "@skyux/forms": "15.0.0-alpha.4",
27
- "@skyux/help-inline": "15.0.0-alpha.4",
28
- "@skyux/i18n": "15.0.0-alpha.4",
29
- "@skyux/icon": "15.0.0-alpha.4",
30
- "@skyux/theme": "15.0.0-alpha.4"
19
+ "@angular/cdk": "^22.1.2",
20
+ "@angular/common": "^22.1.2",
21
+ "@angular/core": "^22.1.2",
22
+ "@angular/forms": "^22.1.2",
23
+ "@angular/platform-browser": "^22.1.2",
24
+ "@skyux/core": "15.0.0-alpha.6",
25
+ "@skyux/forms": "15.0.0-alpha.6",
26
+ "@skyux/help-inline": "15.0.0-alpha.6",
27
+ "@skyux/i18n": "15.0.0-alpha.6",
28
+ "@skyux/icon": "15.0.0-alpha.6",
29
+ "@skyux/theme": "15.0.0-alpha.6"
31
30
  },
32
31
  "dependencies": {
33
32
  "tslib": "^2.8.1"
34
33
  },
35
- "peerDependenciesMeta": {
36
- "@skyux-sdk/testing": {
37
- "optional": true
38
- }
39
- },
40
34
  "sideEffects": false,
41
35
  "module": "fesm2022/skyux-colorpicker.mjs",
42
36
  "typings": "types/skyux-colorpicker.d.ts",