@spectrum-web-components/color-area 0.4.0 → 0.4.1

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 (9) hide show
  1. package/custom-elements.json +4 -2
  2. package/package.json +5 -5
  3. package/src/ColorArea.d.ts +2 -0
  4. package/src/ColorArea.js +2 -0
  5. package/src/ColorArea.js.map +1 -1
  6. package/test/color-area.test-vrt.js +0 -15
  7. package/test/color-area.test-vrt.js.map +0 -1
  8. package/test/color-area.test.js +0 -554
  9. package/test/color-area.test.js.map +0 -1
package/custom-elements.json CHANGED
@@ -491,13 +491,15 @@
491
491
  "name": "input",
492
492
  "type": {
493
493
  "text": "Event"
494
- }
494
+ },
495
+ "description": "The value of the Color Area has changed."
495
496
  },
496
497
  {
497
498
  "name": "change",
498
499
  "type": {
499
500
  "text": "Event"
500
- }
501
+ },
502
+ "description": "An alteration to the value of the Color Area has been committed by the user."
501
503
  }
502
504
  ],
503
505
  "attributes": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/color-area",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -45,17 +45,17 @@
45
45
  ],
46
46
  "dependencies": {
47
47
  "@ctrl/tinycolor": "^3.3.3",
48
- "@spectrum-web-components/base": "^0.5.0",
49
- "@spectrum-web-components/color-handle": "^0.3.0",
48
+ "@spectrum-web-components/base": "^0.5.1",
49
+ "@spectrum-web-components/color-handle": "^0.3.1",
50
50
  "tslib": "^2.0.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@spectrum-css/colorarea": "^1.0.4"
53
+ "@spectrum-css/colorarea": "^1.0.9"
54
54
  },
55
55
  "types": "./src/index.d.ts",
56
56
  "customElements": "custom-elements.json",
57
57
  "sideEffects": [
58
58
  "./sp-*.js"
59
59
  ],
60
- "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
60
+ "gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
61
61
  }
package/src/ColorArea.d.ts CHANGED
@@ -4,6 +4,8 @@ import '@spectrum-web-components/color-handle/sp-color-handle.js';
4
4
  /**
5
5
  * @element sp-color-area
6
6
  * @slot gradient - a custom gradient visually outlining the available color values
7
+ * @fires input - The value of the Color Area has changed.
8
+ * @fires change - An alteration to the value of the Color Area has been committed by the user.
7
9
  */
