feat: use different pointers parts

web-padawan · Sep 1, 2020 · 2aa7954 · 2aa7954
1 parent ab2884d
commit 2aa7954
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 8 deletions.
diff --git a/src/color-picker-hex.ts b/src/color-picker-hex.ts
@@ -22,7 +22,8 @@ const colorModel: ColorModel<string> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerHex extends ColorPicker<string> {
   protected get colorModel(): ColorModel<string> {

diff --git a/src/color-picker-hsl-string.ts b/src/color-picker-hsl-string.ts
@@ -22,7 +22,8 @@ const colorModel: ColorModel<string> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerHslString extends ColorPicker<string> {
   protected get colorModel(): ColorModel<string> {

diff --git a/src/color-picker-hsl.ts b/src/color-picker-hsl.ts
@@ -24,7 +24,8 @@ const colorModel: ColorModel<HSL> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerHsl extends ColorPicker<HSL> {
   protected get colorModel(): ColorModel<HSL> {

diff --git a/src/color-picker-hsv.ts b/src/color-picker-hsv.ts
@@ -23,7 +23,8 @@ const colorModel: ColorModel<HSV> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerHsv extends ColorPicker<HSV> {
   protected get colorModel(): ColorModel<HSV> {

diff --git a/src/color-picker-rgb-string.ts b/src/color-picker-rgb-string.ts
@@ -22,7 +22,8 @@ const colorModel: ColorModel<string> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerRgbString extends ColorPicker<string> {
   protected get colorModel(): ColorModel<string> {

diff --git a/src/color-picker-rgb.ts b/src/color-picker-rgb.ts
@@ -24,7 +24,8 @@ const colorModel: ColorModel<RGB> = {
  *
  * @csspart hue - A hue selector container.
  * @csspart saturation - A saturation selector container
- * @csspart pointer - A draggable pointer element.
+ * @csspart hue-pointer - A hue pointer element.
+ * @csspart saturation-pointer - A saturation pointer element.
  */
 export class ColorPickerRgb extends ColorPicker<RGB> {
   protected get colorModel(): ColorModel<RGB> {

diff --git a/src/lib/components/color-picker.ts b/src/lib/components/color-picker.ts
@@ -9,8 +9,8 @@ import styles from '../styles/color-picker.js';
 
 const tpl = createTemplate(`
 <style>${styles}</style>
-<color-saturation part="saturation" exportparts="pointer"></color-saturation>
-<color-hue part="hue" exportparts="pointer"></color-hue>
+<color-saturation part="saturation" exportparts="pointer: saturation-pointer"></color-saturation>
+<color-hue part="hue" exportparts="pointer: hue-pointer"></color-hue>
 `);
 
 const $color = Symbol('color');