npm - @spectrum-web-components/color-wheel - Versions diffs - 0.1.13-lit-next.0 → 0.2.0 - Mend

@spectrum-web-components/color-wheel 0.1.13-lit-next.0 → 0.2.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.

Files changed (8) hide show

package/custom-elements.json +2 -2
package/package.json +6 -6
package/src/ColorWheel.js +3 -4
package/src/ColorWheel.js.map +1 -1
package/src/color-wheel.css.js +18 -8
package/src/color-wheel.css.js.map +1 -1
package/src/spectrum-color-wheel.css.js +18 -8
package/src/spectrum-color-wheel.css.js.map +1 -1

package/custom-elements.json CHANGED Viewed

@@ -483,7 +483,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:.0001;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}.wheel{background:conic-gradient(from 90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);height:100%;width:100%}.wheel:after,.wheel:before{border:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n) solid var(--spectrum-colorwheel-border-color);border-radius:50%;content:\"\";position:absolute}.wheel:after{bottom:0;left:0;right:0;top:0}.wheel:before{bottom:24px;left:24px;right:24px;top:24px}:host([disabled]) .wheel:after,:host([disabled]) .wheel:before{border-color:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .wheel{background:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`"
+          "default": "css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}.wheel{background:conic-gradient(from 90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);height:100%;width:100%}.wheel:after,.wheel:before{border:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n) solid var(--spectrum-colorwheel-border-color);border-radius:50%;content:\"\";position:absolute}.wheel:after{bottom:0;left:0;right:0;top:0}.wheel:before{bottom:24px;left:24px;right:24px;top:24px}:host([disabled]) .wheel:after,:host([disabled]) .wheel:before{border-color:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .wheel{background:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`"
         }
       ],
       "exports": [
@@ -519,7 +519,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:.0001;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`"
+          "default": "css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`"
         }
       ],
       "exports": [

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/color-wheel",
-    "version": "0.1.13-lit-next.0+297042cb5",
+    "version": "0.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -45,18 +45,18 @@
     ],
     "dependencies": {
         "@ctrl/tinycolor": "^3.3.3",
-        "@spectrum-web-components/base": "^0.4.6-lit-next.137+297042cb5",
-        "@spectrum-web-components/color-handle": "^0.1.10-lit-next.0+297042cb5",
-        "@spectrum-web-components/shared": "^0.12.9-lit-next.13+297042cb5",
+        "@spectrum-web-components/base": "^0.4.5",
+        "@spectrum-web-components/color-handle": "^0.2.0",
+        "@spectrum-web-components/shared": "^0.12.10",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/colorwheel": "^1.0.2"
+        "@spectrum-css/colorwheel": "^1.0.4"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "297042cb5770314e9a5181c1fd97d722622f091c"
+    "gitHead": "12d891f3dc85e8de641804d8efc9ca06b7fdee2d"
 }

package/src/ColorWheel.js CHANGED Viewed

