@xenknight/framework7 0.0.2

package/components/color-picker/modules/rgb-bars.js

@@ -0,0 +1,183 @@
+import $ from '../../../shared/dom7.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      barLabel,
+      barValue,
+      barValueEditable,
+      redLabelText,
+      greenLabelText,
+      blueLabelText
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-rgb-bars"
+    }, $jsx("div", {
+      class: "color-picker-bar-wrap"
+    }, barLabel && $jsx("div", {
+      class: "color-picker-bar-label"
+    }, redLabelText), $jsx("div", {
+      class: "range-slider color-picker-bar color-picker-bar-red"
+    }), barValue && $jsx("div", {
+      class: "color-picker-bar-value"
+    }, barValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-bar-red",
+      "data-color-index": "0"
+    }) : $jsx("span", {
+      class: "color-picker-value-bar-red"
+    }))), $jsx("div", {
+      class: "color-picker-bar-wrap"
+    }, barLabel && $jsx("div", {
+      class: "color-picker-bar-label"
+    }, greenLabelText), $jsx("div", {
+      class: "range-slider color-picker-bar color-picker-bar-green"
+    }), barValue && $jsx("div", {
+      class: "color-picker-bar-value"
+    }, barValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-bar-green",
+      "data-color-index": "1"
+    }) : $jsx("span", {
+      class: "color-picker-value-bar-green"
+    }))), $jsx("div", {
+      class: "color-picker-bar-wrap"
+    }, barLabel && $jsx("div", {
+      class: "color-picker-bar-label"
+    }, blueLabelText), $jsx("div", {
+      class: "range-slider color-picker-bar color-picker-bar-blue"
+    }), barValue && $jsx("div", {
+      class: "color-picker-bar-value"
+    }, barValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-bar-blue",
+      "data-color-index": "2"
+    }) : $jsx("span", {
+      class: "color-picker-value-bar-blue"
+    }))));
+  },
+  init(self) {
+    self.redBar = self.app.range.create({
+      el: self.$el.find('.color-picker-bar-red'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      vertical: true,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [value, self.value.rgb[1], self.value.rgb[2]]
+          });
+        }
+      }
+    });
+    self.greenBar = self.app.range.create({
+      el: self.$el.find('.color-picker-bar-green'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      vertical: true,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [self.value.rgb[0], value, self.value.rgb[2]]
+          });
+        }
+      }
+    });
+    self.blueBar = self.app.range.create({
+      el: self.$el.find('.color-picker-bar-blue'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      vertical: true,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [self.value.rgb[0], self.value.rgb[1], value]
+          });
+        }
+      }
+    });
+    function handleInputChange(e) {
+      const rgb = [...self.value.rgb];
+      const index = parseInt($(e.target).attr('data-color-index'), 10);
+      let value = parseInt(e.target.value, 10);
+      if (Number.isNaN(value)) {
+        e.target.value = rgb[index];
+        return;
+      }
+      value = Math.max(0, Math.min(255, value));
+      rgb[index] = value;
+      self.setValue({
+        rgb
+      });
+    }
+    self.$el.on('change', '.color-picker-module-rgb-bars input', handleInputChange);
+    self.destroyRgbBarsEvents = function destroyRgbBarsEvents() {
+      self.$el.off('change', '.color-picker-module-rgb-bars input', handleInputChange);
+    };
+  },
+  update(self) {
+    const {
+      value,
+      redBar,
+      greenBar,
+      blueBar
+    } = self;
+    const {
+      barValue,
+      barValueEditable
+    } = self.params;
+    const {
+      rgb
+    } = value;
+    redBar.value = rgb[0];
+    greenBar.value = rgb[1];
+    blueBar.value = rgb[2];
+    redBar.layout();
+    greenBar.layout();
+    blueBar.layout();
+    redBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(0, ${rgb[1]}, ${rgb[2]}), rgb(255, ${rgb[1]}, ${rgb[2]}))`);
+    greenBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(${rgb[0]}, 0, ${rgb[2]}), rgb(${rgb[0]}, 255, ${rgb[2]}))`);
+    blueBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(${rgb[0]}, ${rgb[1]}, 0), rgb(${rgb[0]}, ${rgb[1]}, 255))`);
+    if (barValue && barValueEditable) {
+      self.$el.find('input.color-picker-value-bar-red').val(rgb[0]);
+      self.$el.find('input.color-picker-value-bar-green').val(rgb[1]);
+      self.$el.find('input.color-picker-value-bar-blue').val(rgb[2]);
+    } else if (barValue) {
+      self.$el.find('span.color-picker-value-bar-red').text(rgb[0]);
+      self.$el.find('span.color-picker-value-bar-green').text(rgb[1]);
+      self.$el.find('span.color-picker-value-bar-blue').text(rgb[2]);
+    }
+  },
+  destroy(self) {
+    if (self.redBar && self.redBar.destroy) {
+      self.redBar.destroy();
+    }
+    if (self.greenBar && self.greenBar.destroy) {
+      self.greenBar.destroy();
+    }
+    if (self.blueBar && self.blueBar.destroy) {
+      self.blueBar.destroy();
+    }
+    delete self.redBar;
+    delete self.greenBar;
+    delete self.blueBar;
+    if (self.destroyRgbBarsEvents) self.destroyRgbBarsEvents();
+    delete self.destroyRgbBarsEvents;
+  }
+};

package/components/color-picker/modules/rgb-sliders.js

@@ -0,0 +1,185 @@
+import $ from '../../../shared/dom7.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      redLabelText,
+      greenLabelText,
+      blueLabelText
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-rgb-sliders"
+    }, $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, redLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-red"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-red",
+      "data-color-index": "0"
+    }) : $jsx("span", {
+      class: "color-picker-value-red"
+    }))), $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, greenLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-green"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-green",
+      "data-color-index": "1"
+    }) : $jsx("span", {
+      class: "color-picker-value-green"
+    }))), $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, blueLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-blue"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "1",
+      min: "0",
+      max: "255",
+      class: "color-picker-value-blue",
+      "data-color-index": "2"
+    }) : $jsx("span", {
+      class: "color-picker-value-blue"
+    }))));
+  },
+  init(self) {
+    self.redRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-red'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [value, self.value.rgb[1], self.value.rgb[2]]
+          });
+        }
+      }
+    });
+    self.greenRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-green'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [self.value.rgb[0], value, self.value.rgb[2]]
+          });
+        }
+      }
+    });
+    self.blueRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-blue'),
+      min: 0,
+      max: 255,
+      step: 1,
+      value: 0,
+      on: {
+        change(range, value) {
+          self.setValue({
+            rgb: [self.value.rgb[0], self.value.rgb[1], value]
+          });
+        }
+      }
+    });
+    function handleInputChange(e) {
+      const rgb = [...self.value.rgb];
+      const index = parseInt($(e.target).attr('data-color-index'), 10);
+      let value = parseInt(e.target.value, 10);
+      if (Number.isNaN(value)) {
+        e.target.value = rgb[index];
+        return;
+      }
+      value = Math.max(0, Math.min(255, value));
+      rgb[index] = value;
+      self.setValue({
+        rgb
+      });
+    }
+    self.$el.on('change', '.color-picker-module-rgb-sliders input', handleInputChange);
+    self.destroyRgbSlidersEvents = function destroyRgbSlidersEvents() {
+      self.$el.off('change', '.color-picker-module-rgb-sliders input', handleInputChange);
+    };
+  },
+  update(self) {
+    const {
+      app,
+      value,
+      redRangeSlider,
+      greenRangeSlider,
+      blueRangeSlider
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      rgb
+    } = value;
+    redRangeSlider.value = rgb[0];
+    greenRangeSlider.value = rgb[1];
+    blueRangeSlider.value = rgb[2];
+    redRangeSlider.layout();
+    greenRangeSlider.layout();
+    blueRangeSlider.layout();
+    redRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    greenRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    blueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    const direction = app.rtl ? 'to left' : 'to right';
+    redRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(0, ${rgb[1]}, ${rgb[2]}), rgb(255, ${rgb[1]}, ${rgb[2]}))`);
+    greenRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(${rgb[0]}, 0, ${rgb[2]}), rgb(${rgb[0]}, 255, ${rgb[2]}))`);
+    blueRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(${rgb[0]}, ${rgb[1]}, 0), rgb(${rgb[0]}, ${rgb[1]}, 255))`);
+    if (sliderValue && sliderValueEditable) {
+      self.$el.find('input.color-picker-value-red').val(rgb[0]);
+      self.$el.find('input.color-picker-value-green').val(rgb[1]);
+      self.$el.find('input.color-picker-value-blue').val(rgb[2]);
+    } else if (sliderValue) {
+      self.$el.find('span.color-picker-value-red').text(rgb[0]);
+      self.$el.find('span.color-picker-value-green').text(rgb[1]);
+      self.$el.find('span.color-picker-value-blue').text(rgb[2]);
+    }
+  },
+  destroy(self) {
+    if (self.redRangeSlider && self.redRangeSlider.destroy) {
+      self.redRangeSlider.destroy();
+    }
+    if (self.greenRangeSlider && self.greenRangeSlider.destroy) {
+      self.greenRangeSlider.destroy();
+    }
+    if (self.blueRangeSlider && self.blueRangeSlider.destroy) {
+      self.blueRangeSlider.destroy();
+    }
+    delete self.redRangeSlider;
+    delete self.greenRangeSlider;
+    delete self.blueRangeSlider;
+    if (self.destroyRgbSlidersEvents) self.destroyRgbSlidersEvents();
+    delete self.destroyRgbSlidersEvents;
+  }
+};

