@spectrum-web-components/color-area 0.33.3-overlay.66 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +39 -7
- package/package.json +5 -5
- package/src/ColorArea.d.ts +5 -2
- package/src/ColorArea.dev.js +106 -46
- package/src/ColorArea.dev.js.map +2 -2
- package/src/ColorArea.js +47 -35
- package/src/ColorArea.js.map +3 -3
- package/src/color-area.css.dev.js +1 -1
- package/src/color-area.css.dev.js.map +1 -1
- package/src/color-area.css.js +1 -1
- package/src/color-area.css.js.map +1 -1
- package/test/color-area.test.js +46 -30
- package/test/color-area.test.js.map +2 -2
package/src/ColorArea.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(c,l,e,t)=>{for(var i=t>1?void 0:t?f(l,e):l,r=c.length-1,o;r>=0;r--)(o=c[r])&&(i=(t?o(l,e,i):o(i))||i);return t&&i&&m(l,e,i),i};import{html as y,SpectrumElement as g}from"@spectrum-web-components/base";import{ifDefined as b}from"@spectrum-web-components/base/src/directives.js";import{property as n,query as v}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as w}from"@spectrum-web-components/base/src/streaming-listener.js";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{ColorController as C}from"@spectrum-web-components/reactive-controllers/src/Color.js";import{LanguageResolutionController as x}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{isAndroid as E,isIOS as R}from"@spectrum-web-components/shared/src/platform.js";import $ from"./color-area.css.js";export class ColorArea extends g{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.labelX="saturation";this.labelY="luminosity";this.languageResolver=new x(this);this.colorController=new C(this,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this.x=e,this.y=t}});this.activeAxis="x";this._x=1;this._y=1;this.step=.01;this.altered=0;this.activeKeys=new Set;this._valueChanged=!1;this._pointerDown=!1}static get styles(){return[$]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this.inputX?(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber):this._x=e,this.requestUpdate("x",t)}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this.inputY?(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber):this._y=e,this.requestUpdate("y",t)}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(r=>!!r).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const i=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case"ArrowUp":t=i;break;case"ArrowDown":t=i*-1;break;case"ArrowLeft":e=this.step*(this.isLTR?-1:1);break;case"ArrowRight":e=this.step*(this.isLTR?1:-1);break;case"PageUp":t=i*10;break;case"PageDown":t=i*-10;break;case"Home":e=i*(this.isLTR?-10:10);break;case"End":e=i*(this.isLTR?10:-10);break;default:break}}),e!=0?(this.activeAxis="x",this.inputX.focus()):t!=0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),this.colorController.applyColorFromState(),(e!=0||t!=0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:i}=e.target;this[i]=t,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,i]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=1-i,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,i=t.left,r=t.top,o=e.clientX,d=e.clientY,h=t.width,u=t.height,a=Math.max(0,Math.min(1,(o-i)/h)),p=Math.max(0,Math.min(1,(d-r)/u));return[this.isLTR?a:1-a,p]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},i=E()||R(),r="Color Picker",o=this.label?`${this.label} ${r}`:r,d=b(i?void 0:"2d slider"),h=this.labelX,u=this.labelY,a=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),p=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y);return y`
|
|
2
2
|
<div
|
|
3
3
|
@pointerdown=${this.handleAreaPointerdown}
|
|
4
4
|
class="gradient"
|
|
@@ -10,45 +10,57 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
12
|
<sp-color-handle
|
|
13
|
-
tabindex=${
|
|
13
|
+
tabindex=${b(this.focused?void 0:"0")}
|
|
14
14
|
@focus=${this.forwardFocus}
|
|
15
15
|
?focused=${this.focused}
|
|
16
16
|
class="handle"
|
|
17
17
|
color=${this.colorController.getHslString()}
|
|
18
18
|
?disabled=${this.disabled}
|
|
19
|
-
style
|
|
20
|
-
${
|
|
19
|
+
style=${`transform: translate(${(this.isLTR?this.x:1-this.x)*e}px, ${t-this.y*t}px);`}
|
|
20
|
+
${w({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
|
|
21
21
|
></sp-color-handle>
|
|
22
22
|
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
23
|
+
<fieldset
|
|
24
|
+
class="fieldset"
|
|
25
|
+
aria-label=${b(i?o:void 0)}
|
|
26
|
+
>
|
|
27
|
+
<div role="presentation">
|
|
28
|
+
<input
|
|
29
|
+
type="range"
|
|
30
|
+
class="slider"
|
|
31
|
+
name="x"
|
|
32
|
+
aria-label=${i?h:o}
|
|
33
|
+
aria-roledescription=${d}
|
|
34
|
+
aria-orientation="horizontal"
|
|
35
|
+
aria-valuetext=${i?a:`${a}, ${h}${this._valueChanged?"":`, ${p}, ${u}`}`}
|
|
36
|
+
min="0"
|
|
37
|
+
max="1"
|
|
38
|
+
step=${this.step}
|
|
39
|
+
tabindex="-1"
|
|
40
|
+
.value=${String(this.x)}
|
|
41
|
+
@input=${this.handleInput}
|
|
42
|
+
@change=${this.handleChange}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
<div role="presentation">
|
|
46
|
+
<input
|
|
47
|
+
type="range"
|
|
48
|
+
class="slider"
|
|
49
|
+
name="y"
|
|
50
|
+
aria-label=${i?u:o}
|
|
51
|
+
aria-roledescription=${d}
|
|
52
|
+
aria-orientation="vertical"
|
|
53
|
+
aria-valuetext=${i?p:`${p}, ${u}${this._valueChanged?"":`, ${a}, ${h}`}`}
|
|
54
|
+
orient="vertical"
|
|
55
|
+
min="0"
|
|
56
|
+
max="1"
|
|
57
|
+
step=${this.step}
|
|
58
|
+
tabindex="-1"
|
|
59
|
+
.value=${String(this.y)}
|
|
60
|
+
@input=${this.handleInput}
|
|
61
|
+
@change=${this.handleChange}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
</fieldset>
|
|
65
|
+
`}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),e.has("focused")&&this.focused){const t=this.inputX.parentElement,i=this.inputY.parentElement;if(!t.shadowRoot&&!i.shadowRoot){t.attachShadow({mode:"open"}),i.attachShadow({mode:"open"});const r='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=r,i.shadowRoot.innerHTML=r}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const i of t)this.boundingClientRect=i.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}s([n({type:String,reflect:!0})],ColorArea.prototype,"dir",2),s([n({type:Boolean,reflect:!0})],ColorArea.prototype,"disabled",2),s([n({type:Boolean,reflect:!0})],ColorArea.prototype,"focused",2),s([n({type:String})],ColorArea.prototype,"label",2),s([n({type:String,attribute:"label-x"})],ColorArea.prototype,"labelX",2),s([n({type:String,attribute:"label-y"})],ColorArea.prototype,"labelY",2),s([v(".handle")],ColorArea.prototype,"handle",2),s([n({type:Number})],ColorArea.prototype,"hue",1),s([n({type:String})],ColorArea.prototype,"value",1),s([n({type:String})],ColorArea.prototype,"color",1),s([n({attribute:!1})],ColorArea.prototype,"activeAxis",2),s([n({type:Number})],ColorArea.prototype,"x",1),s([n({type:Number})],ColorArea.prototype,"y",1),s([n({type:Number})],ColorArea.prototype,"step",2),s([v('[name="x"]')],ColorArea.prototype,"inputX",2),s([v('[name="y"]')],ColorArea.prototype,"inputY",2);
|
|
54
66
|
//# sourceMappingURL=ColorArea.js.map
|
package/src/ColorArea.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorArea.ts"],
|
|
4
|
-
"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 type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorValue,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\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 override 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 private colorController = new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v: 1 - this.y,\n }),\n applyColorToState: ({ s, v }) => {\n this.x = s;\n this.y = 1 - v;\n },\n });\n\n @property({ type: Number })\n public get hue(): number {\n return this.colorController.hue;\n }\n\n public set hue(value: number) {\n this.colorController.hue = value;\n }\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.colorController.color;\n }\n\n @property({ type: String })\n public get color(): ColorValue {\n return this.colorController.color;\n }\n\n public set color(color: ColorValue) {\n this.colorController.color = color;\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 override 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.colorController.savePreviousColor();\n this.colorController.applyColorFromState();\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.colorController.restorePreviousColor();\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.colorController.applyColorFromState();\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.colorController.savePreviousColor();\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\n this.x = x;\n this.y = y;\n this.colorController.applyColorFromState();\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.colorController.restorePreviousColor();\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 override render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n if (window.__swc.DEBUG) {\n if (this.label) {\n window.__swc.warn(\n this,\n `The \"label\" property in <${this.localName}> has been deprecated and will be removed in a future release. Please leverage \"labelX\" and \"labelY\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/color-area/#labels',\n { level: 'deprecation' }\n );\n }\n }\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.colorController.getHslString()}\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: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\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 override 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 override 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 override 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 override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,aAAAC,MAAiB,kDAC1B,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,qBAAAC,MAAyB,0DAGlC,MAAO,2DACP,OACI,mBAAAC,MAEG,
|
|
6
|
-
"names": ["html", "SpectrumElement", "ifDefined", "property", "query", "streamingListener", "ColorController", "styles", "s", "v", "value", "color", "x", "oldValue", "y", "focusOptions", "event", "code", "key", "deltaX", "deltaY", "step", "valueAsNumber", "name", "applyDefault", "rect", "minOffsetX", "minOffsetY", "offsetX", "offsetY", "width", "height", "percentX", "percentY", "
|
|
4
|
+
"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 type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorValue,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\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 override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\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 private languageResolver = new LanguageResolutionController(this);\n\n private colorController = new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v: this.y,\n }),\n applyColorToState: ({ s, v }) => {\n this.x = s;\n this.y = v;\n },\n });\n\n @property({ type: Number })\n public get hue(): number {\n return this.colorController.hue;\n }\n\n public set hue(value: number) {\n this.colorController.hue = value;\n }\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.colorController.color;\n }\n\n @property({ type: String })\n public get color(): ColorValue {\n return this.colorController.color;\n }\n\n public set color(color: ColorValue) {\n this.colorController.color = color;\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 = 1;\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 private _valueChanged = false;\n\n public override 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 handleFocus(): void {\n this.focused = true;\n this._valueChanged = false;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n this._valueChanged = 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 =\n code.search('Arrow') === 0 ||\n code.search('Page') === 0 ||\n code.search('Home') === 0 ||\n code.search('End') === 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;\n break;\n case 'ArrowDown':\n deltaY = step * -1;\n break;\n case 'ArrowLeft':\n deltaX = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n deltaX = this.step * (this.isLTR ? 1 : -1);\n break;\n case 'PageUp':\n deltaY = step * 10;\n break;\n case 'PageDown':\n deltaY = step * -10;\n break;\n case 'Home':\n deltaX = step * (this.isLTR ? -10 : 10);\n break;\n case 'End':\n deltaX = step * (this.isLTR ? 10 : -10);\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.colorController.savePreviousColor();\n this.colorController.applyColorFromState();\n\n if (deltaX != 0 || deltaY != 0) {\n this._valueChanged = true;\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.colorController.restorePreviousColor();\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.colorController.applyColorFromState();\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.colorController.savePreviousColor();\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\n this._valueChanged = false;\n\n this.x = x;\n this.y = 1 - y;\n this.colorController.applyColorFromState();\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.colorController.restorePreviousColor();\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 [this.isLTR ? percentX : 1 - 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 override render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n if (window.__swc.DEBUG) {\n if (this.label) {\n window.__swc.warn(\n this,\n `The \"label\" property in <${this.localName}> has been deprecated and will be removed in a future release. Please leverage \"labelX\" and \"labelY\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/color-area/#labels',\n { level: 'deprecation' }\n );\n }\n }\n\n const isMobile = isAndroid() || isIOS();\n const defaultAriaLabel = 'Color Picker';\n const ariaLabel = this.label\n ? `${this.label} ${defaultAriaLabel}`\n : defaultAriaLabel;\n const ariaRoleDescription = ifDefined(\n isMobile ? undefined : '2d slider'\n );\n\n const ariaLabelX = this.labelX;\n const ariaLabelY = this.labelY;\n const ariaValueX = new Intl.NumberFormat(\n this.languageResolver.language,\n {\n style: 'percent',\n unitDisplay: 'narrow',\n }\n ).format(this.x);\n const ariaValueY = new Intl.NumberFormat(\n this.languageResolver.language,\n {\n style: 'percent',\n unitDisplay: 'narrow',\n }\n ).format(this.y);\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.colorController.getHslString()}\n ?disabled=${this.disabled}\n style=${`transform: translate(${\n (this.isLTR ? this.x : 1 - this.x) * width\n }px, ${height - this.y * height}px);`}\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n ></sp-color-handle>\n\n <fieldset\n class=\"fieldset\"\n aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n >\n <div role=\"presentation\">\n <input\n type=\"range\"\n class=\"slider\"\n name=\"x\"\n aria-label=${isMobile ? ariaLabelX : ariaLabel}\n aria-roledescription=${ariaRoleDescription}\n aria-orientation=\"horizontal\"\n aria-valuetext=${isMobile\n ? ariaValueX\n : `${ariaValueX}, ${ariaLabelX}${\n this._valueChanged\n ? ''\n : `, ${ariaValueY}, ${ariaLabelY}`\n }`}\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 role=\"presentation\">\n <input\n type=\"range\"\n class=\"slider\"\n name=\"y\"\n aria-label=${isMobile ? ariaLabelY : ariaLabel}\n aria-roledescription=${ariaRoleDescription}\n aria-orientation=\"vertical\"\n aria-valuetext=${isMobile\n ? ariaValueY\n : `${ariaValueY}, ${ariaLabelY}${\n this._valueChanged\n ? ''\n : `, ${ariaValueX}, ${ariaLabelX}`\n }`}\n orient=\"vertical\"\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 </fieldset>\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n this.addEventListener('keyup', this.handleKeyup);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override 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 override 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 override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "SpectrumElement", "ifDefined", "property", "query", "streamingListener", "ColorController", "LanguageResolutionController", "isAndroid", "isIOS", "styles", "s", "v", "value", "color", "x", "oldValue", "y", "focusOptions", "event", "code", "key", "deltaX", "deltaY", "step", "valueAsNumber", "name", "applyDefault", "rect", "minOffsetX", "minOffsetY", "offsetX", "offsetY", "width", "height", "percentX", "percentY", "isMobile", "defaultAriaLabel", "ariaLabel", "ariaRoleDescription", "ariaLabelX", "ariaLabelY", "ariaValueX", "ariaValueY", "changed", "parentX", "parentY", "slot", "_a", "entries", "entry", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -25,7 +25,7 @@ const styles = css`
|
|
|
25
25
|
--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)
|
|
26
26
|
) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(
|
|
27
27
|
--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)
|
|
28
|
-
)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}
|
|
28
|
+
)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}
|
|
29
29
|
`;
|
|
30
30
|
export default styles;
|
|
31
31
|
//# sourceMappingURL=color-area.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["color-area.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorarea-border-radius:var(\n--spectrum-color-area-border-rounding\n);--spectrum-colorarea-border-color:#0000001a;--spectrum-colorarea-disabled-background-color:var(\n--spectrum-disabled-background-color\n);--spectrum-colorarea-border-width:var(--spectrum-color-area-border-width);--spectrum-colorarea-height:var(--spectrum-color-area-height);--spectrum-colorarea-width:var(--spectrum-color-area-width);--spectrum-colorarea-min-width:var(--spectrum-color-area-minimum-width);--spectrum-colorarea-min-height:var(--spectrum-color-area-minimum-height)}@media (forced-colors:active){:host{--highcontrast-colorarea-border-color-disabled:GrayText;--highcontrast-colorarea-border-color:Canvas;--highcontrast-colorarea-fill-color-disabled:Canvas}:host([disabled]){forced-color-adjust:none}.gradient{forced-color-adjust:none}}:host{block-size:var(--mod-colorarea-height,var(--spectrum-colorarea-height));border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(\n--highcontrast-colorarea-border-color,var(\n--mod-colorarea-border-color,var(--spectrum-colorarea-border-color)\n)\n);border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n);box-sizing:border-box;cursor:default;display:inline-block;inline-size:var(--mod-colorarea-width,var(--spectrum-colorarea-width));min-block-size:var(\n--mod-colorarea-min-height,var(--spectrum-colorarea-min-height)\n);min-inline-size:var(\n--mod-colorarea-min-width,var(--spectrum-colorarea-min-width)\n);position:relative;-webkit-user-select:none;user-select:none}:host([focused]){z-index:2}:host([focused]) .handle{block-size:calc(var(--spectrum-color-handle-size)*2);inline-size:calc(var(--spectrum-color-handle-size)*2);margin-block-start:calc(var(--spectrum-color-handle-size)*-1);margin-inline-start:calc(var(--spectrum-color-handle-size)*-1)}:host([disabled]){background:var(\n--highcontrast-colorarea-fill-color-disabled,var(\n--mod-colorarea-disabled-background-color,var(--spectrum-colorarea-disabled-background-color)\n)\n);border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorarea-border-radius:var(\n--spectrum-color-area-border-rounding\n);--spectrum-colorarea-border-color:#0000001a;--spectrum-colorarea-disabled-background-color:var(\n--spectrum-disabled-background-color\n);--spectrum-colorarea-border-width:var(--spectrum-color-area-border-width);--spectrum-colorarea-height:var(--spectrum-color-area-height);--spectrum-colorarea-width:var(--spectrum-color-area-width);--spectrum-colorarea-min-width:var(--spectrum-color-area-minimum-width);--spectrum-colorarea-min-height:var(--spectrum-color-area-minimum-height)}@media (forced-colors:active){:host{--highcontrast-colorarea-border-color-disabled:GrayText;--highcontrast-colorarea-border-color:Canvas;--highcontrast-colorarea-fill-color-disabled:Canvas}:host([disabled]){forced-color-adjust:none}.gradient{forced-color-adjust:none}}:host{block-size:var(--mod-colorarea-height,var(--spectrum-colorarea-height));border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(\n--highcontrast-colorarea-border-color,var(\n--mod-colorarea-border-color,var(--spectrum-colorarea-border-color)\n)\n);border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n);box-sizing:border-box;cursor:default;display:inline-block;inline-size:var(--mod-colorarea-width,var(--spectrum-colorarea-width));min-block-size:var(\n--mod-colorarea-min-height,var(--spectrum-colorarea-min-height)\n);min-inline-size:var(\n--mod-colorarea-min-width,var(--spectrum-colorarea-min-width)\n);position:relative;-webkit-user-select:none;user-select:none}:host([focused]){z-index:2}:host([focused]) .handle{block-size:calc(var(--spectrum-color-handle-size)*2);inline-size:calc(var(--spectrum-color-handle-size)*2);margin-block-start:calc(var(--spectrum-color-handle-size)*-1);margin-inline-start:calc(var(--spectrum-color-handle-size)*-1)}:host([disabled]){background:var(\n--highcontrast-colorarea-fill-color-disabled,var(\n--mod-colorarea-disabled-background-color,var(--spectrum-colorarea-disabled-background-color)\n)\n);border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2Bf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/color-area.css.js
CHANGED
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)
|
|
24
24
|
) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(
|
|
25
25
|
--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)
|
|
26
|
-
)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}
|
|
26
|
+
)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}
|
|
27
27
|
`;export default o;
|
|
28
28
|
//# sourceMappingURL=color-area.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["color-area.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorarea-border-radius:var(\n--spectrum-color-area-border-rounding\n);--spectrum-colorarea-border-color:#0000001a;--spectrum-colorarea-disabled-background-color:var(\n--spectrum-disabled-background-color\n);--spectrum-colorarea-border-width:var(--spectrum-color-area-border-width);--spectrum-colorarea-height:var(--spectrum-color-area-height);--spectrum-colorarea-width:var(--spectrum-color-area-width);--spectrum-colorarea-min-width:var(--spectrum-color-area-minimum-width);--spectrum-colorarea-min-height:var(--spectrum-color-area-minimum-height)}@media (forced-colors:active){:host{--highcontrast-colorarea-border-color-disabled:GrayText;--highcontrast-colorarea-border-color:Canvas;--highcontrast-colorarea-fill-color-disabled:Canvas}:host([disabled]){forced-color-adjust:none}.gradient{forced-color-adjust:none}}:host{block-size:var(--mod-colorarea-height,var(--spectrum-colorarea-height));border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(\n--highcontrast-colorarea-border-color,var(\n--mod-colorarea-border-color,var(--spectrum-colorarea-border-color)\n)\n);border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n);box-sizing:border-box;cursor:default;display:inline-block;inline-size:var(--mod-colorarea-width,var(--spectrum-colorarea-width));min-block-size:var(\n--mod-colorarea-min-height,var(--spectrum-colorarea-min-height)\n);min-inline-size:var(\n--mod-colorarea-min-width,var(--spectrum-colorarea-min-width)\n);position:relative;-webkit-user-select:none;user-select:none}:host([focused]){z-index:2}:host([focused]) .handle{block-size:calc(var(--spectrum-color-handle-size)*2);inline-size:calc(var(--spectrum-color-handle-size)*2);margin-block-start:calc(var(--spectrum-color-handle-size)*-1);margin-inline-start:calc(var(--spectrum-color-handle-size)*-1)}:host([disabled]){background:var(\n--highcontrast-colorarea-fill-color-disabled,var(\n--mod-colorarea-disabled-background-color,var(--spectrum-colorarea-disabled-background-color)\n)\n);border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorarea-border-radius:var(\n--spectrum-color-area-border-rounding\n);--spectrum-colorarea-border-color:#0000001a;--spectrum-colorarea-disabled-background-color:var(\n--spectrum-disabled-background-color\n);--spectrum-colorarea-border-width:var(--spectrum-color-area-border-width);--spectrum-colorarea-height:var(--spectrum-color-area-height);--spectrum-colorarea-width:var(--spectrum-color-area-width);--spectrum-colorarea-min-width:var(--spectrum-color-area-minimum-width);--spectrum-colorarea-min-height:var(--spectrum-color-area-minimum-height)}@media (forced-colors:active){:host{--highcontrast-colorarea-border-color-disabled:GrayText;--highcontrast-colorarea-border-color:Canvas;--highcontrast-colorarea-fill-color-disabled:Canvas}:host([disabled]){forced-color-adjust:none}.gradient{forced-color-adjust:none}}:host{block-size:var(--mod-colorarea-height,var(--spectrum-colorarea-height));border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(\n--highcontrast-colorarea-border-color,var(\n--mod-colorarea-border-color,var(--spectrum-colorarea-border-color)\n)\n);border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n);box-sizing:border-box;cursor:default;display:inline-block;inline-size:var(--mod-colorarea-width,var(--spectrum-colorarea-width));min-block-size:var(\n--mod-colorarea-min-height,var(--spectrum-colorarea-min-height)\n);min-inline-size:var(\n--mod-colorarea-min-width,var(--spectrum-colorarea-min-width)\n);position:relative;-webkit-user-select:none;user-select:none}:host([focused]){z-index:2}:host([focused]) .handle{block-size:calc(var(--spectrum-color-handle-size)*2);inline-size:calc(var(--spectrum-color-handle-size)*2);margin-block-start:calc(var(--spectrum-color-handle-size)*-1);margin-inline-start:calc(var(--spectrum-color-handle-size)*-1)}:host([disabled]){background:var(\n--highcontrast-colorarea-fill-color-disabled,var(\n--mod-colorarea-disabled-background-color,var(--spectrum-colorarea-disabled-background-color)\n)\n);border:var(\n--mod-colorarea-border-width,var(--spectrum-colorarea-border-width)\n) solid var(--highcontrast-colorarea-border-color-disabled);pointer-events:none}:host([disabled]) .gradient{display:none}.handle{inset-block-start:0;transform:translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)))}:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{border-radius:var(\n--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius)\n)}.gradient,.slider{block-size:100%;inline-size:100%}.slider{inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;pointer-events:none;position:absolute;z-index:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width))}::slotted(*){height:100%;width:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2Bf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/test/color-area.test.js
CHANGED
|
@@ -88,8 +88,20 @@ describe("ColorArea", () => {
|
|
|
88
88
|
);
|
|
89
89
|
const inputX = el.shadowRoot.querySelector('input[name="x"]');
|
|
90
90
|
const inputY = el.shadowRoot.querySelector('input[name="y"]');
|
|
91
|
-
expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal("
|
|
92
|
-
expect(inputY == null ? void 0 : inputY.getAttribute("aria-label")).to.equal("
|
|
91
|
+
expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal("Color Picker");
|
|
92
|
+
expect(inputY == null ? void 0 : inputY.getAttribute("aria-label")).to.equal("Color Picker");
|
|
93
|
+
expect(inputX == null ? void 0 : inputX.getAttribute("aria-roledescription")).to.equal(
|
|
94
|
+
"2d slider"
|
|
95
|
+
);
|
|
96
|
+
expect(inputY == null ? void 0 : inputY.getAttribute("aria-roledescription")).to.equal(
|
|
97
|
+
"2d slider"
|
|
98
|
+
);
|
|
99
|
+
expect(inputX == null ? void 0 : inputX.getAttribute("aria-valuetext")).to.equal(
|
|
100
|
+
"67%, saturation, 75%, luminosity"
|
|
101
|
+
);
|
|
102
|
+
expect(inputY == null ? void 0 : inputY.getAttribute("aria-valuetext")).to.equal(
|
|
103
|
+
"75%, luminosity, 67%, saturation"
|
|
104
|
+
);
|
|
93
105
|
});
|
|
94
106
|
it('overrides both X and Y labels with a provided "label" attribute', async () => {
|
|
95
107
|
const el = await fixture(
|
|
@@ -102,8 +114,12 @@ describe("ColorArea", () => {
|
|
|
102
114
|
);
|
|
103
115
|
const inputX = el.shadowRoot.querySelector('input[name="x"]');
|
|
104
116
|
const inputY = el.shadowRoot.querySelector('input[name="y"]');
|
|
105
|
-
expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal(
|
|
106
|
-
|
|
117
|
+
expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal(
|
|
118
|
+
"something custom Color Picker"
|
|
119
|
+
);
|
|
120
|
+
expect(inputY == null ? void 0 : inputY.getAttribute("aria-label")).to.equal(
|
|
121
|
+
"something custom Color Picker"
|
|
122
|
+
);
|
|
107
123
|
});
|
|
108
124
|
it("accepts `hue` values", async () => {
|
|
109
125
|
const el = await fixture(
|
|
@@ -127,7 +143,7 @@ describe("ColorArea", () => {
|
|
|
127
143
|
await elementUpdated(el);
|
|
128
144
|
expect(el.hue, "hue").to.equal(100);
|
|
129
145
|
expect(el.x, "x").to.equal(0.67);
|
|
130
|
-
expect(el.y, "y").to.equal(0.
|
|
146
|
+
expect(el.y, "y").to.equal(0.75);
|
|
131
147
|
});
|
|
132
148
|
it('accepts "color" values as hsla', async () => {
|
|
133
149
|
const el = await fixture(
|
|
@@ -138,12 +154,12 @@ describe("ColorArea", () => {
|
|
|
138
154
|
await elementUpdated(el);
|
|
139
155
|
expect(el.hue, "hugh").to.equal(100);
|
|
140
156
|
expect(el.x, "ex").to.equal(0.67);
|
|
141
|
-
expect(el.y, "why").to.equal(0.
|
|
157
|
+
expect(el.y, "why").to.equal(0.75);
|
|
142
158
|
el.color = "hsla(120, 100%, 0, 1)";
|
|
143
159
|
await elementUpdated(el);
|
|
144
160
|
expect(el.hue, "hue 2").to.equal(120);
|
|
145
161
|
expect(el.x, "x 2").to.equal(0);
|
|
146
|
-
expect(el.y, "y 2").to.equal(
|
|
162
|
+
expect(el.y, "y 2").to.equal(0);
|
|
147
163
|
});
|
|
148
164
|
it('accepts "color" values as rgb', async () => {
|
|
149
165
|
const el = await fixture(
|
|
@@ -154,7 +170,7 @@ describe("ColorArea", () => {
|
|
|
154
170
|
await elementUpdated(el);
|
|
155
171
|
expect(el.hue).to.equal(120);
|
|
156
172
|
expect(el.x).to.equal(1);
|
|
157
|
-
expect(el.y).to.equal(
|
|
173
|
+
expect(el.y).to.equal(1);
|
|
158
174
|
});
|
|
159
175
|
it('accepts "color" values as hex', async () => {
|
|
160
176
|
const el = await fixture(
|
|
@@ -165,7 +181,7 @@ describe("ColorArea", () => {
|
|
|
165
181
|
await elementUpdated(el);
|
|
166
182
|
expect(el.hue).to.equal(120);
|
|
167
183
|
expect(el.x).to.equal(1);
|
|
168
|
-
expect(el.y).to.equal(
|
|
184
|
+
expect(el.y).to.equal(1);
|
|
169
185
|
});
|
|
170
186
|
it('accepts "Arrow*" keypresses', async () => {
|
|
171
187
|
const el = await fixture(
|
|
@@ -175,7 +191,7 @@ describe("ColorArea", () => {
|
|
|
175
191
|
);
|
|
176
192
|
expect(el.hue, "hue").to.equal(100);
|
|
177
193
|
expect(el.x, "x").to.equal(0.67);
|
|
178
|
-
expect(el.y, "y").to.equal(0.
|
|
194
|
+
expect(el.y, "y").to.equal(0.75);
|
|
179
195
|
el.inputX.focus();
|
|
180
196
|
await nextFrame();
|
|
181
197
|
let changeEvent = oneEvent(el, "change");
|
|
@@ -189,7 +205,7 @@ describe("ColorArea", () => {
|
|
|
189
205
|
});
|
|
190
206
|
await changeEvent;
|
|
191
207
|
expect(el.x).to.equal(0.67);
|
|
192
|
-
expect(el.y).to.equal(0.
|
|
208
|
+
expect(el.y).to.equal(0.77);
|
|
193
209
|
changeEvent = oneEvent(el, "change");
|
|
194
210
|
await sendKeys({
|
|
195
211
|
press: "ArrowRight"
|
|
@@ -201,7 +217,7 @@ describe("ColorArea", () => {
|
|
|
201
217
|
});
|
|
202
218
|
await changeEvent;
|
|
203
219
|
expect(el.x).to.equal(0.69);
|
|
204
|
-
expect(el.y).to.equal(0.
|
|
220
|
+
expect(el.y).to.equal(0.77);
|
|
205
221
|
changeEvent = oneEvent(el, "change");
|
|
206
222
|
await sendKeys({
|
|
207
223
|
press: "ArrowDown"
|
|
@@ -213,7 +229,7 @@ describe("ColorArea", () => {
|
|
|
213
229
|
});
|
|
214
230
|
await changeEvent;
|
|
215
231
|
expect(el.x).to.equal(0.69);
|
|
216
|
-
expect(el.y).to.equal(0.
|
|
232
|
+
expect(el.y).to.equal(0.75);
|
|
217
233
|
changeEvent = oneEvent(el, "change");
|
|
218
234
|
await sendKeys({
|
|
219
235
|
press: "ArrowLeft"
|
|
@@ -225,7 +241,7 @@ describe("ColorArea", () => {
|
|
|
225
241
|
});
|
|
226
242
|
await changeEvent;
|
|
227
243
|
expect(el.x).to.equal(0.67);
|
|
228
|
-
expect(el.y).to.equal(0.
|
|
244
|
+
expect(el.y).to.equal(0.75);
|
|
229
245
|
});
|
|
230
246
|
it('accepts "Arrow*" keypresses with alteration', async () => {
|
|
231
247
|
const el = await fixture(
|
|
@@ -237,7 +253,7 @@ describe("ColorArea", () => {
|
|
|
237
253
|
el.focus();
|
|
238
254
|
expect(el.hue, "hue").to.equal(100);
|
|
239
255
|
expect(el.x, "x").to.equal(0.67);
|
|
240
|
-
expect(el.y, "y").to.equal(0.
|
|
256
|
+
expect(el.y, "y").to.equal(0.75);
|
|
241
257
|
await sendKeys({
|
|
242
258
|
down: "Shift"
|
|
243
259
|
});
|
|
@@ -252,7 +268,7 @@ describe("ColorArea", () => {
|
|
|
252
268
|
await elementUpdated(el);
|
|
253
269
|
expect(el.color).to.equal("hsl(100, 65%, 57%)");
|
|
254
270
|
expect(el.x, "first").to.equal(0.67);
|
|
255
|
-
expect(el.y).to.equal(0.
|
|
271
|
+
expect(el.y).to.equal(0.85);
|
|
256
272
|
await sendKeys({
|
|
257
273
|
press: "ArrowRight"
|
|
258
274
|
});
|
|
@@ -261,9 +277,9 @@ describe("ColorArea", () => {
|
|
|
261
277
|
press: "ArrowRight"
|
|
262
278
|
});
|
|
263
279
|
await elementUpdated(el);
|
|
264
|
-
expect(el.color).to.equal("hsl(100,
|
|
265
|
-
expect(el.x).to.equal(0.
|
|
266
|
-
expect(el.y).to.equal(0.
|
|
280
|
+
expect(el.color).to.equal("hsl(100, 66%, 56%)");
|
|
281
|
+
expect(el.x).to.equal(0.69);
|
|
282
|
+
expect(el.y).to.equal(0.85);
|
|
267
283
|
await sendKeys({
|
|
268
284
|
press: "ArrowDown"
|
|
269
285
|
});
|
|
@@ -272,9 +288,9 @@ describe("ColorArea", () => {
|
|
|
272
288
|
press: "ArrowDown"
|
|
273
289
|
});
|
|
274
290
|
await elementUpdated(el);
|
|
275
|
-
expect(el.color).to.equal("hsl(100,
|
|
276
|
-
expect(el.x).to.equal(0.
|
|
277
|
-
expect(el.y).to.equal(0.
|
|
291
|
+
expect(el.color).to.equal("hsl(100, 53%, 49%)");
|
|
292
|
+
expect(el.x).to.equal(0.69);
|
|
293
|
+
expect(el.y).to.equal(0.75);
|
|
278
294
|
await sendKeys({
|
|
279
295
|
press: "ArrowLeft"
|
|
280
296
|
});
|
|
@@ -289,7 +305,7 @@ describe("ColorArea", () => {
|
|
|
289
305
|
await elementUpdated(el);
|
|
290
306
|
expect(el.color).to.equal("hsl(100, 50%, 50%)");
|
|
291
307
|
expect(el.x, "last").to.equal(0.67);
|
|
292
|
-
expect(el.y).to.equal(0.
|
|
308
|
+
expect(el.y).to.equal(0.75);
|
|
293
309
|
});
|
|
294
310
|
it("accepts pointer events", async () => {
|
|
295
311
|
const el = await fixture(
|
|
@@ -310,7 +326,7 @@ describe("ColorArea", () => {
|
|
|
310
326
|
};
|
|
311
327
|
expect(el.hue).to.equal(0);
|
|
312
328
|
expect(el.x).to.equal(1);
|
|
313
|
-
expect(el.y).to.equal(
|
|
329
|
+
expect(el.y).to.equal(1);
|
|
314
330
|
handle.dispatchEvent(
|
|
315
331
|
new PointerEvent("pointerdown", {
|
|
316
332
|
button: 1,
|
|
@@ -325,7 +341,7 @@ describe("ColorArea", () => {
|
|
|
325
341
|
await elementUpdated(el);
|
|
326
342
|
expect(el.hue).to.equal(0);
|
|
327
343
|
expect(el.x).to.equal(1);
|
|
328
|
-
expect(el.y).to.equal(
|
|
344
|
+
expect(el.y).to.equal(1);
|
|
329
345
|
const root = el.shadowRoot ? el.shadowRoot : el;
|
|
330
346
|
const gradient = root.querySelector(".gradient");
|
|
331
347
|
gradient.dispatchEvent(
|
|
@@ -342,7 +358,7 @@ describe("ColorArea", () => {
|
|
|
342
358
|
await elementUpdated(el);
|
|
343
359
|
expect(el.hue).to.equal(0);
|
|
344
360
|
expect(el.x).to.equal(1);
|
|
345
|
-
expect(el.y).to.equal(
|
|
361
|
+
expect(el.y).to.equal(1);
|
|
346
362
|
gradient.dispatchEvent(
|
|
347
363
|
new PointerEvent("pointerdown", {
|
|
348
364
|
pointerId: 1,
|
|
@@ -356,7 +372,7 @@ describe("ColorArea", () => {
|
|
|
356
372
|
await elementUpdated(el);
|
|
357
373
|
expect(el.hue).to.equal(0);
|
|
358
374
|
expect(el.x, "pointerdown x").to.equal(0.48);
|
|
359
|
-
expect(el.y, "pointerdown y").to.equal(0.
|
|
375
|
+
expect(el.y, "pointerdown y").to.equal(0.52);
|
|
360
376
|
handle.dispatchEvent(
|
|
361
377
|
new PointerEvent("pointermove", {
|
|
362
378
|
pointerId: 1,
|
|
@@ -380,7 +396,7 @@ describe("ColorArea", () => {
|
|
|
380
396
|
await elementUpdated(el);
|
|
381
397
|
expect(el.hue).to.equal(0);
|
|
382
398
|
expect(el.x).to.equal(0.53);
|
|
383
|
-
expect(el.y).to.equal(0.
|
|
399
|
+
expect(el.y).to.equal(0.47);
|
|
384
400
|
});
|
|
385
401
|
it("responds to events on the internal input element", async () => {
|
|
386
402
|
const inputSpy = spy();
|
|
@@ -483,7 +499,7 @@ describe("ColorArea", () => {
|
|
|
483
499
|
await elementUpdated(el);
|
|
484
500
|
expect(el.hue, "hue").to.equal(100);
|
|
485
501
|
expect(el.x, "x").to.equal(0.67);
|
|
486
|
-
expect(el.y, "y").to.equal(0.
|
|
502
|
+
expect(el.y, "y").to.equal(0.75);
|
|
487
503
|
expect(el.color).to.equal("hsl(100, 50%, 50%)");
|
|
488
504
|
el.color = "hsl(100, 0%, 50%)";
|
|
489
505
|
await elementUpdated(el);
|
|
@@ -504,7 +520,7 @@ describe("ColorArea", () => {
|
|
|
504
520
|
const variance = 5e-5;
|
|
505
521
|
expect(el.hue).to.equal(100);
|
|
506
522
|
expect(el.x, "x").to.equal(0.67);
|
|
507
|
-
expect(el.y, "y").to.equal(0.
|
|
523
|
+
expect(el.y, "y").to.equal(0.75);
|
|
508
524
|
expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
|
|
509
525
|
expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
|
|
510
526
|
expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);
|