@@ -322,10 +322,9 @@ export class ColorWheel extends Focusable {
                 color="hsl(${this.value}, 100%, 50%)"
                 ?disabled=${this.disabled}
                 style=${handleLocationStyles}
-                ${streamingListener({
-            start: ['pointerdown', this.handlePointerdown],
-            streamInside: ['pointermove', this.handlePointermove],
-            end: [['pointerup', 'pointercancel'], this.handlePointerup],
+                @manage=${streamingListener({ type: 'pointerdown', fn: this.handlePointerdown }, { type: 'pointermove', fn: this.handlePointermove }, {
+            type: ['pointerup', 'pointercancel'],
+            fn: this.handlePointerup,
         })}
             ></sp-color-handle>

package/src/ColorWheel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorWheel.js","sourceRoot":"","sources":["ColorWheel.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 html,\n CSSResultArray,\n TemplateResult,\n property,\n query,\n PropertyValues,\n ifDefined,\n} from '@spectrum-web-components/base';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { WithSWCResizeObserver, SWCResizeObserverEntry } from './types';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport styles from './color-wheel.css.js';\nimport {\n ColorHandle,\n ColorValue,\n extractHueAndSaturationRegExp,\n replaceHueAndSaturationRegExp,\n} from '@spectrum-web-components/color-handle';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/*\n @element sp-color-wheel\n * @slot gradient - a custom gradient visually outlining the available color values\n /\nexport class ColorWheel extends Focusable {\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 @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Number })\n public step = 1;\n\n @property({ type: Number })\n public get value(): number {\n return this._value;\n }\n\n public set value(hue: number) {\n const value = Math.min(360, Math.max(0, hue));\n if (value === this.value) {\n return;\n }\n const oldValue = this.value;\n const { s, v } = this._color.toHsv();\n this._color = new TinyColor({ h: value, s, v });\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value = 0;\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 'hex':\n case 'hex3':\n case 'hex4':\n case 'hex6':\n return this._format.isString\n ? this._color.toHexString()\n : this._color.toHex();\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(\n replaceHueAndSaturationRegExp,\n `$1${this.value}$2${this._saturation}`\n );\n } else {\n const { s, l, a } = this._color.toHsl();\n return { h: this.value, s, l, a };\n }\n case 'hsv':\n if (this._format.isString) {\n const hsvString = this._color.toHsvString();\n return hsvString.replace(\n replaceHueAndSaturationRegExp,\n `$1${this.value}$2${this._saturation}`\n );\n } else {\n const { s, v, a } = this._color.toHsv();\n return { h: this.value, s, v, a };\n }\n default:\n return 'No color format applied.';\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 if (isString && format.startsWith('hs')) {\n const values = extractHueAndSaturationRegExp.exec(color as string);\n\n if (values !== null) {\n const [, h, s] = values;\n this.value = Number(h);\n this._saturation = Number(s);\n }\n } else if (!isString && format.startsWith('hs')) {\n const colorInput = this._color.originalInput;\n const colorValues = Object.values(colorInput);\n this.value = colorValues[0];\n this._saturation = colorValues[1];\n } else {\n const { h } = this._color.toHsv();\n this.value = h;\n }\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 _saturation!: number;\n\n private _format: { format: string; isString: boolean } = {\n format: '',\n isString: false,\n };\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n this.value = (360 + this.value + delta) % 360;\n this._previousColor = this._color.clone();\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\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 private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\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 })\n );\n }\n\n public focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n const activeElement = (this.getRootNode() as Document)\n .activeElement as HTMLElement;\n if (activeElement) {\n let shouldFocus = false;\n try {\n // Browsers without support for the `:focus-visible`\n // selector will throw on the following test (Safari, older things).\n // Some won't throw, but will be focusing item rather than the menu and\n // will rely on the polyfill to know whether focus is \"visible\" or not.\n shouldFocus =\n activeElement.matches(':focus-visible') \|\|\n activeElement.matches('.focus-visible');\n } catch (error) {\n shouldFocus = activeElement.matches('.focus-visible');\n }\n this.focused = shouldFocus;\n }\n this.input.focus();\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.altered = 0;\n this.focused = false;\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 this.value = this.calculateHandlePosition(event);\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\n\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 this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\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 // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\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 {\n / c8 ignore next 3 /\n if (!this.boundingClientRect) {\n return this.value;\n }\n const rect = this.boundingClientRect;\n const { width, height, left, top } = rect;\n const centerX = left + width / 2;\n const centerY = top + height / 2;\n const pointX = event.clientX - centerX;\n const pointY = event.clientY - centerY;\n const value = (Math.atan2(pointY, pointX) 180) / Math.PI;\n\n return (360 + (360 + value)) % 360;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (\n event.button !== 0 \|\|\n (event.target as SVGElement).classList.contains('innerCircle')\n ) {\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: diameter = 160 } = this.boundingClientRect \|\| {};\n\n const radius = diameter / 2;\n const trackWidth = 24;\n const innerRadius = radius - trackWidth;\n const innerDiameter = innerRadius * 2;\n const clipPath = `path(evenodd, \"M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0\")`;\n const handleLocationStyles = `transform: translate(${\n (radius - 12.5) * Math.cos((this.value * Math.PI) / 180)\n }px, ${(radius - 12.5) * Math.sin((this.value * Math.PI) / 180)}px);`;\n return html`\n <slot\n name=\"gradient\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div class=\"wheel\" style=\"clip-path: ${clipPath}\"></div>\n </slot>\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=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${handleLocationStyles}\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 <input\n type=\"range\"\n class=\"slider\"\n aria-label=${this.label}\n min=\"0\"\n max=\"360\"\n step=${this.step}\n .value=${String(this.value)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\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 ((window as unknown) as WithSWCResizeObserver).ResizeObserver(\n (entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n }\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":"ColorWheel.js","sourceRoot":"","sources":["ColorWheel.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 html,\n CSSResultArray,\n TemplateResult,\n property,\n query,\n PropertyValues,\n ifDefined,\n} from '@spectrum-web-components/base';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { WithSWCResizeObserver, SWCResizeObserverEntry } from './types';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport styles from './color-wheel.css.js';\nimport {\n ColorHandle,\n ColorValue,\n extractHueAndSaturationRegExp,\n replaceHueAndSaturationRegExp,\n} from '@spectrum-web-components/color-handle';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/*\n @element sp-color-wheel\n * @slot gradient - a custom gradient visually outlining the available color values\n /\nexport class ColorWheel extends Focusable {\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 @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Number })\n public step = 1;\n\n @property({ type: Number })\n public get value(): number {\n return this._value;\n }\n\n public set value(hue: number) {\n const value = Math.min(360, Math.max(0, hue));\n if (value === this.value) {\n return;\n }\n const oldValue = this.value;\n const { s, v } = this._color.toHsv();\n this._color = new TinyColor({ h: value, s, v });\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value = 0;\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 'hex':\n case 'hex3':\n case 'hex4':\n case 'hex6':\n return this._format.isString\n ? this._color.toHexString()\n : this._color.toHex();\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(\n replaceHueAndSaturationRegExp,\n `$1${this.value}$2${this._saturation}`\n );\n } else {\n const { s, l, a } = this._color.toHsl();\n return { h: this.value, s, l, a };\n }\n case 'hsv':\n if (this._format.isString) {\n const hsvString = this._color.toHsvString();\n return hsvString.replace(\n replaceHueAndSaturationRegExp,\n `$1${this.value}$2${this._saturation}`\n );\n } else {\n const { s, v, a } = this._color.toHsv();\n return { h: this.value, s, v, a };\n }\n default:\n return 'No color format applied.';\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 if (isString && format.startsWith('hs')) {\n const values = extractHueAndSaturationRegExp.exec(color as string);\n\n if (values !== null) {\n const [, h, s] = values;\n this.value = Number(h);\n this._saturation = Number(s);\n }\n } else if (!isString && format.startsWith('hs')) {\n const colorInput = this._color.originalInput;\n const colorValues = Object.values(colorInput);\n this.value = colorValues[0];\n this._saturation = colorValues[1];\n } else {\n const { h } = this._color.toHsv();\n this.value = h;\n }\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 _saturation!: number;\n\n private _format: { format: string; isString: boolean } = {\n format: '',\n isString: false,\n };\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n this.value = (360 + this.value + delta) % 360;\n this._previousColor = this._color.clone();\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\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 private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\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 })\n );\n }\n\n public focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n const activeElement = (this.getRootNode() as Document)\n .activeElement as HTMLElement;\n if (activeElement) {\n let shouldFocus = false;\n try {\n // Browsers without support for the `:focus-visible`\n // selector will throw on the following test (Safari, older things).\n // Some won't throw, but will be focusing item rather than the menu and\n // will rely on the polyfill to know whether focus is \"visible\" or not.\n shouldFocus =\n activeElement.matches(':focus-visible') \|\|\n activeElement.matches('.focus-visible');\n } catch (error) {\n shouldFocus = activeElement.matches('.focus-visible');\n }\n this.focused = shouldFocus;\n }\n this.input.focus();\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.altered = 0;\n this.focused = false;\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 this.value = this.calculateHandlePosition(event);\n this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });\n\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 this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\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 // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\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 {\n / c8 ignore next 3 /\n if (!this.boundingClientRect) {\n return this.value;\n }\n const rect = this.boundingClientRect;\n const { width, height, left, top } = rect;\n const centerX = left + width / 2;\n const centerY = top + height / 2;\n const pointX = event.clientX - centerX;\n const pointY = event.clientY - centerY;\n const value = (Math.atan2(pointY, pointX) 180) / Math.PI;\n\n return (360 + (360 + value)) % 360;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (\n event.button !== 0 \|\|\n (event.target as SVGElement).classList.contains('innerCircle')\n ) {\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: diameter = 160 } = this.boundingClientRect \|\| {};\n\n const radius = diameter / 2;\n const trackWidth = 24;\n const innerRadius = radius - trackWidth;\n const innerDiameter = innerRadius * 2;\n const clipPath = `path(evenodd, \"M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0\")`;\n const handleLocationStyles = `transform: translate(${\n (radius - 12.5) * Math.cos((this.value * Math.PI) / 180)\n }px, ${(radius - 12.5) * Math.sin((this.value * Math.PI) / 180)}px);`;\n return html`\n <slot\n name=\"gradient\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div class=\"wheel\" style=\"clip-path: ${clipPath}\"></div>\n </slot>\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=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${handleLocationStyles}\n @manage=${streamingListener(\n { type: 'pointerdown', fn: this.handlePointerdown },\n { type: 'pointermove', fn: this.handlePointermove },\n {\n type: ['pointerup', 'pointercancel'],\n fn: this.handlePointerup,\n }\n )}\n ></sp-color-handle>\n\n <input\n type=\"range\"\n class=\"slider\"\n aria-label=${this.label}\n min=\"0\"\n max=\"360\"\n step=${this.step}\n .value=${String(this.value)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\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 ((window as unknown) as WithSWCResizeObserver).ResizeObserver(\n (entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n }\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/src/color-wheel.css.js CHANGED Viewed

@@ -11,26 +11,36 @@ governing permissions and limitations under the License.
 */
 import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(
+:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+)}:host([focused]) .handle{height:calc(var(
 --spectrum-colorhandle-size,
 var(--spectrum-global-dimension-size-200)
 )*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(
 --spectrum-colorhandle-size,
 var(--spectrum-global-dimension-size-200)
-)*2)}.slider{height:100%;left:0;margin:0;opacity:.0001;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(
+)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(
+--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)
+);position:relative;-webkit-user-select:none;user-select:none;width:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(
 --spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)
-);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(
+);box-sizing:border-box;height:var(
+--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)
+);position:relative;width:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(
 --spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)
 )}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(
---spectrum-colorarea-border-color
+--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)
 )}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(
---spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)
+--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)
 )}:host([disabled]) .outerCircle{fill:var(
---spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)
+--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 )}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(
---spectrum-colorwheel-border-color
+--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)
 )}.innerCircle,.outerCircle{stroke:var(
---spectrum-colorwheel-border-color
+--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)
 )}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}.wheel{background:conic-gradient(from 90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);height:100%;width:100%}.wheel:after,.wheel:before{border:var(
 --spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)
 ) solid var(--spectrum-colorwheel-border-color);border-radius:50%;content:"";position:absolute}.wheel:after{bottom:0;left:0;right:0;top:0}.wheel:before{bottom:24px;left:24px;right:24px;top:24px}:host([disabled]) .wheel:after,:host([disabled]) .wheel:before{border-color:var(

package/src/color-wheel.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-wheel.css.js","sourceRoot":"","sources":["color-wheel.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BjB~~,CAAC;AACF,eAAe,MAAM,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/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)2);margin-left:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity~~:.0001~~;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-~~global~~-color-~~gray-300~~)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-~~global~~-color-~~gray-300~~)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}.wheel{background:conic-gradient(from 90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);height:100%;width:100%}.wheel:after,.wheel:before{border:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n) solid var(--spectrum-colorwheel-border-color);border-radius:50%;content:\"\";position:absolute}.wheel:after{bottom:0;left:0;right:0;top:0}.wheel:before{bottom:24px;left:24px;right:24px;top:24px}:host([disabled]) .wheel:after,:host([disabled]) .wheel:before{border-color:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .wheel{background:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`;\nexport default styles;"]}
1	+ {"version":3,"file":"color-wheel.css.js","sourceRoot":"","sources":["color-wheel.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCjB,CAAC;AACF,eAAe,MAAM,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/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)16);--spectrum-colorwheel-height:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)2);margin-left:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}.wheel{background:conic-gradient(from 90deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);height:100%;width:100%}.wheel:after,.wheel:before{border:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n) solid var(--spectrum-colorwheel-border-color);border-radius:50%;content:\"\";position:absolute}.wheel:after{bottom:0;left:0;right:0;top:0}.wheel:before{bottom:24px;left:24px;right:24px;top:24px}:host([disabled]) .wheel:after,:host([disabled]) .wheel:before{border-color:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) .wheel{background:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`;\nexport default styles;"]}