package/components/color-picker/modules/sb-spectrum.js

@@ -0,0 +1,119 @@
+import $ from '../../../shared/dom7.js';
+import { getSupport } from '../../../shared/get-support.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render() {
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-sb-spectrum"
+    }, $jsx("div", {
+      class: "color-picker-sb-spectrum",
+      style: "background-color: hsl(0, 100%, 50%)"
+    }, $jsx("div", {
+      class: "color-picker-sb-spectrum-handle"
+    })));
+  },
+  init(self) {
+    const {
+      app
+    } = self;
+    let isTouched;
+    let isMoved;
+    let touchStartX;
+    let touchStartY;
+    let touchCurrentX;
+    let touchCurrentY;
+    let specterRect;
+    let specterIsTouched;
+    let specterHandleIsTouched;
+    const {
+      $el
+    } = self;
+    function setSBFromSpecterCoords(x, y) {
+      let s = (x - specterRect.left) / specterRect.width;
+      let b = (y - specterRect.top) / specterRect.height;
+      s = Math.max(0, Math.min(1, s));
+      b = 1 - Math.max(0, Math.min(1, b));
+      self.setValue({
+        hsb: [self.value.hue, s, b]
+      });
+    }
+    function handleTouchStart(e) {
+      if (isMoved || isTouched) return;
+      touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchCurrentX = touchStartX;
+      touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      touchCurrentY = touchStartY;
+      const $targetEl = $(e.target);
+      specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
+      if (!specterHandleIsTouched) {
+        specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
+      }
+      if (specterIsTouched) {
+        specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+        setSBFromSpecterCoords(touchStartX, touchStartY);
+      }
+      if (specterHandleIsTouched || specterIsTouched) {
+        $el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
+      }
+    }
+    function handleTouchMove(e) {
+      if (!(specterIsTouched || specterHandleIsTouched)) return;
+      touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      e.preventDefault();
+      if (!isMoved) {
+        // First move
+        isMoved = true;
+        if (specterHandleIsTouched) {
+          specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+        }
+      }
+      if (specterIsTouched || specterHandleIsTouched) {
+        setSBFromSpecterCoords(touchCurrentX, touchCurrentY);
+      }
+    }
+    function handleTouchEnd() {
+      isMoved = false;
+      if (specterIsTouched || specterHandleIsTouched) {
+        $el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
+      }
+      specterIsTouched = false;
+      specterHandleIsTouched = false;
+    }
+    function handleResize() {
+      self.modules['sb-spectrum'].update(self);
+    }
+    const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
+      passive: true,
+      capture: false
+    } : false;
+    self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
+    app.on('touchmove:active', handleTouchMove);
+    app.on('touchend:passive', handleTouchEnd);
+    app.on('resize', handleResize);
+    self.destroySpectrumEvents = function destroySpectrumEvents() {
+      self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener);
+      app.off('touchmove:active', handleTouchMove);
+      app.off('touchend:passive', handleTouchEnd);
+      app.off('resize', handleResize);
+    };
+  },
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hsl,
+      hsb
+    } = value;
+    const specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
+    const specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
+    self.$el.find('.color-picker-sb-spectrum').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`);
+    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', `hsl(${hsl[0]}, ${hsl[1] * 100}%, ${hsl[2] * 100}%)`).transform(`translate(${specterWidth * hsb[1]}px, ${specterHeight * (1 - hsb[2])}px)`);
+  },
+  destroy(self) {
+    if (self.destroySpectrumEvents) self.destroySpectrumEvents();
+    delete self.destroySpectrumEvents;
+  }
+};

package/components/color-picker/modules/wheel.js

@@ -0,0 +1,173 @@
+import $ from '../../../shared/dom7.js';
+import { getSupport } from '../../../shared/get-support.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+function svgWheelCircles() {
+  const total = 256;
+  let circles = '';
+  for (let i = total; i > 0; i -= 1) {
+    const angle = i * Math.PI / (total / 2);
+    const hue = 360 / total * i;
+    circles += `<circle cx="${150 - Math.sin(angle) * 125}" cy="${150 - Math.cos(angle) * 125}" r="25" fill="hsl(${hue}, 100%, 50%)"></circle>`;
+  }
+  return circles;
+}
+export default {
+  render() {
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-wheel"
+    }, $jsx("div", {
+      class: "color-picker-wheel"
+    }, $jsx("svg", {
+      viewBox: "0 0 300 300",
+      width: "300",
+      height: "300"
+    }, svgWheelCircles()), $jsx("div", {
+      class: "color-picker-wheel-handle"
+    }), $jsx("div", {
+      class: "color-picker-sb-spectrum",
+      style: "background-color: hsl(0, 100%, 50%)"
+    }, $jsx("div", {
+      class: "color-picker-sb-spectrum-handle"
+    }))));
+  },
+  init(self) {
+    const {
+      app
+    } = self;
+    let isTouched;
+    let isMoved;
+    let touchStartX;
+    let touchStartY;
+    let touchCurrentX;
+    let touchCurrentY;
+    let wheelRect;
+    let wheelIsTouched;
+    let wheelHandleIsTouched;
+    let specterRect;
+    let specterIsTouched;
+    let specterHandleIsTouched;
+    const {
+      $el
+    } = self;
+    function setHueFromWheelCoords(x, y) {
+      const wheelCenterX = wheelRect.left + wheelRect.width / 2;
+      const wheelCenterY = wheelRect.top + wheelRect.height / 2;
+      const angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
+      let angleDeg = angleRad * 180 / Math.PI + 90;
+      if (angleDeg < 0) angleDeg += 360;
+      angleDeg = 360 - angleDeg;
+      self.setValue({
+        hue: angleDeg
+      });
+    }
+    function setSBFromSpecterCoords(x, y) {
+      let s = (x - specterRect.left) / specterRect.width;
+      let b = (y - specterRect.top) / specterRect.height;
+      s = Math.max(0, Math.min(1, s));
+      b = 1 - Math.max(0, Math.min(1, b));
+      self.setValue({
+        hsb: [self.value.hue, s, b]
+      });
+    }
+    function handleTouchStart(e) {
+      if (isMoved || isTouched) return;
+      touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchCurrentX = touchStartX;
+      touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      touchCurrentY = touchStartY;
+      const $targetEl = $(e.target);
+      wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0;
+      wheelIsTouched = $targetEl.closest('circle').length > 0;
+      specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
+      if (!specterHandleIsTouched) {
+        specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
+      }
+      if (wheelIsTouched) {
+        wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect();
+        setHueFromWheelCoords(touchStartX, touchStartY);
+      }
+      if (specterIsTouched) {
+        specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+        setSBFromSpecterCoords(touchStartX, touchStartY);
+      }
+      if (specterHandleIsTouched || specterIsTouched) {
+        $el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
+      }
+    }
+    function handleTouchMove(e) {
+      if (!(wheelIsTouched || wheelHandleIsTouched) && !(specterIsTouched || specterHandleIsTouched)) return;
+      touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      e.preventDefault();
+      if (!isMoved) {
+        // First move
+        isMoved = true;
+        if (wheelHandleIsTouched) {
+          wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect();
+        }
+        if (specterHandleIsTouched) {
+          specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+        }
+      }
+      if (wheelIsTouched || wheelHandleIsTouched) {
+        setHueFromWheelCoords(touchCurrentX, touchCurrentY);
+      }
+      if (specterIsTouched || specterHandleIsTouched) {
+        setSBFromSpecterCoords(touchCurrentX, touchCurrentY);
+      }
+    }
+    function handleTouchEnd() {
+      isMoved = false;
+      if (specterIsTouched || specterHandleIsTouched) {
+        $el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
+      }
+      wheelIsTouched = false;
+      wheelHandleIsTouched = false;
+      specterIsTouched = false;
+      specterHandleIsTouched = false;
+    }
+    function handleResize() {
+      self.modules.wheel.update(self);
+    }
+    const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
+      passive: true,
+      capture: false
+    } : false;
+    self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
+    app.on('touchmove:active', handleTouchMove);
+    app.on('touchend:passive', handleTouchEnd);
+    app.on('resize', handleResize);
+    self.destroyWheelEvents = function destroyWheelEvents() {
+      self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener);
+      app.off('touchmove:active', handleTouchMove);
+      app.off('touchend:passive', handleTouchEnd);
+      app.off('resize', handleResize);
+    };
+  },
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hsl,
+      hsb
+    } = value;
+    const specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
+    const specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
+    const wheelSize = self.$el.find('.color-picker-wheel')[0].offsetWidth;
+    const wheelHalfSize = wheelSize / 2;
+    const angleRad = value.hue * Math.PI / 180;
+    const handleSize = wheelSize / 6;
+    const handleHalfSize = handleSize / 2;
+    const tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
+    const tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
+    self.$el.find('.color-picker-wheel-handle').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`).transform(`translate(${tX}px, ${tY}px)`);
+    self.$el.find('.color-picker-sb-spectrum').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`);
+    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', `hsl(${hsl[0]}, ${hsl[1] * 100}%, ${hsl[2] * 100}%)`).transform(`translate(${specterWidth * hsb[1]}px, ${specterHeight * (1 - hsb[2])}px)`);
+  },
+  destroy(self) {
+    if (self.destroyWheelEvents) self.destroyWheelEvents();
+    delete self.destroyWheelEvents;
+  }
+};

package/components/contacts-list/contacts-list-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/contacts-list/contacts-list-md.less

@@ -0,0 +1,21 @@
+.md {
+  .contacts-list {
+    .list-group-title {
+      pointer-events: none;
+      overflow: visible;
+      width: 40px;
+      + li {
+        margin-top: calc(var(--f7-contacts-list-title-height) * -1);
+      }
+      .hairline-remove(top);
+    }
+    li:not(.list-group-title) {
+      .ltr({
+        padding-left: 40px;
+      });
+      .rtl({
+        padding-right: 40px;
+      });
+    }
+  }
+}

package/components/contacts-list/contacts-list-rtl.css

@@ -0,0 +1 @@
+.ios{--f7-contacts-list-title-font-size:inherit;--f7-contacts-list-title-font-weight:600;--f7-contacts-list-title-height:22px;--f7-contacts-list-title-text-color:#000;--f7-contacts-list-title-bg-color:#f7f7f7}.ios .dark,.ios.dark{--f7-contacts-list-title-text-color:#fff;--f7-contacts-list-title-bg-color:#323234}.md{--f7-contacts-list-title-font-size:20px;--f7-contacts-list-title-font-weight:500;--f7-contacts-list-title-height:48px;--f7-contacts-list-title-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-contacts-list-title-text-color:var(--f7-theme-color)}.contacts-list{--f7-list-margin-vertical:0px}.contacts-list .list-group-title,.contacts-list li.list-group-title{background-color:var(--f7-contacts-list-title-bg-color,var(--f7-list-group-title-bg-color));font-weight:var(--f7-contacts-list-title-font-weight,var(--f7-list-group-title-font-weight));font-size:var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));color:var(--f7-contacts-list-title-text-color,var(--f7-theme-color));line-height:var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));height:var(--f7-contacts-list-title-height,var(--f7-list-group-title-height))}.contacts-list .list-group:first-child ul:before{display:none!important}.contacts-list .list-group:last-child ul:after{display:none!important}.md .contacts-list .list-group-title{pointer-events:none;overflow:visible;width:40px}.md .contacts-list .list-group-title+li{margin-top:calc(var(--f7-contacts-list-title-height) * -1)}.md .contacts-list .list-group-title:before{display:none!important}.md .contacts-list li:not(.list-group-title){padding-right:40px}