8
10
  export declare class ColorArea extends SpectrumElement {
9
11
  static get styles(): CSSResultArray;
package/src/ColorArea.js CHANGED
@@ -21,6 +21,8 @@ import styles from './color-area.css.js';
21
21
  /**
22
22
  * @element sp-color-area
23
23
  * @slot gradient - a custom gradient visually outlining the available color values
24
+ * @fires input - The value of the Color Area has changed.
25
+ * @fires change - An alteration to the value of the Color Area has been committed by the user.
24
26
  */
25
27
  export class ColorArea extends SpectrumElement {
26
28
  constructor() {
package/src/ColorArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorArea.js","sourceRoot":"","sources":["ColorArea.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport {\n ColorHandle,\n ColorValue,\n extractHueAndSaturationRegExp,\n replaceHueRegExp,\n} from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n */\nexport class ColorArea extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String })\n public label: string | undefined;\n\n @property({ type: String, attribute: 'label-x' })\n public labelX = 'saturation';\n\n @property({ type: String, attribute: 'label-y' })\n public labelY = 'luminosity';\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: Number })\n public get hue(): number {\n return this._hue;\n }\n\n public set hue(value: number) {\n const hue = Math.min(360, Math.max(0, value));\n if (hue === this.hue) {\n return;\n }\n const oldValue = this.hue;\n const { s, v } = this._color.toHsv();\n this._color = new TinyColor({ h: hue, s, v });\n this._hue = hue;\n this.requestUpdate('hue', oldValue);\n }\n\n private _hue = 0;\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.color;\n }\n\n @property({ type: String })\n public get color(): ColorValue {\n switch (this._format.format) {\n case 'rgb':\n return this._format.isString\n ? this._color.toRgbString()\n : this._color.toRgb();\n case 'prgb':\n return this._format.isString\n ? this._color.toPercentageRgbString()\n : this._color.toPercentageRgb();\n case 'hex8':\n return this._format.isString\n ? this._color.toHex8String()\n : this._color.toHex8();\n case 'name':\n return this._color.toName() || this._color.toRgbString();\n case 'hsl':\n if (this._format.isString) {\n const hslString = this._color.toHslString();\n return hslString.replace(replaceHueRegExp, `$1${this.hue}`);\n } else {\n const { s, l, a } = this._color.toHsl();\n return { h: this.hue, s, l, a };\n }\n case 'hsv':\n if (this._format.isString) {\n const hsvString = this._color.toHsvString();\n return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);\n } else {\n const { s, v, a } = this._color.toHsv();\n return { h: this.hue, s, v, a };\n }\n case 'hex':\n case 'hex3':\n case 'hex4':\n case 'hex6':\n default:\n return this._format.isString\n ? this._color.toHexString()\n : this._color.toHex();\n }\n }\n\n public set color(color: ColorValue) {\n if (color === this.color) {\n return;\n }\n const oldValue = this._color;\n this._color = new TinyColor(color);\n const format = this._color.format;\n let isString = typeof color === 'string' || color instanceof String;\n\n if (format.startsWith('hex')) {\n isString = (color as string).startsWith('#');\n }\n\n this._format = {\n format,\n isString,\n };\n\n const { h, s, v } = this._color.toHsv();\n let originalHue: number | undefined = undefined;\n\n if (isString && format.startsWith('hs')) {\n const values = extractHueAndSaturationRegExp.exec(color as string);\n\n if (values !== null) {\n const [, h] = values;\n originalHue = Number(h);\n }\n } else if (!isString && format.startsWith('hs')) {\n const colorInput = this._color.originalInput;\n const colorValues = Object.values(colorInput);\n originalHue = colorValues[0];\n }\n\n this.hue = originalHue || h;\n this.x = s;\n this.y = 1 - v;\n this.requestUpdate('color', oldValue);\n }\n\n private _color = new TinyColor({ h: 0, s: 1, v: 1 });\n\n private _previousColor = new TinyColor({ h: 0, s: 1, v: 1 });\n\n private _format: { format: string; isString: boolean } = {\n format: '',\n isString: false,\n };\n\n @property({ attribute: false })\n private activeAxis = 'x';\n\n @property({ type: Number })\n public get x(): number {\n return this._x;\n }\n\n public set x(x: number) {\n if (x === this.x) {\n return;\n }\n const oldValue = this.x;\n if (this.inputX) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputX.value = x.toString();\n this._x = this.inputX.valueAsNumber;\n } else {\n this._x = x;\n }\n this.requestUpdate('x', oldValue);\n }\n\n private _x = 1;\n\n @property({ type: Number })\n public get y(): number {\n return this._y;\n }\n\n public set y(y: number) {\n if (y === this.y) {\n return;\n }\n const oldValue = this.y;\n if (this.inputY) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputY.value = y.toString();\n this._y = this.inputY.valueAsNumber;\n } else {\n this._y = y;\n }\n this.requestUpdate('y', oldValue);\n }\n\n private _y = 0;\n\n @property({ type: Number })\n public step = 0.01;\n\n @query('[name=\"x\"]')\n public inputX!: HTMLInputElement;\n\n @query('[name=\"y\"]')\n public inputY!: HTMLInputElement;\n\n private altered = 0;\n\n private activeKeys = new Set();\n\n public focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n if (this.activeAxis === 'x') {\n this.inputX.focus();\n } else {\n this.inputY.focus();\n }\n }\n\n private handleFocusin(): void {\n this.focused = true;\n }\n\n private handleFocusout(): void {\n if (this._pointerDown) {\n return;\n }\n this.focused = false;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n const isArrowKey = code.search('Arrow') === 0;\n if (isArrowKey) {\n event.preventDefault();\n this.activeKeys.add(code);\n this.handleKeypress();\n }\n }\n\n private handleKeypress(): void {\n let deltaX = 0;\n let deltaY = 0;\n const step = Math.max(this.step, this.altered * 5 * this.step);\n this.activeKeys.forEach((code) => {\n switch (code) {\n case 'ArrowUp':\n deltaY = step * -1;\n break;\n case 'ArrowDown':\n deltaY = step * 1;\n break;\n case 'ArrowLeft':\n deltaX = step * -1;\n break;\n case 'ArrowRight':\n deltaX = step * 1;\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n });\n if (deltaX != 0) {\n this.activeAxis = 'x';\n this.inputX.focus();\n } else if (deltaY != 0) {\n this.activeAxis = 'y';\n this.inputY.focus();\n }\n this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n this._previousColor = this._color.clone();\n this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });\n\n if (deltaX != 0 || deltaY != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this._color = this._previousColor;\n }\n }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n event.preventDefault();\n const { code } = event;\n this.activeKeys.delete(code);\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber, name } = event.target;\n\n this[name as 'x' | 'y'] = valueAsNumber;\n this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this._previousColor = this._color.clone();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n const [x, y] = this.calculateHandlePosition(event);\n this._color = new TinyColor({ h: this.hue, s: x, v: 1 - y });\n\n this.x = x;\n this.y = y;\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n event.preventDefault();\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n this.inputX.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n if (!applyDefault) {\n this._color = this._previousColor;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): [number, number] {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return [this.x, this.y];\n }\n const rect = this.boundingClientRect;\n const minOffsetX = rect.left;\n const minOffsetY = rect.top;\n const offsetX = event.clientX;\n const offsetY = event.clientY;\n const width = rect.width;\n const height = rect.height;\n\n const percentX = Math.max(\n 0,\n Math.min(1, (offsetX - minOffsetX) / width)\n );\n const percentY = Math.max(\n 0,\n Math.min(1, (offsetY - minOffsetY) / height)\n );\n\n return [percentX, percentY];\n }\n\n private handleAreaPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n protected render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n return html`\n <div\n @pointerdown=${this.handleAreaPointerdown}\n class=\"gradient\"\n style=\"background:\n linear-gradient(to top, black 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%),\n linear-gradient(to right, white 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);\"\n >\n <slot name=\"gradient\"></slot>\n </div>\n\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=${this._color.toHslString()}\n ?disabled=${this.disabled}\n style=\"transform: translate(${this.x * width}px, ${this.y *\n height}px);\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n ></sp-color-handle>\n\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"x\"\n aria-label=${this.label ?? this.labelX}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.x)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"y\"\n aria-label=${this.label ?? this.labelY}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.y)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n `;\n }\n\n protected firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n\n this.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keyup', this.handleKeyup);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n protected updated(changed: PropertyValues): void {\n super.updated(changed);\n if (this.x !== this.inputX.valueAsNumber) {\n this.x = this.inputX.valueAsNumber;\n }\n if (this.y !== this.inputY.valueAsNumber) {\n this.y = this.inputY.valueAsNumber;\n }\n if (changed.has('focused') && this.focused) {\n // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n // so that browsers with certain settings (Webkit) aren't allowed\n // multiple tab stops within the Color Area.\n const parentX = this.inputX.parentElement as HTMLDivElement;\n const parentY = this.inputY.parentElement as HTMLDivElement;\n if (!parentX.shadowRoot && !parentY.shadowRoot) {\n parentX.attachShadow({ mode: 'open' });\n parentY.attachShadow({ mode: 'open' });\n const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n }\n }\n }\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (\n !this.observer &&\n (window as unknown as WithSWCResizeObserver).ResizeObserver\n ) {\n this.observer = new (\n window as unknown as WithSWCResizeObserver\n ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n });\n }\n this.observer?.observe(this);\n }\n\n public disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"]}
1
+ {"version":3,"file":"ColorArea.js","sourceRoot":"","sources":["ColorArea.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport {\n ColorHandle,\n ColorValue,\n extractHueAndSaturationRegExp,\n replaceHueRegExp,\n} from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String })\n public label: string | undefined;\n\n @property({ type: String, attribute: 'label-x' })\n public labelX = 'saturation';\n\n @property({ type: String, attribute: 'label-y' })\n public labelY = 'luminosity';\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: Number })\n public get hue(): number {\n return this._hue;\n }\n\n public set hue(value: number) {\n const hue = Math.min(360, Math.max(0, value));\n if (hue === this.hue) {\n return;\n }\n const oldValue = this.hue;\n const { s, v } = this._color.toHsv();\n this._color = new TinyColor({ h: hue, s, v });\n this._hue = hue;\n this.requestUpdate('hue', oldValue);\n }\n\n private _hue = 0;\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.color;\n }\n\n @property({ type: String })\n public get color(): ColorValue {\n switch (this._format.format) {\n case 'rgb':\n return this._format.isString\n ? this._color.toRgbString()\n : this._color.toRgb();\n case 'prgb':\n return this._format.isString\n ? this._color.toPercentageRgbString()\n : this._color.toPercentageRgb();\n case 'hex8':\n return this._format.isString\n ? this._color.toHex8String()\n : this._color.toHex8();\n case 'name':\n return this._color.toName() || this._color.toRgbString();\n case 'hsl':\n if (this._format.isString) {\n const hslString = this._color.toHslString();\n return hslString.replace(replaceHueRegExp, `$1${this.hue}`);\n } else {\n const { s, l, a } = this._color.toHsl();\n return { h: this.hue, s, l, a };\n }\n case 'hsv':\n if (this._format.isString) {\n const hsvString = this._color.toHsvString();\n return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);\n } else {\n const { s, v, a } = this._color.toHsv();\n return { h: this.hue, s, v, a };\n }\n case 'hex':\n case 'hex3':\n case 'hex4':\n case 'hex6':\n default:\n return this._format.isString\n ? this._color.toHexString()\n : this._color.toHex();\n }\n }\n\n public set color(color: ColorValue) {\n if (color === this.color) {\n return;\n }\n const oldValue = this._color;\n this._color = new TinyColor(color);\n const format = this._color.format;\n let isString = typeof color === 'string' || color instanceof String;\n\n if (format.startsWith('hex')) {\n isString = (color as string).startsWith('#');\n }\n\n this._format = {\n format,\n isString,\n };\n\n const { h, s, v } = this._color.toHsv();\n let originalHue: number | undefined = undefined;\n\n if (isString && format.startsWith('hs')) {\n const values = extractHueAndSaturationRegExp.exec(color as string);\n\n if (values !== null) {\n const [, h] = values;\n originalHue = Number(h);\n }\n } else if (!isString && format.startsWith('hs')) {\n const colorInput = this._color.originalInput;\n const colorValues = Object.values(colorInput);\n originalHue = colorValues[0];\n }\n\n this.hue = originalHue || h;\n this.x = s;\n this.y = 1 - v;\n this.requestUpdate('color', oldValue);\n }\n\n private _color = new TinyColor({ h: 0, s: 1, v: 1 });\n\n private _previousColor = new TinyColor({ h: 0, s: 1, v: 1 });\n\n private _format: { format: string; isString: boolean } = {\n format: '',\n isString: false,\n };\n\n @property({ attribute: false })\n private activeAxis = 'x';\n\n @property({ type: Number })\n public get x(): number {\n return this._x;\n }\n\n public set x(x: number) {\n if (x === this.x) {\n return;\n }\n const oldValue = this.x;\n if (this.inputX) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputX.value = x.toString();\n this._x = this.inputX.valueAsNumber;\n } else {\n this._x = x;\n }\n this.requestUpdate('x', oldValue);\n }\n\n private _x = 1;\n\n @property({ type: Number })\n public get y(): number {\n return this._y;\n }\n\n public set y(y: number) {\n if (y === this.y) {\n return;\n }\n const oldValue = this.y;\n if (this.inputY) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputY.value = y.toString();\n this._y = this.inputY.valueAsNumber;\n } else {\n this._y = y;\n }\n this.requestUpdate('y', oldValue);\n }\n\n private _y = 0;\n\n @property({ type: Number })\n public step = 0.01;\n\n @query('[name=\"x\"]')\n public inputX!: HTMLInputElement;\n\n @query('[name=\"y\"]')\n public inputY!: HTMLInputElement;\n\n private altered = 0;\n\n private activeKeys = new Set();\n\n public focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n if (this.activeAxis === 'x') {\n this.inputX.focus();\n } else {\n this.inputY.focus();\n }\n }\n\n private handleFocusin(): void {\n this.focused = true;\n }\n\n private handleFocusout(): void {\n if (this._pointerDown) {\n return;\n }\n this.focused = false;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n const isArrowKey = code.search('Arrow') === 0;\n if (isArrowKey) {\n event.preventDefault();\n this.activeKeys.add(code);\n this.handleKeypress();\n }\n }\n\n private handleKeypress(): void {\n let deltaX = 0;\n let deltaY = 0;\n const step = Math.max(this.step, this.altered * 5 * this.step);\n this.activeKeys.forEach((code) => {\n switch (code) {\n case 'ArrowUp':\n deltaY = step * -1;\n break;\n case 'ArrowDown':\n deltaY = step * 1;\n break;\n case 'ArrowLeft':\n deltaX = step * -1;\n break;\n case 'ArrowRight':\n deltaX = step * 1;\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n });\n if (deltaX != 0) {\n this.activeAxis = 'x';\n this.inputX.focus();\n } else if (deltaY != 0) {\n this.activeAxis = 'y';\n this.inputY.focus();\n }\n this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n this._previousColor = this._color.clone();\n this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });\n\n if (deltaX != 0 || deltaY != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this._color = this._previousColor;\n }\n }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n event.preventDefault();\n const { code } = event;\n this.activeKeys.delete(code);\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber, name } = event.target;\n\n this[name as 'x' | 'y'] = valueAsNumber;\n this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this._previousColor = this._color.clone();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n const [x, y] = this.calculateHandlePosition(event);\n this._color = new TinyColor({ h: this.hue, s: x, v: 1 - y });\n\n this.x = x;\n this.y = y;\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n event.preventDefault();\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n this.inputX.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n if (!applyDefault) {\n this._color = this._previousColor;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): [number, number] {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return [this.x, this.y];\n }\n const rect = this.boundingClientRect;\n const minOffsetX = rect.left;\n const minOffsetY = rect.top;\n const offsetX = event.clientX;\n const offsetY = event.clientY;\n const width = rect.width;\n const height = rect.height;\n\n const percentX = Math.max(\n 0,\n Math.min(1, (offsetX - minOffsetX) / width)\n );\n const percentY = Math.max(\n 0,\n Math.min(1, (offsetY - minOffsetY) / height)\n );\n\n return [percentX, percentY];\n }\n\n private handleAreaPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n protected render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n return html`\n <div\n @pointerdown=${this.handleAreaPointerdown}\n class=\"gradient\"\n style=\"background:\n linear-gradient(to top, black 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%),\n linear-gradient(to right, white 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);\"\n >\n <slot name=\"gradient\"></slot>\n </div>\n\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=${this._color.toHslString()}\n ?disabled=${this.disabled}\n style=\"transform: translate(${this.x * width}px, ${this.y *\n height}px);\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [['pointerup', 'pointercancel'], this.handlePointerup],\n })}\n ></sp-color-handle>\n\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"x\"\n aria-label=${this.label ?? this.labelX}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.x)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"y\"\n aria-label=${this.label ?? this.labelY}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.y)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n `;\n }\n\n protected firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n\n this.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keyup', this.handleKeyup);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n protected updated(changed: PropertyValues): void {\n super.updated(changed);\n if (this.x !== this.inputX.valueAsNumber) {\n this.x = this.inputX.valueAsNumber;\n }\n if (this.y !== this.inputY.valueAsNumber) {\n this.y = this.inputY.valueAsNumber;\n }\n if (changed.has('focused') && this.focused) {\n // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n // so that browsers with certain settings (Webkit) aren't allowed\n // multiple tab stops within the Color Area.\n const parentX = this.inputX.parentElement as HTMLDivElement;\n const parentY = this.inputY.parentElement as HTMLDivElement;\n if (!parentX.shadowRoot && !parentY.shadowRoot) {\n parentX.attachShadow({ mode: 'open' });\n parentY.attachShadow({ mode: 'open' });\n const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n }\n }\n }\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (\n !this.observer &&\n (window as unknown as WithSWCResizeObserver).ResizeObserver\n ) {\n this.observer = new (\n window as unknown as WithSWCResizeObserver\n ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n });\n }\n this.observer?.observe(this);\n }\n\n public disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"]}
package/test/color-area.test-vrt.js DELETED
@@ -1,15 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import * as stories from '../stories/color-area.stories.js';
13
- import { regressVisuals } from '../../../test/visual/test.js';
14
- regressVisuals('ColorAreaStories', stories);
15
- //# sourceMappingURL=color-area.test-vrt.js.map
package/test/color-area.test-vrt.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-area.test-vrt.js","sourceRoot":"","sources":["color-area.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/color-area.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ColorAreaStories', stories);\n"]}
package/test/color-area.test.js DELETED
@@ -1,554 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { elementUpdated, expect, fixture, html, nextFrame, oneEvent, } from '@open-wc/testing';
13
- import { TinyColor } from '@ctrl/tinycolor';
14
- import '../sp-color-area.js';
15
- import { sendKeys } from '@web/test-runner-commands';
16
- import { spy } from 'sinon';
17
- describe('ColorArea', () => {
18
- it('loads default color-area accessibly', async () => {
19
- const el = await fixture(html `
20
- <sp-color-area></sp-color-area>
21
- `);
22
- await elementUpdated(el);
23
- await expect(el).to.be.accessible();
24
- });
25
- it('manages a single tab stop', async () => {
26
- const test = await fixture(html `
27
- <div>
28
- <input type="text" />
29
- <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
30
- <input type="text" />
31
- </div>
32
- `);
33
- const el = test.querySelector('sp-color-area');
34
- const input1 = test.querySelector('input:nth-of-type(1)');
35
- const input2 = test.querySelector('input:nth-of-type(2)');
36
- await elementUpdated(el);
37
- input1.focus();
38
- expect(document.activeElement, 'before input').to.equal(input1);
39
- await sendKeys({
40
- press: 'Tab',
41
- });
42
- await elementUpdated(el);
43
- expect(document.activeElement, 'element').to.equal(el);
44
- let value = el.value;
45
- await sendKeys({
46
- press: 'ArrowRight',
47
- });
48
- await elementUpdated(el);
49
- expect(el.value).to.not.equal(value);
50
- await sendKeys({
51
- press: 'Tab',
52
- });
53
- await elementUpdated(el);
54
- expect(document.activeElement, 'after input').to.equal(input2);
55
- await sendKeys({
56
- press: 'Shift+Tab',
57
- });
58
- await elementUpdated(el);
59
- expect(document.activeElement, 'element again').to.equal(el);
60
- value = el.value;
61
- await sendKeys({
62
- press: 'ArrowDown',
63
- });
64
- expect(el.value).to.not.equal(value);
65
- await sendKeys({
66
- press: 'Shift+Tab',
67
- });
68
- expect(document.activeElement, 'before input again').to.equal(input1);
69
- });
70
- it('provides separate aria-labels for X and Y inputs', async () => {
71
- const el = await fixture(html `
72
- <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
73
- `);
74
- const inputX = el.shadowRoot.querySelector('input[name="x"]');
75
- const inputY = el.shadowRoot.querySelector('input[name="y"]');
76
- expect(inputX === null || inputX === void 0 ? void 0 : inputX.getAttribute('aria-label')).to.equal('saturation');
77
- expect(inputY === null || inputY === void 0 ? void 0 : inputY.getAttribute('aria-label')).to.equal('luminosity');
78
- });
79
- it('overrides both X and Y labels with a provided "label" attribute', async () => {
80
- const el = await fixture(html `
81
- <sp-color-area
82
- color="hsl(100, 50%, 50%)"
83
- label="something custom"
84
- ></sp-color-area>
85
- `);
86
- const inputX = el.shadowRoot.querySelector('input[name="x"]');
87
- const inputY = el.shadowRoot.querySelector('input[name="y"]');
88
- expect(inputX === null || inputX === void 0 ? void 0 : inputX.getAttribute('aria-label')).to.equal('something custom');
89
- expect(inputY === null || inputY === void 0 ? void 0 : inputY.getAttribute('aria-label')).to.equal('something custom');
90
- });
91
- it('accepts "color" values as hsl', async () => {
92
- const el = await fixture(html `
93
- <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
94
- `);
95
- await elementUpdated(el);
96
- expect(el.hue, 'hue').to.equal(100);
97
- expect(el.x, 'x').to.equal(0.67);
98
- expect(el.y, 'y').to.equal(0.25);
99
- });
100
- it('accepts "color" values as hsla', async () => {
101
- const el = await fixture(html `
102
- <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
103
- `);
104
- await elementUpdated(el);
105
- expect(el.hue, 'hugh').to.equal(100);
106
- expect(el.x, 'ex').to.equal(0.67);
107
- expect(el.y, 'why').to.equal(0.25);
108
- el.color = 'hsla(120, 100%, 0, 1)';
109
- await elementUpdated(el);
110
- expect(el.hue, 'hue 2').to.equal(120);
111
- expect(el.x, 'x 2').to.equal(0);
112
- expect(el.y, 'y 2').to.equal(1);
113
- });
114
- it('accepts "color" values as rgb', async () => {
115
- const el = await fixture(html `
116
- <sp-color-area color="rgb(0,255,0)"></sp-color-area>
117
- `);
118
- await elementUpdated(el);
119
- expect(el.hue).to.equal(120);
120
- expect(el.x).to.equal(1);
121
- expect(el.y).to.equal(0);
122
- });
123
- it('accepts "color" values as hex', async () => {
124
- const el = await fixture(html `
125
- <sp-color-area color="#00ff00"></sp-color-area>
126
- `);
127
- await elementUpdated(el);
128
- expect(el.hue).to.equal(120);
129
- expect(el.x).to.equal(1);
130
- expect(el.y).to.equal(0);
131
- });
132
- it('accepts "Arrow*" keypresses', async () => {
133
- const el = await fixture(html `
134
- <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
135
- `);
136
- expect(el.hue, 'hue').to.equal(100);
137
- expect(el.x, 'x').to.equal(0.67);
138
- expect(el.y, 'y').to.equal(0.25);
139
- el.inputX.focus();
140
- await nextFrame();
141
- let changeEvent = oneEvent(el, 'change');
142
- await sendKeys({
143
- press: 'ArrowUp',
144
- });
145
- await changeEvent;
146
- changeEvent = oneEvent(el, 'change');
147
- await sendKeys({
148
- press: 'ArrowUp',
149
- });
150
- await changeEvent;
151
- expect(el.x).to.equal(0.67);
152
- expect(el.y).to.equal(0.23);
153
- changeEvent = oneEvent(el, 'change');
154
- await sendKeys({
155
- press: 'ArrowRight',
156
- });
157
- await changeEvent;
158
- changeEvent = oneEvent(el, 'change');
159
- await sendKeys({
160
- press: 'ArrowRight',
161
- });
162
- await changeEvent;
163
- expect(el.x).to.equal(0.69);
164
- expect(el.y).to.equal(0.23);
165
- changeEvent = oneEvent(el, 'change');
166
- await sendKeys({
167
- press: 'ArrowDown',
168
- });
169
- await changeEvent;
170
- changeEvent = oneEvent(el, 'change');
171
- await sendKeys({
172
- press: 'ArrowDown',
173
- });
174
- await changeEvent;
175
- expect(el.x).to.equal(0.69);
176
- expect(el.y).to.equal(0.25);
177
- changeEvent = oneEvent(el, 'change');
178
- await sendKeys({
179
- press: 'ArrowLeft',
180
- });
181
- await changeEvent;
182
- changeEvent = oneEvent(el, 'change');
183
- await sendKeys({
184
- press: 'ArrowLeft',
185
- });
186
- await changeEvent;
187
- expect(el.x).to.equal(0.67);
188
- expect(el.y).to.equal(0.25);
189
- });
190
- it('accepts "Arrow*" keypresses with alteration', async () => {
191
- const el = await fixture(html `
192
- <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
193
- `);
194
- await elementUpdated(el);
195
- el.focus();
196
- expect(el.hue, 'hue').to.equal(100);
197
- expect(el.x, 'x').to.equal(0.67);
198
- expect(el.y, 'y').to.equal(0.25);
199
- await sendKeys({
200
- down: 'Shift',
201
- });
202
- await elementUpdated(el);
203
- await sendKeys({
204
- press: 'ArrowUp',
205
- });
206
- // This ensures that all the keystrokes are processed seperately
207
- await elementUpdated(el);
208
- await sendKeys({
209
- press: 'ArrowUp',
210
- });
211
- await elementUpdated(el);
212
- expect(el.color).to.equal('hsl(100, 65%, 57%)');
213
- expect(el.x, 'first').to.equal(0.67);
214
- expect(el.y).to.equal(0.15);
215
- await sendKeys({
216
- press: 'ArrowRight',
217
- });
218
- await elementUpdated(el);
219
- await sendKeys({
220
- press: 'ArrowRight',
221
- });
222
- await elementUpdated(el);
223
- expect(el.color).to.equal('hsl(100, 69%, 52%)');
224
- expect(el.x).to.equal(0.77);
225
- expect(el.y).to.equal(0.15);
226
- await sendKeys({
227
- press: 'ArrowDown',
228
- });
229
- await elementUpdated(el);
230
- await sendKeys({
231
- press: 'ArrowDown',
232
- });
233
- await elementUpdated(el);
234
- expect(el.color).to.equal('hsl(100, 63%, 46%)');
235
- expect(el.x).to.equal(0.77);
236
- expect(el.y).to.equal(0.25);
237
- await sendKeys({
238
- press: 'ArrowLeft',
239
- });
240
- await elementUpdated(el);
241
- await sendKeys({
242
- press: 'ArrowLeft',
243
- });
244
- await elementUpdated(el);
245
- await sendKeys({
246
- up: 'Shift',
247
- });
248
- await elementUpdated(el);
249
- expect(el.color).to.equal('hsl(100, 50%, 50%)');
250
- expect(el.x, 'last').to.equal(0.67);
251
- expect(el.y).to.equal(0.25);
252
- });
253
- it('accepts pointer events', async () => {
254
- const el = await fixture(html `
255
- <sp-color-area
256
- style="--spectrum-colorarea-default-width: 192px; --spectrum-colorarea-default-height: 192px;"
257
- ></sp-color-area>
258
- `);
259
- await elementUpdated(el);
260
- await elementUpdated(el);
261
- const { handle } = el;
262
- handle.setPointerCapture = () => {
263
- return;
264
- };
265
- handle.releasePointerCapture = () => {
266
- return;
267
- };
268
- expect(el.hue).to.equal(0);
269
- expect(el.x).to.equal(1);
270
- expect(el.y).to.equal(0);
271
- handle.dispatchEvent(new PointerEvent('pointerdown', {
272
- button: 1,
273
- pointerId: 1,
274
- clientX: 100,
275
- clientY: 100,
276
- bubbles: true,
277
- composed: true,
278
- cancelable: true,
279
- }));
280
- await elementUpdated(el);
281
- expect(el.hue).to.equal(0);
282
- expect(el.x).to.equal(1);
283
- expect(el.y).to.equal(0);
284
- const root = el.shadowRoot ? el.shadowRoot : el;
285
- const gradient = root.querySelector('.gradient');
286
- gradient.dispatchEvent(new PointerEvent('pointerdown', {
287
- button: 1,
288
- pointerId: 1,
289
- clientX: 100,
290
- clientY: 100,
291
- bubbles: true,
292
- composed: true,
293
- cancelable: true,
294
- }));
295
- await elementUpdated(el);
296
- expect(el.hue).to.equal(0);
297
- expect(el.x).to.equal(1);
298
- expect(el.y).to.equal(0);
299
- gradient.dispatchEvent(new PointerEvent('pointerdown', {
300
- pointerId: 1,
301
- clientX: 100,
302
- clientY: 100,
303
- bubbles: true,
304
- composed: true,
305
- cancelable: true,
306
- }));
307
- await elementUpdated(el);
308
- expect(el.hue).to.equal(0);
309
- expect(el.x, 'pointerdown x').to.equal(0.48);
310
- expect(el.y, 'pointerdown y').to.equal(0.48);
311
- handle.dispatchEvent(new PointerEvent('pointermove', {
312
- pointerId: 1,
313
- clientX: 110,
314
- clientY: 110,
315
- bubbles: true,
316
- composed: true,
317
- cancelable: true,
318
- }));
319
- handle.dispatchEvent(new PointerEvent('pointerup', {
320
- pointerId: 1,
321
- clientX: 110,
322
- clientY: 110,
323
- bubbles: true,
324
- composed: true,
325
- cancelable: true,
326
- }));
327
- await elementUpdated(el);
328
- expect(el.hue).to.equal(0);
329
- expect(el.x).to.equal(0.53);
330
- expect(el.y).to.equal(0.53);
331
- });
332
- it('responds to events on the internal input element', async () => {
333
- const inputSpy = spy();
334
- const changeSpy = spy();
335
- const el = await fixture(html `
336
- <sp-color-area
337
- color="hsla(100, 50%, 50%, 1)"
338
- @change=${() => changeSpy()}
339
- @input=${() => inputSpy()}
340
- ></sp-color-area>
341
- `);
342
- await elementUpdated(el);
343
- el.inputX.focus();
344
- el.inputX.dispatchEvent(new Event('input', {
345
- bubbles: true,
346
- composed: true,
347
- }));
348
- el.inputX.dispatchEvent(new Event('change', {
349
- bubbles: true,
350
- composed: false, // native change events do not compose themselves by default
351
- }));
352
- expect(inputSpy.callCount).to.equal(1);
353
- expect(changeSpy.callCount).to.equal(1);
354
- el.inputY.focus();
355
- el.inputY.dispatchEvent(new Event('input', {
356
- bubbles: true,
357
- composed: true,
358
- }));
359
- el.inputY.dispatchEvent(new Event('change', {
360
- bubbles: true,
361
- composed: false, // native change events do not compose themselves by default
362
- }));
363
- expect(inputSpy.callCount).to.equal(2);
364
- expect(changeSpy.callCount).to.equal(2);
365
- });
366
- it('dispatches input and change events in response to "Arrow*" keypresses', async () => {
367
- const inputSpy = spy();
368
- const changeSpy = spy();
369
- const el = await fixture(html `
370
- <sp-color-area
371
- color="hsla(100, 50%, 50%, 1)"
372
- @change=${() => changeSpy()}
373
- @input=${() => inputSpy()}
374
- ></sp-color-area>
375
- `);
376
- await elementUpdated(el);
377
- el.inputX.focus();
378
- inputSpy.resetHistory();
379
- changeSpy.resetHistory();
380
- await sendKeys({ press: 'ArrowRight' });
381
- await sendKeys({ press: 'ArrowRight' });
382
- await elementUpdated(el);
383
- expect(inputSpy.callCount).to.equal(2);
384
- expect(changeSpy.callCount).to.equal(2);
385
- el.inputY.focus();
386
- inputSpy.resetHistory();
387
- changeSpy.resetHistory();
388
- await sendKeys({ press: 'ArrowUp' });
389
- await sendKeys({ press: 'ArrowUp' });
390
- await elementUpdated(el);
391
- expect(inputSpy.callCount).to.equal(2);
392
- expect(changeSpy.callCount).to.equal(2);
393
- el.inputY.focus();
394
- inputSpy.resetHistory();
395
- changeSpy.resetHistory();
396
- await sendKeys({ press: 'ArrowDown' });
397
- await sendKeys({ press: 'ArrowDown' });
398
- await elementUpdated(el);
399
- expect(inputSpy.callCount).to.equal(2);
400
- expect(changeSpy.callCount).to.equal(2);
401
- el.inputX.focus();
402
- inputSpy.resetHistory();
403
- changeSpy.resetHistory();
404
- await sendKeys({ press: 'ArrowLeft' });
405
- await sendKeys({ press: 'ArrowLeft' });
406
- await elementUpdated(el);
407
- expect(inputSpy.callCount).to.equal(2);
408
- expect(changeSpy.callCount).to.equal(2);
409
- });
410
- it('retains `hue` value when s = 0 in HSL string format', async () => {
411
- const el = await fixture(html `
412
- <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
413
- `);
414
- await elementUpdated(el);
415
- expect(el.hue, 'hue').to.equal(100);
416
- expect(el.x, 'x').to.equal(0.67);
417
- expect(el.y, 'y').to.equal(0.25);
418
- expect(el.color).to.equal('hsl(100, 50%, 50%)');
419
- el.color = 'hsl(100, 0%, 50%)';
420
- await elementUpdated(el);
421
- expect(el.hue, 'new hue').to.equal(100);
422
- expect(el.x, 'new x').to.equal(0);
423
- expect(el.y, 'new y').to.equal(0.5);
424
- expect(el.color).to.equal('hsl(100, 0%, 50%)');
425
- });
426
- it('retains `hue` value when s = 0 in HSL object format', async () => {
427
- let inputColor = { h: 100, s: 0.5, l: 0.5 };
428
- const el = await fixture(html `
429
- <sp-color-area .color=${inputColor}></sp-color-area>
430
- `);
431
- await elementUpdated(el);
432
- let outputColor = el.color;
433
- const variance = 0.00005;
434
- expect(el.hue).to.equal(100);
435
- expect(el.x, 'x').to.equal(0.67);
436
- expect(el.y, 'y').to.equal(0.25);
437
- expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
438
- expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
439
- expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);
440
- inputColor = { h: 100, s: 0, l: 0.5 };
441
- el.color = inputColor;
442
- await elementUpdated(el);
443
- outputColor = el.color;
444
- expect(el.hue).to.equal(100);
445
- expect(el.x, 'x').to.equal(0);
446
- expect(el.y, 'y').to.equal(0.5);
447
- expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
448
- expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
449
- expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);
450
- });
451
- it('retains `hue` value when s = 0 in HSV string format', async () => {
452
- const el = await fixture(html `
453
- <sp-color-area color="hsv(100, 50%, 50%)"></sp-color-area>
454
- `);
455
- await elementUpdated(el);
456
- expect(el.hue, 'hue').to.equal(100);
457
- expect(el.x, 'x').to.equal(0.5);
458
- expect(el.y, 'y').to.equal(0.5);
459
- expect(el.color).to.equal('hsv(100, 50%, 50%)');
460
- el.color = 'hsv(100, 0%, 50%)';
461
- await elementUpdated(el);
462
- expect(el.hue, 'new hue').to.equal(100);
463
- expect(el.x, 'new x').to.equal(0);
464
- expect(el.y, 'new y').to.equal(0.5);
465
- expect(el.color).to.equal('hsv(100, 0%, 50%)');
466
- });
467
- it('retains `hue` value when s = 0 in HSV object format', async () => {
468
- let inputColor = { h: 100, s: 0.5, v: 0.5 };
469
- const el = await fixture(html `
470
- <sp-color-area .color=${inputColor}></sp-color-area>
471
- `);
472
- await elementUpdated(el);
473
- let outputColor = el.color;
474
- const variance = 0.00005;
475
- expect(el.hue).to.equal(100);
476
- expect(el.x, 'x').to.equal(0.5);
477
- expect(el.y, 'y').to.equal(0.5);
478
- expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
479
- expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
480
- expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);
481
- inputColor = { h: 100, s: 0, v: 0.5 };
482
- el.color = inputColor;
483
- await elementUpdated(el);
484
- outputColor = el.color;
485
- expect(el.hue).to.equal(100);
486
- expect(el.x, 'x').to.equal(0);
487
- expect(el.y, 'y').to.equal(0.5);
488
- expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
489
- expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
490
- expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);
491
- });
492
- const colorFormats = [
493
- //rgb
494
- { name: 'RGB String', color: 'rgb(204, 51, 204)' },
495
- { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },
496
- //prgb
497
- { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },
498
- { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },
499
- // hex
500
- { name: 'Hex', color: 'cc33cc' },
501
- { name: 'Hex String', color: '#cc33cc' },
502
- // hex8
503
- { name: 'Hex8', color: 'cc33ccff' },
504
- { name: 'Hex8 String', color: '#cc33ccff' },
505
- // name
506
- { name: 'string', color: 'red' },
507
- // hsl
508
- { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },
509
- { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },
510
- // hsv
511
- { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },
512
- { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },
513
- ];
514
- colorFormats.map((format) => {
515
- it(`maintains \`color\` format as ${format.name}`, async () => {
516
- const el = await fixture(html `
517
- <sp-color-area></sp-color-area>
518
- `);
519
- el.color = format.color;
520
- if (format.name.startsWith('Hex')) {
521
- expect(el.color).to.equal(format.color);
522
- }
523
- else
524
- expect(el.color).to.deep.equal(format.color);
525
- });
526
- });
527
- it(`maintains \`color\` format as TinyColor`, async () => {
528
- const el = await fixture(html `
529
- <sp-color-area></sp-color-area>
530
- `);
531
- const color = new TinyColor('rgb(204, 51, 204)');
532
- el.color = color;
533
- expect(color.equals(el.color));
534
- });
535
- it(`resolves Hex3 format to Hex6 format`, async () => {
536
- const el = await fixture(html `
537
- <sp-color-area></sp-color-area>
538
- `);
539
- el.color = '0f0';
540
- expect(el.color).to.equal('00ff00');
541
- el.color = '#1e0';
542
- expect(el.color).to.equal('#11ee00');
543
- });
544
- it(`resolves Hex4 format to Hex8 format`, async () => {
545
- const el = await fixture(html `
546
- <sp-color-area></sp-color-area>
547
- `);
548
- el.color = 'f3af';
549
- expect(el.color).to.equal('ff33aaff');
550
- el.color = '#f3af';
551
- expect(el.color).to.equal('#ff33aaff');
552
- });
553
- });
554
- //# sourceMappingURL=color-area.test.js.map
package/test/color-area.test.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"color-area.test.js","sourceRoot":"","sources":["color-area.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';\n\nimport '../sp-color-area.js';\nimport { ColorArea } from '..';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\n\ndescribe('ColorArea', () => {\n it('loads default color-area accessibly', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('manages a single tab stop', async () => {\n const test = await fixture<HTMLDivElement>(\n html`\n <div>\n <input type=\"text\" />\n <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n <input type=\"text\" />\n </div>\n `\n );\n const el = test.querySelector('sp-color-area') as ColorArea;\n const input1 = test.querySelector(\n 'input:nth-of-type(1)'\n ) as HTMLInputElement;\n const input2 = test.querySelector(\n 'input:nth-of-type(2)'\n ) as HTMLInputElement;\n\n await elementUpdated(el);\n\n input1.focus();\n\n expect(document.activeElement, 'before input').to.equal(input1);\n\n await sendKeys({\n press: 'Tab',\n });\n await elementUpdated(el);\n\n expect(document.activeElement, 'element').to.equal(el);\n let value = el.value;\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Tab',\n });\n await elementUpdated(el);\n\n expect(document.activeElement, 'after input').to.equal(input2);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n await elementUpdated(el);\n\n expect(document.activeElement, 'element again').to.equal(el);\n\n value = el.value;\n await sendKeys({\n press: 'ArrowDown',\n });\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement, 'before input again').to.equal(input1);\n });\n it('provides separate aria-labels for X and Y inputs', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n `\n );\n const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n expect(inputX?.getAttribute('aria-label')).to.equal('saturation');\n expect(inputY?.getAttribute('aria-label')).to.equal('luminosity');\n });\n it('overrides both X and Y labels with a provided \"label\" attribute', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area\n color=\"hsl(100, 50%, 50%)\"\n label=\"something custom\"\n ></sp-color-area>\n `\n );\n const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n expect(inputX?.getAttribute('aria-label')).to.equal('something custom');\n expect(inputY?.getAttribute('aria-label')).to.equal('something custom');\n });\n it('accepts \"color\" values as hsl', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue, 'hue').to.equal(100);\n expect(el.x, 'x').to.equal(0.67);\n expect(el.y, 'y').to.equal(0.25);\n });\n it('accepts \"color\" values as hsla', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue, 'hugh').to.equal(100);\n expect(el.x, 'ex').to.equal(0.67);\n expect(el.y, 'why').to.equal(0.25);\n\n el.color = 'hsla(120, 100%, 0, 1)';\n await elementUpdated(el);\n\n expect(el.hue, 'hue 2').to.equal(120);\n expect(el.x, 'x 2').to.equal(0);\n expect(el.y, 'y 2').to.equal(1);\n });\n it('accepts \"color\" values as rgb', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"rgb(0,255,0)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(120);\n expect(el.x).to.equal(1);\n expect(el.y).to.equal(0);\n });\n it('accepts \"color\" values as hex', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"#00ff00\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(120);\n expect(el.x).to.equal(1);\n expect(el.y).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n `\n );\n\n expect(el.hue, 'hue').to.equal(100);\n expect(el.x, 'x').to.equal(0.67);\n expect(el.y, 'y').to.equal(0.25);\n\n el.inputX.focus();\n await nextFrame();\n\n let changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowUp',\n });\n await changeEvent;\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowUp',\n });\n await changeEvent;\n\n expect(el.x).to.equal(0.67);\n expect(el.y).to.equal(0.23);\n\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowRight',\n });\n await changeEvent;\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowRight',\n });\n await changeEvent;\n\n expect(el.x).to.equal(0.69);\n expect(el.y).to.equal(0.23);\n\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowDown',\n });\n await changeEvent;\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowDown',\n });\n await changeEvent;\n\n expect(el.x).to.equal(0.69);\n expect(el.y).to.equal(0.25);\n\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowLeft',\n });\n await changeEvent;\n changeEvent = oneEvent(el, 'change');\n await sendKeys({\n press: 'ArrowLeft',\n });\n await changeEvent;\n\n expect(el.x).to.equal(0.67);\n expect(el.y).to.equal(0.25);\n });\n it('accepts \"Arrow*\" keypresses with alteration', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n el.focus();\n expect(el.hue, 'hue').to.equal(100);\n expect(el.x, 'x').to.equal(0.67);\n expect(el.y, 'y').to.equal(0.25);\n\n await sendKeys({\n down: 'Shift',\n });\n await elementUpdated(el);\n await sendKeys({\n press: 'ArrowUp',\n });\n // This ensures that all the keystrokes are processed seperately\n await elementUpdated(el);\n await sendKeys({\n press: 'ArrowUp',\n });\n\n await elementUpdated(el);\n\n expect(el.color).to.equal('hsl(100, 65%, 57%)');\n expect(el.x, 'first').to.equal(0.67);\n expect(el.y).to.equal(0.15);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n\n expect(el.color).to.equal('hsl(100, 69%, 52%)');\n expect(el.x).to.equal(0.77);\n expect(el.y).to.equal(0.15);\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(el);\n await sendKeys({\n press: 'ArrowDown',\n });\n\n await elementUpdated(el);\n\n expect(el.color).to.equal('hsl(100, 63%, 46%)');\n expect(el.x).to.equal(0.77);\n expect(el.y).to.equal(0.25);\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n await elementUpdated(el);\n await sendKeys({\n press: 'ArrowLeft',\n });\n await elementUpdated(el);\n await sendKeys({\n up: 'Shift',\n });\n\n await elementUpdated(el);\n\n expect(el.color).to.equal('hsl(100, 50%, 50%)');\n expect(el.x, 'last').to.equal(0.67);\n expect(el.y).to.equal(0.25);\n });\n it('accepts pointer events', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area\n style=\"--spectrum-colorarea-default-width: 192px; --spectrum-colorarea-default-height: 192px;\"\n ></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.hue).to.equal(0);\n expect(el.x).to.equal(1);\n expect(el.y).to.equal(0);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(0);\n expect(el.x).to.equal(1);\n expect(el.y).to.equal(0);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(0);\n expect(el.x).to.equal(1);\n expect(el.y).to.equal(0);\n\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 100,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(0);\n expect(el.x, 'pointerdown x').to.equal(0.48);\n expect(el.y, 'pointerdown y').to.equal(0.48);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 110,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 110,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.hue).to.equal(0);\n expect(el.x).to.equal(0.53);\n expect(el.y).to.equal(0.53);\n });\n it('responds to events on the internal input element', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area\n color=\"hsla(100, 50%, 50%, 1)\"\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n el.inputX.focus();\n\n el.inputX.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n el.inputX.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: false, // native change events do not compose themselves by default\n })\n );\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n el.inputY.focus();\n\n el.inputY.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n el.inputY.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: false, // native change events do not compose themselves by default\n })\n );\n\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n });\n it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area\n color=\"hsla(100, 50%, 50%, 1)\"\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n el.inputX.focus();\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n await sendKeys({ press: 'ArrowRight' });\n await sendKeys({ press: 'ArrowRight' });\n\n await elementUpdated(el);\n\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n el.inputY.focus();\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n await sendKeys({ press: 'ArrowUp' });\n await sendKeys({ press: 'ArrowUp' });\n\n await elementUpdated(el);\n\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n el.inputY.focus();\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n await sendKeys({ press: 'ArrowDown' });\n await sendKeys({ press: 'ArrowDown' });\n\n await elementUpdated(el);\n\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n el.inputX.focus();\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n await sendKeys({ press: 'ArrowLeft' });\n await sendKeys({ press: 'ArrowLeft' });\n\n await elementUpdated(el);\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n });\n it('retains `hue` value when s = 0 in HSL string format', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue, 'hue').to.equal(100);\n expect(el.x, 'x').to.equal(0.67);\n expect(el.y, 'y').to.equal(0.25);\n expect(el.color).to.equal('hsl(100, 50%, 50%)');\n\n el.color = 'hsl(100, 0%, 50%)';\n await elementUpdated(el);\n\n expect(el.hue, 'new hue').to.equal(100);\n expect(el.x, 'new x').to.equal(0);\n expect(el.y, 'new y').to.equal(0.5);\n expect(el.color).to.equal('hsl(100, 0%, 50%)');\n });\n it('retains `hue` value when s = 0 in HSL object format', async () => {\n let inputColor = { h: 100, s: 0.5, l: 0.5 };\n\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area .color=${inputColor}></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n let outputColor = el.color as { h: number; s: number; l: number };\n const variance = 0.00005;\n\n expect(el.hue).to.equal(100);\n expect(el.x, 'x').to.equal(0.67);\n expect(el.y, 'y').to.equal(0.25);\n\n expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n\n inputColor = { h: 100, s: 0, l: 0.5 };\n el.color = inputColor;\n\n await elementUpdated(el);\n outputColor = el.color as { h: number; s: number; l: number };\n\n expect(el.hue).to.equal(100);\n expect(el.x, 'x').to.equal(0);\n expect(el.y, 'y').to.equal(0.5);\n\n expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n });\n it('retains `hue` value when s = 0 in HSV string format', async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area color=\"hsv(100, 50%, 50%)\"></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.hue, 'hue').to.equal(100);\n expect(el.x, 'x').to.equal(0.5);\n expect(el.y, 'y').to.equal(0.5);\n expect(el.color).to.equal('hsv(100, 50%, 50%)');\n\n el.color = 'hsv(100, 0%, 50%)';\n await elementUpdated(el);\n\n expect(el.hue, 'new hue').to.equal(100);\n expect(el.x, 'new x').to.equal(0);\n expect(el.y, 'new y').to.equal(0.5);\n expect(el.color).to.equal('hsv(100, 0%, 50%)');\n });\n it('retains `hue` value when s = 0 in HSV object format', async () => {\n let inputColor = { h: 100, s: 0.5, v: 0.5 };\n\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area .color=${inputColor}></sp-color-area>\n `\n );\n\n await elementUpdated(el);\n\n let outputColor = el.color as { h: number; s: number; v: number };\n const variance = 0.00005;\n\n expect(el.hue).to.equal(100);\n expect(el.x, 'x').to.equal(0.5);\n expect(el.y, 'y').to.equal(0.5);\n\n expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n\n inputColor = { h: 100, s: 0, v: 0.5 };\n el.color = inputColor;\n\n await elementUpdated(el);\n outputColor = el.color as { h: number; s: number; v: number };\n\n expect(el.hue).to.equal(100);\n expect(el.x, 'x').to.equal(0);\n expect(el.y, 'y').to.equal(0.5);\n\n expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n });\n const colorFormats: {\n name: string;\n color:\n | string\n | number\n | TinyColor\n | HSVA\n | HSV\n | RGB\n | RGBA\n | HSL\n | HSLA;\n }[] = [\n //rgb\n { name: 'RGB String', color: 'rgb(204, 51, 204)' },\n { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },\n //prgb\n { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },\n { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n // hex\n { name: 'Hex', color: 'cc33cc' },\n { name: 'Hex String', color: '#cc33cc' },\n // hex8\n { name: 'Hex8', color: 'cc33ccff' },\n { name: 'Hex8 String', color: '#cc33ccff' },\n // name\n { name: 'string', color: 'red' },\n // hsl\n { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n // hsv\n { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n ];\n colorFormats.map((format) => {\n it(`maintains \\`color\\` format as ${format.name}`, async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area></sp-color-area>\n `\n );\n\n el.color = format.color;\n if (format.name.startsWith('Hex')) {\n expect(el.color).to.equal(format.color);\n } else expect(el.color).to.deep.equal(format.color);\n });\n });\n it(`maintains \\`color\\` format as TinyColor`, async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area></sp-color-area>\n `\n );\n const color = new TinyColor('rgb(204, 51, 204)');\n el.color = color;\n expect(color.equals(el.color));\n });\n it(`resolves Hex3 format to Hex6 format`, async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area></sp-color-area>\n `\n );\n el.color = '0f0';\n expect(el.color).to.equal('00ff00');\n\n el.color = '#1e0';\n expect(el.color).to.equal('#11ee00');\n });\n it(`resolves Hex4 format to Hex8 format`, async () => {\n const el = await fixture<ColorArea>(\n html`\n <sp-color-area></sp-color-area>\n `\n );\n el.color = 'f3af';\n expect(el.color).to.equal('ff33aaff');\n\n el.color = '#f3af';\n expect(el.color).to.equal('#ff33aaff');\n });\n});\n"]}