package/src/spectrum-color-wheel.css.js CHANGED Viewed

@@ -11,26 +11,36 @@ governing permissions and limitations under the License.
 */
 import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(
+:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-height:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+)}:host([focused]) .handle{height:calc(var(
 --spectrum-colorhandle-size,
 var(--spectrum-global-dimension-size-200)
 )*2);margin-left:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(
 --spectrum-colorhandle-size,
 var(--spectrum-global-dimension-size-200)
-)*2)}.slider{height:100%;left:0;margin:0;opacity:.0001;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(
+)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(
+--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)
+);position:relative;-webkit-user-select:none;user-select:none;width:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(
 --spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)
-);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(
+);box-sizing:border-box;height:var(
+--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)
+);position:relative;width:var(
+--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)
+);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(
 --spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)
 )}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(
---spectrum-colorarea-border-color
+--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)
 )}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(
---spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300)
+--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)
 )}:host([disabled]) .outerCircle{fill:var(
---spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300)
+--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 )}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(
---spectrum-colorwheel-border-color
+--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)
 )}.innerCircle,.outerCircle{stroke:var(
---spectrum-colorwheel-border-color
+--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)
 )}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}
 `;
 export default styles;

package/src/spectrum-color-wheel.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spectrum-color-wheel.css.js","sourceRoot":"","sources":["spectrum-color-wheel.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;CAsBjB~~,CAAC;AACF,eAAe,MAAM,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/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)16);--spectrum-colorwheel-height:var(--spectrum-colorwheel-width)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)2);margin-left:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity~~:.0001~~;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(--spectrum-colorwheel-height);position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-colorwheel-width)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(--spectrum-colorwheel-height);position:relative;width:var(--spectrum-colorwheel-width);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-~~global~~-color-~~gray-300~~)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-~~global~~-color-~~gray-300~~)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`;\nexport default styles;"]}
1	+ {"version":3,"file":"spectrum-color-wheel.css.js","sourceRoot":"","sources":["spectrum-color-wheel.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCjB,CAAC;AACF,eAAe,MAAM,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/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-colorwheel-border-radius:100%;--spectrum-colorwheel-width:calc(var(--spectrum-global-dimension-size-125)16);--spectrum-colorwheel-height:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)2);margin-left:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));margin-top:calc(-1var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}.slider{height:100%;left:0;margin:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}:host{border-radius:var(--spectrum-colorwheel-border-radius);cursor:default;display:block;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([dragged]){z-index:2}::slotted([slot=gradient]){border-radius:100%;border-style:solid;border-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n);box-sizing:border-box;height:var(\n--spectrum-colorwheel-height,var(--spectrum-global-dimension-size-2400)\n);position:relative;width:var(\n--spectrum-colorwheel-width,var(--spectrum-global-dimension-size-2400)\n);z-index:0}.wheel{position:relative;z-index:1}.innerCircle,.outerCircle{fill:transparent;stroke-width:var(\n--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)\n)}.handle{left:50%;top:50%}:host{--spectrum-colorwheel-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .innerCircle,:host([disabled]) .outerCircle{stroke:var(\n--spectrum-colorwheel-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .outerCircle{fill:var(\n--spectrum-colorwheel-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .segment{display:none}::slotted([slot=gradient]){border-color:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}.innerCircle,.outerCircle{stroke:var(\n--spectrum-colorwheel-border-color,var(--spectrum-alias-border-color-translucent)\n)}@media (forced-colors:active){:host{--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`;\nexport default styles;"]}