@spectrum-web-components/color-slider 0.3.5-express.9 → 0.3.5
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 +2 -2
- package/package.json +6 -6
- package/src/color-slider.css.js +10 -2
- package/src/color-slider.css.js.map +1 -1
- package/src/spectrum-color-slider.css.js +10 -2
- package/src/spectrum-color-slider.css.js.map +1 -1
- package/stories/color-slider.stories.js +0 -104
- package/stories/color-slider.stories.js.map +0 -1
- package/stories/images.js +0 -3
- package/stories/images.js.map +0 -1
- package/test/color-slider.test-vrt.js +0 -15
- package/test/color-slider.test-vrt.js.map +0 -1
- package/test/color-slider.test.js +0 -513
- package/test/color-slider.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -523,7 +523,7 @@
|
|
|
523
523
|
{
|
|
524
524
|
"kind": "variable",
|
|
525
525
|
"name": "styles",
|
|
526
|
-
"default": "css`\n:host{--spectrum-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-global-color-static-white
|
|
526
|
+
"default": "css`\n:host{--spectrum-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .checkerboard{background:var(\n--spectrum-colorslider-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .checkerboard:before{box-shadow:0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .gradient{display:none}@media (forced-colors:active){:host{--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{--sp-color-slider-gradient-fallback:red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%;touch-action:none}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){height:100%;width:100%}\n`"
|
|
527
527
|
}
|
|
528
528
|
],
|
|
529
529
|
"exports": [
|
|
@@ -559,7 +559,7 @@
|
|
|
559
559
|
{
|
|
560
560
|
"kind": "variable",
|
|
561
561
|
"name": "styles",
|
|
562
|
-
"default": "css`\n:host{--spectrum-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-global-color-static-white
|
|
562
|
+
"default": "css`\n:host{--spectrum-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .checkerboard{background:var(\n--spectrum-colorslider-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .checkerboard:before{box-shadow:0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .gradient{display:none}@media (forced-colors:active){:host{--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`"
|
|
563
563
|
}
|
|
564
564
|
],
|
|
565
565
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/color-slider",
|
|
3
|
-
"version": "0.3.5
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@ctrl/tinycolor": "^3.3.3",
|
|
48
|
-
"@spectrum-web-components/base": "^0.5.
|
|
49
|
-
"@spectrum-web-components/color-handle": "^0.3.4
|
|
50
|
-
"@spectrum-web-components/shared": "^0.13.
|
|
48
|
+
"@spectrum-web-components/base": "^0.5.3",
|
|
49
|
+
"@spectrum-web-components/color-handle": "^0.3.4",
|
|
50
|
+
"@spectrum-web-components/shared": "^0.13.5",
|
|
51
51
|
"tslib": "^2.0.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@spectrum-css/colorslider": "^
|
|
54
|
+
"@spectrum-css/colorslider": "^2.0.0"
|
|
55
55
|
},
|
|
56
56
|
"types": "./src/index.d.ts",
|
|
57
57
|
"customElements": "custom-elements.json",
|
|
58
58
|
"sideEffects": [
|
|
59
59
|
"./sp-*.js"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "57aba8030b6af96af4015a0aa830e342a17dc219"
|
|
62
62
|
}
|
package/src/color-slider.css.js
CHANGED
|
@@ -44,8 +44,16 @@ var(--spectrum-global-dimension-size-200)
|
|
|
44
44
|
);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(
|
|
45
45
|
--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)
|
|
46
46
|
)}.checkerboard{background-color:var(
|
|
47
|
-
--spectrum-global-color-static-white
|
|
48
|
-
);background-image:linear-gradient(-45deg,transparent 75.5%,var(
|
|
47
|
+
--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
|
|
48
|
+
);background-image:linear-gradient(-45deg,transparent 75.5%,var(
|
|
49
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
50
|
+
) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
|
|
51
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
52
|
+
) 75.5%),linear-gradient(-45deg,var(
|
|
53
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
54
|
+
) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
|
|
55
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
56
|
+
) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(
|
|
49
57
|
--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)
|
|
50
58
|
) var(
|
|
51
59
|
--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-slider.css.js","sourceRoot":"","sources":["color-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"color-slider.css.js","sourceRoot":"","sources":["color-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,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-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .checkerboard{background:var(\n--spectrum-colorslider-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .checkerboard:before{box-shadow:0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .gradient{display:none}@media (forced-colors:active){:host{--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}:host{--sp-color-slider-gradient-fallback:red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%;touch-action:none}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){height:100%;width:100%}\n`;\nexport default styles;"]}
|
|
@@ -44,8 +44,16 @@ var(--spectrum-global-dimension-size-200)
|
|
|
44
44
|
);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(
|
|
45
45
|
--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)
|
|
46
46
|
)}.checkerboard{background-color:var(
|
|
47
|
-
--spectrum-global-color-static-white
|
|
48
|
-
);background-image:linear-gradient(-45deg,transparent 75.5%,var(
|
|
47
|
+
--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
|
|
48
|
+
);background-image:linear-gradient(-45deg,transparent 75.5%,var(
|
|
49
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
50
|
+
) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
|
|
51
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
52
|
+
) 75.5%),linear-gradient(-45deg,var(
|
|
53
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
54
|
+
) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
|
|
55
|
+
--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
|
|
56
|
+
) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(
|
|
49
57
|
--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)
|
|
50
58
|
) var(
|
|
51
59
|
--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-color-slider.css.js","sourceRoot":"","sources":["spectrum-color-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-color-slider.css.js","sourceRoot":"","sources":["spectrum-color-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,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-colorslider-handle-hitarea-border-radius:0%;--spectrum-colorslider-handle-hitarea-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-colorslider-handle-hitarea-height:var(\n--spectrum-global-dimension-size-300\n)}:host([focused]) .handle{height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);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{cursor:default;display:block;height:var(\n--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300)\n);position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400)\n)}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([vertical]){display:inline-block;height:var(\n--spectrum-colorslider-vertical-default-length,var(--spectrum-global-dimension-size-2400)\n);width:var(\n--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300)\n)}:host([vertical]) .handle{left:50%;top:0}.handle{left:0;top:50%}.handle:after{border-radius:var(\n--spectrum-colorslider-handle-hitarea-border-radius\n);height:var(--spectrum-colorslider-handle-hitarea-height);width:var(--spectrum-colorslider-handle-hitarea-width)}.checkerboard{background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1),calc(var(--spectrum-global-dimension-static-size-100, 8px)*-1) 0;background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px)}.checkerboard:before{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:1}.checkerboard,.gradient{border-radius:var(\n--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular)\n);height:100%;width:100%}:host{--spectrum-colorslider-border-color:var(\n--spectrum-colorarea-border-color,var(--spectrum-alias-border-color-translucent)\n)}.checkerboard{background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%)}.checkerboard:before{box-shadow:inset 0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color,var(--spectrum-alias-border-color-translucent)\n)}:host([disabled]) .checkerboard{background:var(\n--spectrum-colorslider-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .checkerboard:before{box-shadow:0 0 0 var(\n--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorslider-border-color-disabled,var(--spectrum-alias-track-color-disabled)\n)}:host([disabled]) .gradient{display:none}@media (forced-colors:active){:host{--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-fill-color-disabled:Canvas}:host{forced-color-adjust:none}}\n`;\nexport default styles;"]}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import '../sp-color-slider.js';
|
|
14
|
-
import { gradient } from './images.js';
|
|
15
|
-
export default {
|
|
16
|
-
title: 'Color/Slider',
|
|
17
|
-
component: 'sp-color-slider',
|
|
18
|
-
};
|
|
19
|
-
export const Default = () => {
|
|
20
|
-
return html `
|
|
21
|
-
<sp-color-slider></sp-color-slider>
|
|
22
|
-
`;
|
|
23
|
-
};
|
|
24
|
-
// export const alpha = (): TemplateResult => {
|
|
25
|
-
// return html`
|
|
26
|
-
// <sp-color-slider
|
|
27
|
-
// style="--sp-color-slider-gradient: rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%;"
|
|
28
|
-
// color="rgba(0, 0, 0, 1)"
|
|
29
|
-
// ></sp-color-slider>
|
|
30
|
-
// `;
|
|
31
|
-
// };
|
|
32
|
-
export const disabled = () => {
|
|
33
|
-
return html `
|
|
34
|
-
<sp-color-slider disabled></sp-color-slider>
|
|
35
|
-
`;
|
|
36
|
-
};
|
|
37
|
-
export const vertical = () => {
|
|
38
|
-
return html `
|
|
39
|
-
<sp-color-slider vertical></sp-color-slider>
|
|
40
|
-
`;
|
|
41
|
-
};
|
|
42
|
-
export const canvas = () => {
|
|
43
|
-
return html `
|
|
44
|
-
<sp-color-slider color="rgb(255, 0, 0)">
|
|
45
|
-
<canvas slot="gradient" role="presentation"></canvas>
|
|
46
|
-
</sp-color-slider>
|
|
47
|
-
`;
|
|
48
|
-
};
|
|
49
|
-
class CanvasWriter extends HTMLElement {
|
|
50
|
-
constructor() {
|
|
51
|
-
super();
|
|
52
|
-
this.writeStatePromise = Promise.resolve(false);
|
|
53
|
-
this.writeStatePromise = new Promise((res) => {
|
|
54
|
-
requestAnimationFrame(() => {
|
|
55
|
-
this.writeToCanvas();
|
|
56
|
-
res(true);
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
writeToCanvas() {
|
|
61
|
-
const { previousElementSibling } = this;
|
|
62
|
-
if (previousElementSibling) {
|
|
63
|
-
const canvas = previousElementSibling.querySelector('canvas[slot="gradient"]');
|
|
64
|
-
if (canvas) {
|
|
65
|
-
canvas.width = canvas.offsetWidth;
|
|
66
|
-
canvas.height = canvas.offsetHeight;
|
|
67
|
-
const context = canvas.getContext('2d');
|
|
68
|
-
if (context) {
|
|
69
|
-
context.rect(0, 0, canvas.width, canvas.height);
|
|
70
|
-
const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
|
|
71
|
-
gradient.addColorStop(0, 'rgb(255, 0, 0)');
|
|
72
|
-
gradient.addColorStop(0.17, 'rgb(255, 255, 0)');
|
|
73
|
-
gradient.addColorStop(0.33, 'rgb(0, 255, 0)');
|
|
74
|
-
gradient.addColorStop(0.5, 'rgb(0, 255, 255)');
|
|
75
|
-
gradient.addColorStop(0.67, 'rgb(0, 0, 255)');
|
|
76
|
-
gradient.addColorStop(0.83, 'rgb(255, 0, 255)');
|
|
77
|
-
gradient.addColorStop(1, 'rgb(255, 0, 0)');
|
|
78
|
-
context.fillStyle = gradient;
|
|
79
|
-
context.fill();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
get updateComplete() {
|
|
85
|
-
return this.writeStatePromise;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
customElements.define('slider-canvas-writer', CanvasWriter);
|
|
89
|
-
canvas.decorators = [
|
|
90
|
-
(story) => {
|
|
91
|
-
return html `
|
|
92
|
-
${story()}
|
|
93
|
-
<slider-canvas-writer></slider-canvas-writer>
|
|
94
|
-
`;
|
|
95
|
-
},
|
|
96
|
-
];
|
|
97
|
-
export const image = () => {
|
|
98
|
-
return html `
|
|
99
|
-
<sp-color-slider color="rgb(255, 0, 0)">
|
|
100
|
-
<img slot="gradient" role="presentation" src=${gradient} />
|
|
101
|
-
</sp-color-slider>
|
|
102
|
-
`;
|
|
103
|
-
};
|
|
104
|
-
//# sourceMappingURL=color-slider.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-slider.stories.js","sourceRoot":"","sources":["color-slider.stories.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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-color-slider.js';\nimport { gradient } from './images.js';\nexport default {\n title: 'Color/Slider',\n component: 'sp-color-slider',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-color-slider></sp-color-slider>\n `;\n};\n\n// export const alpha = (): TemplateResult => {\n// return html`\n// <sp-color-slider\n// style=\"--sp-color-slider-gradient: rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%;\"\n// color=\"rgba(0, 0, 0, 1)\"\n// ></sp-color-slider>\n// `;\n// };\n\nexport const disabled = (): TemplateResult => {\n return html`\n <sp-color-slider disabled></sp-color-slider>\n `;\n};\n\nexport const vertical = (): TemplateResult => {\n return html`\n <sp-color-slider vertical></sp-color-slider>\n `;\n};\n\nexport const canvas = (): TemplateResult => {\n return html`\n <sp-color-slider color=\"rgb(255, 0, 0)\">\n <canvas slot=\"gradient\" role=\"presentation\"></canvas>\n </sp-color-slider>\n `;\n};\n\nclass CanvasWriter extends HTMLElement {\n writeToCanvas(): void {\n const { previousElementSibling } = this;\n if (previousElementSibling) {\n const canvas = previousElementSibling.querySelector(\n 'canvas[slot=\"gradient\"]'\n ) as HTMLCanvasElement;\n\n if (canvas) {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n const context = canvas.getContext('2d');\n if (context) {\n context.rect(0, 0, canvas.width, canvas.height);\n\n const gradient = context.createLinearGradient(\n 0,\n 0,\n canvas.width,\n canvas.height\n );\n\n gradient.addColorStop(0, 'rgb(255, 0, 0)');\n gradient.addColorStop(0.17, 'rgb(255, 255, 0)');\n gradient.addColorStop(0.33, 'rgb(0, 255, 0)');\n gradient.addColorStop(0.5, 'rgb(0, 255, 255)');\n gradient.addColorStop(0.67, 'rgb(0, 0, 255)');\n gradient.addColorStop(0.83, 'rgb(255, 0, 255)');\n gradient.addColorStop(1, 'rgb(255, 0, 0)');\n\n context.fillStyle = gradient;\n context.fill();\n }\n }\n }\n }\n\n constructor() {\n super();\n this.writeStatePromise = new Promise((res) => {\n requestAnimationFrame(() => {\n this.writeToCanvas();\n res(true);\n });\n });\n }\n\n private writeStatePromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.writeStatePromise;\n }\n}\n\ncustomElements.define('slider-canvas-writer', CanvasWriter);\n\ncanvas.decorators = [\n (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <slider-canvas-writer></slider-canvas-writer>\n `;\n },\n];\n\nexport const image = (): TemplateResult => {\n return html`\n <sp-color-slider color=\"rgb(255, 0, 0)\">\n <img slot=\"gradient\" role=\"presentation\" src=${gradient} />\n </sp-color-slider>\n `;\n};\n"]}
|
package/stories/images.js
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line notice/notice
|
|
2
|
-
export const gradient = 'data:image/png;base64,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ZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU06BaixAAAFVElEQVRmk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZ5P9Wm/wfmvGn3ZOZ97oAAAAASUVORK5CYII=';
|
|
3
|
-
//# sourceMappingURL=images.js.map
|
package/stories/images.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"images.js","sourceRoot":"","sources":["images.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,MAAM,CAAC,MAAM,QAAQ,GACjB,onZAAonZ,CAAC","sourcesContent":["// eslint-disable-next-line notice/notice\nexport const gradient =\n 'data:image/png;base64,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ZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU06BaixAAAFVElEQVRmk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZZDaZTWaT2WQ2mU1mk9lkNplNZpPZ5P9Wm/wfmvGn3ZOZ97oAAAAASUVORK5CYII=';\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/color-slider.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('ColorSliderStories', stories);
|
|
15
|
-
//# sourceMappingURL=color-slider.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-slider.test-vrt.js","sourceRoot":"","sources":["color-slider.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/color-slider.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ColorSliderStories', stories);\n"]}
|
|
@@ -1,513 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
13
|
-
import { arrowDownEvent, arrowDownKeyupEvent, arrowLeftEvent, arrowLeftKeyupEvent, arrowRightEvent, arrowRightKeyupEvent, arrowUpEvent, arrowUpKeyupEvent, } from '../../../test/testing-helpers.js';
|
|
14
|
-
import '../sp-color-slider.js';
|
|
15
|
-
import { TinyColor } from '@ctrl/tinycolor';
|
|
16
|
-
import { sendKeys } from '@web/test-runner-commands';
|
|
17
|
-
import { spy } from 'sinon';
|
|
18
|
-
describe('ColorSlider', () => {
|
|
19
|
-
it('loads default color-slider accessibly', async () => {
|
|
20
|
-
const el = await fixture(html `
|
|
21
|
-
<sp-color-slider></sp-color-slider>
|
|
22
|
-
`);
|
|
23
|
-
await elementUpdated(el);
|
|
24
|
-
await expect(el).to.be.accessible();
|
|
25
|
-
});
|
|
26
|
-
it('manages a single tab stop', async () => {
|
|
27
|
-
const test = await fixture(html `
|
|
28
|
-
<div>
|
|
29
|
-
<input type="text" id="test-input-1" />
|
|
30
|
-
<sp-color-slider></sp-color-slider>
|
|
31
|
-
<input type="text" id="test-input-2" />
|
|
32
|
-
</div>
|
|
33
|
-
`);
|
|
34
|
-
const el = test.querySelector('sp-color-slider');
|
|
35
|
-
const input1 = test.querySelector('input:nth-of-type(1)');
|
|
36
|
-
const input2 = test.querySelector('input:nth-of-type(2)');
|
|
37
|
-
await elementUpdated(el);
|
|
38
|
-
input1.focus();
|
|
39
|
-
expect(document.activeElement).to.equal(input1);
|
|
40
|
-
await sendKeys({
|
|
41
|
-
press: 'Tab',
|
|
42
|
-
});
|
|
43
|
-
expect(document.activeElement).to.equal(el);
|
|
44
|
-
let value = el.value;
|
|
45
|
-
await sendKeys({
|
|
46
|
-
press: 'ArrowRight',
|
|
47
|
-
});
|
|
48
|
-
expect(el.value).to.not.equal(value);
|
|
49
|
-
await sendKeys({
|
|
50
|
-
press: 'Tab',
|
|
51
|
-
});
|
|
52
|
-
expect(document.activeElement).to.equal(input2);
|
|
53
|
-
await sendKeys({
|
|
54
|
-
press: 'Shift+Tab',
|
|
55
|
-
});
|
|
56
|
-
expect(document.activeElement).to.equal(el);
|
|
57
|
-
value = el.value;
|
|
58
|
-
await sendKeys({
|
|
59
|
-
press: 'ArrowDown',
|
|
60
|
-
});
|
|
61
|
-
expect(el.value).to.not.equal(value);
|
|
62
|
-
await sendKeys({
|
|
63
|
-
press: 'Shift+Tab',
|
|
64
|
-
});
|
|
65
|
-
expect(document.activeElement).to.equal(input1);
|
|
66
|
-
});
|
|
67
|
-
it('manages [focused]', async () => {
|
|
68
|
-
const el = await fixture(html `
|
|
69
|
-
<sp-color-slider></sp-color-slider>
|
|
70
|
-
`);
|
|
71
|
-
await elementUpdated(el);
|
|
72
|
-
el.dispatchEvent(new FocusEvent('focusin'));
|
|
73
|
-
await elementUpdated(el);
|
|
74
|
-
expect(el.focused).to.be.true;
|
|
75
|
-
el.dispatchEvent(new FocusEvent('focusout'));
|
|
76
|
-
await elementUpdated(el);
|
|
77
|
-
expect(el.focused).to.be.false;
|
|
78
|
-
});
|
|
79
|
-
it('dispatches input and change events in response to "Arrow*" keypresses', async () => {
|
|
80
|
-
const inputSpy = spy();
|
|
81
|
-
const changeSpy = spy();
|
|
82
|
-
const el = await fixture(html `
|
|
83
|
-
<sp-color-slider
|
|
84
|
-
@change=${() => changeSpy()}
|
|
85
|
-
@input=${() => inputSpy()}
|
|
86
|
-
></sp-color-slider>
|
|
87
|
-
`);
|
|
88
|
-
await elementUpdated(el);
|
|
89
|
-
el.focus();
|
|
90
|
-
await sendKeys({ press: 'ArrowRight' });
|
|
91
|
-
expect(inputSpy.callCount).to.equal(1);
|
|
92
|
-
expect(changeSpy.callCount).to.equal(1);
|
|
93
|
-
await sendKeys({ press: 'ArrowLeft' });
|
|
94
|
-
expect(inputSpy.callCount).to.equal(2);
|
|
95
|
-
expect(changeSpy.callCount).to.equal(2);
|
|
96
|
-
await sendKeys({ press: 'ArrowUp' });
|
|
97
|
-
expect(inputSpy.callCount).to.equal(3);
|
|
98
|
-
expect(changeSpy.callCount).to.equal(3);
|
|
99
|
-
await sendKeys({ press: 'ArrowDown' });
|
|
100
|
-
expect(inputSpy.callCount).to.equal(4);
|
|
101
|
-
expect(changeSpy.callCount).to.equal(4);
|
|
102
|
-
});
|
|
103
|
-
it('responds to events on the internal input element', async () => {
|
|
104
|
-
// screen reader interactions dispatch events as found in the following test
|
|
105
|
-
const inputSpy = spy();
|
|
106
|
-
const changeSpy = spy();
|
|
107
|
-
const el = await fixture(html `
|
|
108
|
-
<sp-color-slider
|
|
109
|
-
@change=${() => changeSpy()}
|
|
110
|
-
@input=${() => inputSpy()}
|
|
111
|
-
></sp-color-slider>
|
|
112
|
-
`);
|
|
113
|
-
await elementUpdated(el);
|
|
114
|
-
el.focus();
|
|
115
|
-
el.focusElement.dispatchEvent(new Event('input', {
|
|
116
|
-
bubbles: true,
|
|
117
|
-
composed: true,
|
|
118
|
-
}));
|
|
119
|
-
el.focusElement.dispatchEvent(new Event('change', {
|
|
120
|
-
bubbles: true,
|
|
121
|
-
composed: false, // native change events do not compose themselves by default
|
|
122
|
-
}));
|
|
123
|
-
expect(inputSpy.callCount).to.equal(1);
|
|
124
|
-
expect(changeSpy.callCount).to.equal(1);
|
|
125
|
-
});
|
|
126
|
-
it('manages value on "Arrow*" keypresses', async () => {
|
|
127
|
-
const el = await fixture(html `
|
|
128
|
-
<sp-color-slider
|
|
129
|
-
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;"
|
|
130
|
-
></sp-color-slider>
|
|
131
|
-
`);
|
|
132
|
-
await elementUpdated(el);
|
|
133
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
134
|
-
const input = el.focusElement;
|
|
135
|
-
input.dispatchEvent(arrowUpEvent());
|
|
136
|
-
input.dispatchEvent(arrowUpKeyupEvent());
|
|
137
|
-
input.dispatchEvent(arrowUpEvent());
|
|
138
|
-
input.dispatchEvent(arrowUpKeyupEvent());
|
|
139
|
-
await elementUpdated(el);
|
|
140
|
-
expect(el.sliderHandlePosition).to.equal(2);
|
|
141
|
-
input.dispatchEvent(arrowRightEvent());
|
|
142
|
-
input.dispatchEvent(arrowRightKeyupEvent());
|
|
143
|
-
input.dispatchEvent(arrowRightEvent());
|
|
144
|
-
input.dispatchEvent(arrowRightKeyupEvent());
|
|
145
|
-
await elementUpdated(el);
|
|
146
|
-
expect(el.sliderHandlePosition).to.equal(3.9999999999999996);
|
|
147
|
-
input.dispatchEvent(arrowDownEvent());
|
|
148
|
-
input.dispatchEvent(arrowDownKeyupEvent());
|
|
149
|
-
input.dispatchEvent(arrowDownEvent());
|
|
150
|
-
input.dispatchEvent(arrowDownKeyupEvent());
|
|
151
|
-
await elementUpdated(el);
|
|
152
|
-
expect(el.sliderHandlePosition).to.equal(1.9999999999999998);
|
|
153
|
-
input.dispatchEvent(arrowLeftEvent());
|
|
154
|
-
input.dispatchEvent(arrowLeftKeyupEvent());
|
|
155
|
-
input.dispatchEvent(arrowLeftEvent());
|
|
156
|
-
input.dispatchEvent(arrowLeftKeyupEvent());
|
|
157
|
-
await elementUpdated(el);
|
|
158
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
159
|
-
});
|
|
160
|
-
it('accepts "Arrow*" keypresses in dir="rtl"', async () => {
|
|
161
|
-
const el = await fixture(html `
|
|
162
|
-
<sp-color-slider dir="rtl"></sp-color-slider>
|
|
163
|
-
`);
|
|
164
|
-
await elementUpdated(el);
|
|
165
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
166
|
-
const input = el.focusElement;
|
|
167
|
-
input.dispatchEvent(arrowUpEvent());
|
|
168
|
-
input.dispatchEvent(arrowUpKeyupEvent());
|
|
169
|
-
input.dispatchEvent(arrowUpEvent());
|
|
170
|
-
input.dispatchEvent(arrowUpKeyupEvent());
|
|
171
|
-
await elementUpdated(el);
|
|
172
|
-
expect(el.sliderHandlePosition).to.equal(2);
|
|
173
|
-
input.dispatchEvent(arrowRightEvent());
|
|
174
|
-
input.dispatchEvent(arrowRightKeyupEvent());
|
|
175
|
-
input.dispatchEvent(arrowRightEvent());
|
|
176
|
-
input.dispatchEvent(arrowRightKeyupEvent());
|
|
177
|
-
await elementUpdated(el);
|
|
178
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
179
|
-
input.dispatchEvent(arrowLeftEvent());
|
|
180
|
-
input.dispatchEvent(arrowLeftKeyupEvent());
|
|
181
|
-
input.dispatchEvent(arrowLeftEvent());
|
|
182
|
-
input.dispatchEvent(arrowLeftKeyupEvent());
|
|
183
|
-
await elementUpdated(el);
|
|
184
|
-
expect(el.sliderHandlePosition).to.equal(2);
|
|
185
|
-
input.dispatchEvent(arrowDownEvent());
|
|
186
|
-
input.dispatchEvent(arrowDownKeyupEvent());
|
|
187
|
-
input.dispatchEvent(arrowDownEvent());
|
|
188
|
-
input.dispatchEvent(arrowDownKeyupEvent());
|
|
189
|
-
await elementUpdated(el);
|
|
190
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
191
|
-
});
|
|
192
|
-
it('accepts "Arrow*" keypresses with alteration', async () => {
|
|
193
|
-
const el = await fixture(html `
|
|
194
|
-
<sp-color-slider></sp-color-slider>
|
|
195
|
-
`);
|
|
196
|
-
await elementUpdated(el);
|
|
197
|
-
el.focus();
|
|
198
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
199
|
-
await sendKeys({
|
|
200
|
-
down: 'Shift',
|
|
201
|
-
});
|
|
202
|
-
await sendKeys({
|
|
203
|
-
press: 'ArrowUp',
|
|
204
|
-
});
|
|
205
|
-
await sendKeys({
|
|
206
|
-
press: 'ArrowUp',
|
|
207
|
-
});
|
|
208
|
-
await elementUpdated(el);
|
|
209
|
-
expect(el.sliderHandlePosition).to.equal(20);
|
|
210
|
-
await sendKeys({
|
|
211
|
-
press: 'ArrowRight',
|
|
212
|
-
});
|
|
213
|
-
await sendKeys({
|
|
214
|
-
press: 'ArrowRight',
|
|
215
|
-
});
|
|
216
|
-
await elementUpdated(el);
|
|
217
|
-
expect(el.sliderHandlePosition).to.equal(40);
|
|
218
|
-
await sendKeys({
|
|
219
|
-
press: 'ArrowDown',
|
|
220
|
-
});
|
|
221
|
-
await sendKeys({
|
|
222
|
-
press: 'ArrowDown',
|
|
223
|
-
});
|
|
224
|
-
await elementUpdated(el);
|
|
225
|
-
expect(el.sliderHandlePosition).to.equal(20);
|
|
226
|
-
await sendKeys({
|
|
227
|
-
press: 'ArrowLeft',
|
|
228
|
-
});
|
|
229
|
-
await sendKeys({
|
|
230
|
-
press: 'ArrowLeft',
|
|
231
|
-
});
|
|
232
|
-
await sendKeys({
|
|
233
|
-
up: 'Shift',
|
|
234
|
-
});
|
|
235
|
-
await elementUpdated(el);
|
|
236
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
237
|
-
});
|
|
238
|
-
it('accepts pointer events', async () => {
|
|
239
|
-
const color = new TinyColor({ h: '0', s: '20%', l: '70%' });
|
|
240
|
-
const el = await fixture(html `
|
|
241
|
-
<sp-color-slider
|
|
242
|
-
.color=${color}
|
|
243
|
-
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;"
|
|
244
|
-
></sp-color-slider>
|
|
245
|
-
`);
|
|
246
|
-
await elementUpdated(el);
|
|
247
|
-
const { handle } = el;
|
|
248
|
-
handle.setPointerCapture = () => {
|
|
249
|
-
return;
|
|
250
|
-
};
|
|
251
|
-
handle.releasePointerCapture = () => {
|
|
252
|
-
return;
|
|
253
|
-
};
|
|
254
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
255
|
-
expect(el.color.s).to.be.within(0.19, 0.21);
|
|
256
|
-
expect(el.color.l).to.be.within(0.69, 0.71);
|
|
257
|
-
handle.dispatchEvent(new PointerEvent('pointerdown', {
|
|
258
|
-
button: 1,
|
|
259
|
-
pointerId: 1,
|
|
260
|
-
clientX: 100,
|
|
261
|
-
clientY: 15,
|
|
262
|
-
bubbles: true,
|
|
263
|
-
composed: true,
|
|
264
|
-
cancelable: true,
|
|
265
|
-
}));
|
|
266
|
-
await elementUpdated(el);
|
|
267
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
268
|
-
expect(el.color.s).to.be.within(0.19, 0.21);
|
|
269
|
-
expect(el.color.l).to.be.within(0.69, 0.71);
|
|
270
|
-
const root = el.shadowRoot ? el.shadowRoot : el;
|
|
271
|
-
const gradient = root.querySelector('.gradient');
|
|
272
|
-
gradient.dispatchEvent(new PointerEvent('pointerdown', {
|
|
273
|
-
button: 1,
|
|
274
|
-
pointerId: 1,
|
|
275
|
-
clientX: 100,
|
|
276
|
-
clientY: 15,
|
|
277
|
-
bubbles: true,
|
|
278
|
-
composed: true,
|
|
279
|
-
cancelable: true,
|
|
280
|
-
}));
|
|
281
|
-
await elementUpdated(el);
|
|
282
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
283
|
-
expect(el.color.s).to.be.within(0.19, 0.21);
|
|
284
|
-
expect(el.color.l).to.be.within(0.69, 0.71);
|
|
285
|
-
gradient.dispatchEvent(new PointerEvent('pointerdown', {
|
|
286
|
-
pointerId: 1,
|
|
287
|
-
clientX: 100,
|
|
288
|
-
clientY: 15,
|
|
289
|
-
bubbles: true,
|
|
290
|
-
composed: true,
|
|
291
|
-
cancelable: true,
|
|
292
|
-
}));
|
|
293
|
-
await elementUpdated(el);
|
|
294
|
-
expect(el.sliderHandlePosition).to.equal(47.91666666666667);
|
|
295
|
-
expect(el.color.s).to.be.within(0.19, 0.21);
|
|
296
|
-
expect(el.color.l).to.be.within(0.69, 0.71);
|
|
297
|
-
handle.dispatchEvent(new PointerEvent('pointermove', {
|
|
298
|
-
pointerId: 1,
|
|
299
|
-
clientX: 110,
|
|
300
|
-
clientY: 15,
|
|
301
|
-
bubbles: true,
|
|
302
|
-
composed: true,
|
|
303
|
-
cancelable: true,
|
|
304
|
-
}));
|
|
305
|
-
handle.dispatchEvent(new PointerEvent('pointerup', {
|
|
306
|
-
pointerId: 1,
|
|
307
|
-
clientX: 110,
|
|
308
|
-
clientY: 15,
|
|
309
|
-
bubbles: true,
|
|
310
|
-
composed: true,
|
|
311
|
-
cancelable: true,
|
|
312
|
-
}));
|
|
313
|
-
await elementUpdated(el);
|
|
314
|
-
expect(el.sliderHandlePosition).to.equal(53.125);
|
|
315
|
-
expect(el.color.s).to.be.within(0.19, 0.21);
|
|
316
|
-
expect(el.color.l).to.be.within(0.69, 0.71);
|
|
317
|
-
});
|
|
318
|
-
it('accepts pointer events while [vertical]', async () => {
|
|
319
|
-
const el = await fixture(html `
|
|
320
|
-
<sp-color-slider
|
|
321
|
-
vertical
|
|
322
|
-
style="--spectrum-colorslider-vertical-default-length: 192px; --spectrum-colorslider-vertical-width: 24px;"
|
|
323
|
-
></sp-color-slider>
|
|
324
|
-
`);
|
|
325
|
-
await elementUpdated(el);
|
|
326
|
-
const { handle } = el;
|
|
327
|
-
handle.setPointerCapture = () => {
|
|
328
|
-
return;
|
|
329
|
-
};
|
|
330
|
-
handle.releasePointerCapture = () => {
|
|
331
|
-
return;
|
|
332
|
-
};
|
|
333
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
334
|
-
const root = el.shadowRoot ? el.shadowRoot : el;
|
|
335
|
-
const gradient = root.querySelector('.gradient');
|
|
336
|
-
gradient.dispatchEvent(new PointerEvent('pointerdown', {
|
|
337
|
-
pointerId: 1,
|
|
338
|
-
clientX: 15,
|
|
339
|
-
clientY: 100,
|
|
340
|
-
bubbles: true,
|
|
341
|
-
composed: true,
|
|
342
|
-
cancelable: true,
|
|
343
|
-
}));
|
|
344
|
-
await elementUpdated(el);
|
|
345
|
-
expect(el.sliderHandlePosition).to.equal(47.91666666666667);
|
|
346
|
-
handle.dispatchEvent(new PointerEvent('pointermove', {
|
|
347
|
-
pointerId: 1,
|
|
348
|
-
clientX: 15,
|
|
349
|
-
clientY: 110,
|
|
350
|
-
bubbles: true,
|
|
351
|
-
composed: true,
|
|
352
|
-
cancelable: true,
|
|
353
|
-
}));
|
|
354
|
-
handle.dispatchEvent(new PointerEvent('pointerup', {
|
|
355
|
-
pointerId: 1,
|
|
356
|
-
clientX: 15,
|
|
357
|
-
clientY: 110,
|
|
358
|
-
bubbles: true,
|
|
359
|
-
composed: true,
|
|
360
|
-
cancelable: true,
|
|
361
|
-
}));
|
|
362
|
-
await elementUpdated(el);
|
|
363
|
-
expect(el.sliderHandlePosition).to.equal(53.125);
|
|
364
|
-
});
|
|
365
|
-
it('accepts pointer events in dir="rtl"', async () => {
|
|
366
|
-
document.documentElement.dir = 'rtl';
|
|
367
|
-
const el = await fixture(html `
|
|
368
|
-
<sp-color-slider
|
|
369
|
-
dir="rtl"
|
|
370
|
-
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-height: 24px;"
|
|
371
|
-
></sp-color-slider>
|
|
372
|
-
`);
|
|
373
|
-
await elementUpdated(el);
|
|
374
|
-
const { handle } = el;
|
|
375
|
-
const clientWidth = document.documentElement.offsetWidth;
|
|
376
|
-
handle.setPointerCapture = () => {
|
|
377
|
-
return;
|
|
378
|
-
};
|
|
379
|
-
handle.releasePointerCapture = () => {
|
|
380
|
-
return;
|
|
381
|
-
};
|
|
382
|
-
expect(el.sliderHandlePosition).to.equal(0);
|
|
383
|
-
const gradient = el.shadowRoot.querySelector('.gradient');
|
|
384
|
-
gradient.dispatchEvent(new PointerEvent('pointerdown', {
|
|
385
|
-
pointerId: 1,
|
|
386
|
-
clientX: 700,
|
|
387
|
-
clientY: 15,
|
|
388
|
-
bubbles: true,
|
|
389
|
-
composed: true,
|
|
390
|
-
cancelable: true,
|
|
391
|
-
}));
|
|
392
|
-
await elementUpdated(el);
|
|
393
|
-
expect(el.sliderHandlePosition).to.equal(52.083333333333336);
|
|
394
|
-
handle.dispatchEvent(new PointerEvent('pointermove', {
|
|
395
|
-
pointerId: 1,
|
|
396
|
-
clientX: clientWidth - 110,
|
|
397
|
-
clientY: 15,
|
|
398
|
-
bubbles: true,
|
|
399
|
-
composed: true,
|
|
400
|
-
cancelable: true,
|
|
401
|
-
}));
|
|
402
|
-
handle.dispatchEvent(new PointerEvent('pointerup', {
|
|
403
|
-
pointerId: 1,
|
|
404
|
-
clientX: clientWidth - 110,
|
|
405
|
-
clientY: 15,
|
|
406
|
-
bubbles: true,
|
|
407
|
-
composed: true,
|
|
408
|
-
cancelable: true,
|
|
409
|
-
}));
|
|
410
|
-
await elementUpdated(el);
|
|
411
|
-
expect(el.sliderHandlePosition).to.equal(46.875);
|
|
412
|
-
});
|
|
413
|
-
const colorFormats = [
|
|
414
|
-
//rgb
|
|
415
|
-
{ name: 'RGB String', color: 'rgb(204, 51, 204)' },
|
|
416
|
-
{ name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },
|
|
417
|
-
//prgb
|
|
418
|
-
{ name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },
|
|
419
|
-
{ name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },
|
|
420
|
-
// hex
|
|
421
|
-
{ name: 'Hex', color: 'cc33cc' },
|
|
422
|
-
{ name: 'Hex String', color: '#cc33cc' },
|
|
423
|
-
// hex8
|
|
424
|
-
{ name: 'Hex8', color: 'cc33ccff' },
|
|
425
|
-
{ name: 'Hex8 String', color: '#cc33ccff' },
|
|
426
|
-
// name
|
|
427
|
-
{ name: 'string', color: 'red' },
|
|
428
|
-
// hsl
|
|
429
|
-
{ name: 'HSL String', color: 'hsl(300, 60%, 50%)' },
|
|
430
|
-
{ name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },
|
|
431
|
-
// hsv
|
|
432
|
-
{ name: 'HSV String', color: 'hsv(300, 75%, 100%)' },
|
|
433
|
-
{ name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },
|
|
434
|
-
];
|
|
435
|
-
colorFormats.map((format) => {
|
|
436
|
-
it(`maintains \`color\` format as ${format.name}`, async () => {
|
|
437
|
-
const el = await fixture(html `
|
|
438
|
-
<sp-color-slider></sp-color-slider>
|
|
439
|
-
`);
|
|
440
|
-
el.color = format.color;
|
|
441
|
-
if (format.name.startsWith('Hex')) {
|
|
442
|
-
expect(el.color).to.equal(format.color);
|
|
443
|
-
}
|
|
444
|
-
else
|
|
445
|
-
expect(el.color).to.deep.equal(format.color);
|
|
446
|
-
});
|
|
447
|
-
});
|
|
448
|
-
it(`maintains \`color\` format as TinyColor`, async () => {
|
|
449
|
-
const el = await fixture(html `
|
|
450
|
-
<sp-color-slider></sp-color-slider>
|
|
451
|
-
`);
|
|
452
|
-
const color = new TinyColor('rgb(204, 51, 204)');
|
|
453
|
-
el.color = color;
|
|
454
|
-
expect(color.equals(el.color));
|
|
455
|
-
});
|
|
456
|
-
it(`resolves Hex3 format to Hex6 format`, async () => {
|
|
457
|
-
const el = await fixture(html `
|
|
458
|
-
<sp-color-slider></sp-color-slider>
|
|
459
|
-
`);
|
|
460
|
-
el.color = '0f0';
|
|
461
|
-
expect(el.color).to.equal('00ff00');
|
|
462
|
-
el.color = '#1e0';
|
|
463
|
-
expect(el.color).to.equal('#11ee00');
|
|
464
|
-
});
|
|
465
|
-
it(`resolves Hex4 format to Hex8 format`, async () => {
|
|
466
|
-
const el = await fixture(html `
|
|
467
|
-
<sp-color-slider></sp-color-slider>
|
|
468
|
-
`);
|
|
469
|
-
el.color = 'f3af';
|
|
470
|
-
expect(el.color).to.equal('ff33aaff');
|
|
471
|
-
el.color = '#f3af';
|
|
472
|
-
expect(el.color).to.equal('#ff33aaff');
|
|
473
|
-
});
|
|
474
|
-
it(`maintains hue value`, async () => {
|
|
475
|
-
const el = await fixture(html `
|
|
476
|
-
<sp-color-slider></sp-color-slider>
|
|
477
|
-
`);
|
|
478
|
-
const hue = 300;
|
|
479
|
-
const hsl = `hsl(${hue}, 60%, 100%)`;
|
|
480
|
-
el.color = hsl;
|
|
481
|
-
expect(el.value).to.equal(hue);
|
|
482
|
-
expect(el.color).to.equal(hsl);
|
|
483
|
-
const hsla = `hsla(${hue}, 60%, 100%, 0.9)`;
|
|
484
|
-
el.color = hsla;
|
|
485
|
-
expect(el.value).to.equal(hue);
|
|
486
|
-
expect(el.color).to.equal(hsla);
|
|
487
|
-
const hsv = `hsv(${hue}, 60%, 100%)`;
|
|
488
|
-
el.color = hsv;
|
|
489
|
-
expect(el.value).to.equal(hue);
|
|
490
|
-
expect(el.color).to.equal(hsv);
|
|
491
|
-
const hsva = `hsva(${hue}, 60%, 100%, 0.9)`;
|
|
492
|
-
el.color = hsva;
|
|
493
|
-
expect(el.value).to.equal(hue);
|
|
494
|
-
expect(el.color).to.equal(hsva);
|
|
495
|
-
const tinyHSV = new TinyColor({ h: hue, s: 60, v: 100 });
|
|
496
|
-
el.color = tinyHSV;
|
|
497
|
-
expect(el.value).to.equal(hue);
|
|
498
|
-
expect(tinyHSV.equals(el.color)).to.be.true;
|
|
499
|
-
const tinyHSVA = new TinyColor({ h: hue, s: 60, v: 100, a: 1 });
|
|
500
|
-
el.color = tinyHSVA;
|
|
501
|
-
expect(el.value).to.equal(hue);
|
|
502
|
-
expect(tinyHSVA.equals(el.color)).to.be.true;
|
|
503
|
-
const tinyHSL = new TinyColor({ h: hue, s: 60, l: 100 });
|
|
504
|
-
el.color = tinyHSL;
|
|
505
|
-
expect(el.value).to.equal(hue);
|
|
506
|
-
expect(tinyHSL.equals(el.color)).to.be.true;
|
|
507
|
-
const tinyHSLA = new TinyColor({ h: hue, s: 60, l: 100, a: 1 });
|
|
508
|
-
el.color = tinyHSLA;
|
|
509
|
-
expect(el.value).to.equal(hue);
|
|
510
|
-
expect(tinyHSLA.equals(el.color)).to.be.true;
|
|
511
|
-
});
|
|
512
|
-
});
|
|
513
|
-
//# sourceMappingURL=color-slider.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-slider.test.js","sourceRoot":"","sources":["color-slider.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowDownKeyupEvent,\n arrowLeftEvent,\n arrowLeftKeyupEvent,\n arrowRightEvent,\n arrowRightKeyupEvent,\n arrowUpEvent,\n arrowUpKeyupEvent,\n} from '../../../test/testing-helpers.js';\n\nimport '../sp-color-slider.js';\nimport { ColorSlider } from '../';\nimport { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\n\ndescribe('ColorSlider', () => {\n it('loads default color-slider accessibly', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('manages a single tab stop', async () => {\n const test = await fixture<HTMLDivElement>(\n html`\n <div>\n <input type=\"text\" id=\"test-input-1\" />\n <sp-color-slider></sp-color-slider>\n <input type=\"text\" id=\"test-input-2\" />\n </div>\n `\n );\n const el = test.querySelector('sp-color-slider') as ColorSlider;\n const input1 = test.querySelector(\n 'input:nth-of-type(1)'\n ) as HTMLInputElement;\n const input2 = test.querySelector(\n 'input:nth-of-type(2)'\n ) as HTMLInputElement;\n\n await elementUpdated(el);\n\n input1.focus();\n\n expect(document.activeElement).to.equal(input1);\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n let value = el.value;\n await sendKeys({\n press: 'ArrowRight',\n });\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input2);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n value = el.value;\n await sendKeys({\n press: 'ArrowDown',\n });\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(input1);\n });\n it('manages [focused]', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n el.dispatchEvent(new FocusEvent('focusin'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.true;\n\n el.dispatchEvent(new FocusEvent('focusout'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n });\n it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n el.focus();\n\n await sendKeys({ press: 'ArrowRight' });\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n await sendKeys({ press: 'ArrowLeft' });\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n await sendKeys({ press: 'ArrowUp' });\n expect(inputSpy.callCount).to.equal(3);\n expect(changeSpy.callCount).to.equal(3);\n\n await sendKeys({ press: 'ArrowDown' });\n expect(inputSpy.callCount).to.equal(4);\n expect(changeSpy.callCount).to.equal(4);\n });\n it('responds to events on the internal input element', async () => {\n // screen reader interactions dispatch events as found in the following test\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `\n );\n await elementUpdated(el);\n\n el.focus();\n el.focusElement.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n el.focusElement.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: false, // native change events do not compose themselves by default\n })\n );\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n });\n it('manages value on \"Arrow*\" keypresses', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(3.9999999999999996);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(1.9999999999999998);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses in dir=\"rtl\"', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider dir=\"rtl\"></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(2);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses with alteration', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n el.focus();\n expect(el.sliderHandlePosition).to.equal(0);\n\n await sendKeys({\n down: 'Shift',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(20);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await sendKeys({\n press: 'ArrowRight',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(40);\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await sendKeys({\n press: 'ArrowDown',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(20);\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n up: 'Shift',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n });\n it('accepts pointer events', async () => {\n const color = new TinyColor({ h: '0', s: '20%', l: '70%' });\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n .color=${color}\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(47.91666666666667);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(53.125);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n });\n it('accepts pointer events while [vertical]', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n vertical\n style=\"--spectrum-colorslider-vertical-default-length: 192px; --spectrum-colorslider-vertical-width: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 15,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(47.91666666666667);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(53.125);\n });\n it('accepts pointer events in dir=\"rtl\"', async () => {\n document.documentElement.dir = 'rtl';\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n dir=\"rtl\"\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-height: 24px;\"\n ></sp-color-slider>\n `\n );\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n const clientWidth = document.documentElement.offsetWidth;\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const gradient = el.shadowRoot.querySelector(\n '.gradient'\n ) as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 700,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(52.083333333333336);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(46.875);\n });\n const colorFormats: {\n name: string;\n color:\n | string\n | number\n | TinyColor\n | HSVA\n | HSV\n | RGB\n | RGBA\n | HSL\n | HSLA;\n }[] = [\n //rgb\n { name: 'RGB String', color: 'rgb(204, 51, 204)' },\n { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },\n //prgb\n { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },\n { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n // hex\n { name: 'Hex', color: 'cc33cc' },\n { name: 'Hex String', color: '#cc33cc' },\n // hex8\n { name: 'Hex8', color: 'cc33ccff' },\n { name: 'Hex8 String', color: '#cc33ccff' },\n // name\n { name: 'string', color: 'red' },\n // hsl\n { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n // hsv\n { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n ];\n colorFormats.map((format) => {\n it(`maintains \\`color\\` format as ${format.name}`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n el.color = format.color;\n if (format.name.startsWith('Hex')) {\n expect(el.color).to.equal(format.color);\n } else expect(el.color).to.deep.equal(format.color);\n });\n });\n it(`maintains \\`color\\` format as TinyColor`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n const color = new TinyColor('rgb(204, 51, 204)');\n el.color = color;\n expect(color.equals(el.color));\n });\n it(`resolves Hex3 format to Hex6 format`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n el.color = '0f0';\n expect(el.color).to.equal('00ff00');\n\n el.color = '#1e0';\n expect(el.color).to.equal('#11ee00');\n });\n it(`resolves Hex4 format to Hex8 format`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n el.color = 'f3af';\n expect(el.color).to.equal('ff33aaff');\n\n el.color = '#f3af';\n expect(el.color).to.equal('#ff33aaff');\n });\n it(`maintains hue value`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n const hue = 300;\n const hsl = `hsl(${hue}, 60%, 100%)`;\n el.color = hsl;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsl);\n\n const hsla = `hsla(${hue}, 60%, 100%, 0.9)`;\n el.color = hsla;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsla);\n\n const hsv = `hsv(${hue}, 60%, 100%)`;\n el.color = hsv;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsv);\n\n const hsva = `hsva(${hue}, 60%, 100%, 0.9)`;\n el.color = hsva;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsva);\n\n const tinyHSV = new TinyColor({ h: hue, s: 60, v: 100 });\n el.color = tinyHSV;\n expect(el.value).to.equal(hue);\n expect(tinyHSV.equals(el.color)).to.be.true;\n\n const tinyHSVA = new TinyColor({ h: hue, s: 60, v: 100, a: 1 });\n el.color = tinyHSVA;\n expect(el.value).to.equal(hue);\n expect(tinyHSVA.equals(el.color)).to.be.true;\n\n const tinyHSL = new TinyColor({ h: hue, s: 60, l: 100 });\n el.color = tinyHSL;\n expect(el.value).to.equal(hue);\n expect(tinyHSL.equals(el.color)).to.be.true;\n\n const tinyHSLA = new TinyColor({ h: hue, s: 60, l: 100, a: 1 });\n el.color = tinyHSLA;\n expect(el.value).to.equal(hue);\n expect(tinyHSLA.equals(el.color)).to.be.true;\n });\n});\n"]}
|