@operato/color-picker - npm Package Compare versions

Comparing version 9.0.0-beta.0 to 9.0.0-beta.4

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
+
+
+
 ## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
@@ -8,0 +17,0 @@

package.json

@@ -5,3 +5,4 @@ {
   "author": "heartyoh",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.4",
+  "type": "module",
   "main": "src/index.js",
@@ -43,3 +44,3 @@ "module": "src/index.js",
   },
-  "gitHead": "22a89f0f8bf5b197ae03f409776c2d2d08cf29aa"
+  "gitHead": "d1d762cc701221021637fda95f7399ca641afb6e"
 }

src/paper-color-input.js

@@ -1,7 +0,7 @@
-import { html } from '@polymer/polymer/polymer-element'
+import { html } from "@polymer/polymer/polymer-element";
 
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn'
-import '@polymer/iron-form-element-behavior/iron-form-element-behavior'
-import '@polymer/paper-input/paper-input-container'
-import './paper-color-picker'
+import { Polymer } from "@polymer/polymer/lib/legacy/polymer-fn";
+import "@polymer/iron-form-element-behavior/iron-form-element-behavior";
+import "@polymer/paper-input/paper-input-container";
+import "./paper-color-picker.js";
 /**
@@ -26,3 +26,3 @@ This component contains 3 elements:
 Polymer({
-  is: 'paper-color-input',
+  is: "paper-color-input",
   _template: html`
@@ -40,5 +40,19 @@ <style>
         position: relative;
-        background-image: linear-gradient(to right, #ffffff 1%, #ffffff 50%, #eee 50%, #eee 100%),
-          linear-gradient(to right, #eee 1%, #eee 50%, #ffffff 50%, #ffffff 100%);
-        background-size: 16px 8px, 16px 8px;
+        background-image: linear-gradient(
+            to right,
+            #ffffff 1%,
+            #ffffff 50%,
+            #eee 50%,
+            #eee 100%
+          ),
+          linear-gradient(
+            to right,
+            #eee 1%,
+            #eee 50%,
+            #ffffff 50%,
+            #ffffff 100%
+          );
+        background-size:
+          16px 8px,
+          16px 8px;
         background-repeat: repeat-x, repeat;
@@ -79,3 +93,6 @@ }
     </style>
-    <paper-input-container id="input" always-float-label="{{_isValueDefined(value.*)}}">
+    <paper-input-container
+      id="input"
+      always-float-label="{{_isValueDefined(value.*)}}"
+    >
       <label slot="label">{{label}}</label>
@@ -90,12 +107,11 @@ <div class="paper-input-input" slot="input">
           <span class="light"
-            >rgb
-            <template is="dom-if" if="{{allowAlpha}}"
-              >a</template
-            >(</span
+            >rgb <template is="dom-if" if="{{allowAlpha}}">a</template>(</span
           >
           <span class="dark">{{value.red}}</span> <span class="light">, </span>
-          <span class="dark">{{value.green}}</span> <span class="light">, </span>
+          <span class="dark">{{value.green}}</span>
+          <span class="light">, </span>
           <span class="dark">{{value.blue}}</span>
           <template is="dom-if" if="{{allowAlpha}}">
-            <span class="light">, </span> <span class="dark">{{value.alpha}}</span>
+            <span class="light">, </span>
+            <span class="dark">{{value.alpha}}</span>
           </template>
@@ -131,3 +147,3 @@ <span class="light">)</span>
       type: Object,
-      notify: true
+      notify: true,
     },
@@ -137,3 +153,3 @@ valueAsHex: {
       notify: true,
-      observer: '_setValueFromHex'
+      observer: "_setValueFromHex",
     },
@@ -149,3 +165,3 @@ /**
       type: String,
-      value: ''
+      value: "",
     },
@@ -169,4 +185,4 @@ /**
       type: String,
-      value: 'circle',
-      notify: true
+      value: "circle",
+      notify: true,
     },
@@ -182,4 +198,4 @@ /**
       type: String,
-      value: 'hsv',
-      notify: true
+      value: "hsv",
+      notify: true,
     },
@@ -197,3 +213,3 @@ /**
      */
-    alwaysShowAlpha: Boolean
+    alwaysShowAlpha: Boolean,
   },
@@ -204,74 +220,77 @@ behaviors: [
   ],
-  observers: ['_setValueAsHexFromValue(value.*)'],
+  observers: ["_setValueAsHexFromValue(value.*)"],
   listeners: {
-    'input.tap': 'openColorPicker'
+    "input.tap": "openColorPicker",
   },
   // Element Lifecycle
-  ready: function() {
+  ready: function () {
     if (this._isValueDefined()) {
-      this.$.picker.set('immediateColor', this.value)
-      var listenOnce
+      this.$.picker.set("immediateColor", this.value);
+      var listenOnce;
       this.$.picker.addEventListener(
-        'immediate-color-as-string-changed',
-        (listenOnce = function() {
+        "immediate-color-as-string-changed",
+        (listenOnce = function () {
           //this.colorName = this.$.picker.immediateColorAsString;
-          this.$.picker.setColor()
-          this.$.picker.removeEventListener('immediate-color-as-string-changed', listenOnce)
-        }.bind(this))
-      )
+          this.$.picker.setColor();
+          this.$.picker.removeEventListener(
+            "immediate-color-as-string-changed",
+            listenOnce,
+          );
+        }.bind(this)),
+      );
     }
   },
-  openColorPicker: function() {
-    this.$.picker.open()
+  openColorPicker: function () {
+    this.$.picker.open();
   },
-  _computeBackgroundColor: function() {
+  _computeBackgroundColor: function () {
     if (!this._isValueDefined()) {
-      return 'background: white'
+      return "background: white";
     }
-    if (typeof this.value.alpha === 'undefined') {
-      this.value.alpha = 1
+    if (typeof this.value.alpha === "undefined") {
+      this.value.alpha = 1;
     }
     return (
-      'background: rgba(' +
+      "background: rgba(" +
       this.value.red +
-      ', ' +
+      ", " +
       this.value.green +
-      ',' +
+      "," +
       this.value.blue +
-      ', ' +
+      ", " +
       this.value.alpha +
-      ')'
-    )
+      ")"
+    );
   },
-  _isValueDefined: function() {
-    return this.value.red >= 0 && this.value.green >= 0 && this.value.blue >= 0
+  _isValueDefined: function () {
+    return this.value.red >= 0 && this.value.green >= 0 && this.value.blue >= 0;
   },
-  _setValueAsHexFromValue: function() {
+  _setValueAsHexFromValue: function () {
     if (this._isValueDefined()) {
-      var hex = '#'
-      var value = this.value
-      ;['red', 'green', 'blue'].forEach(function(c) {
-        var h = value[c].toString(16)
-        l = h.length
-        hex += l < 2 ? '0' : ''
-        hex += l < 1 ? '0' : ''
-        hex += h
-      })
-      this.set('valueAsHex', hex)
+      var hex = "#";
+      var value = this.value;
+      ["red", "green", "blue"].forEach(function (c) {
+        var h = value[c].toString(16);
+        l = h.length;
+        hex += l < 2 ? "0" : "";
+        hex += l < 1 ? "0" : "";
+        hex += h;
+      });
+      this.set("valueAsHex", hex);
     }
   },
-  _setValueFromHex: function() {
-    var hex = this.valueAsHex
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
-    var hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-      return r + r + g + g + b + b
-    })
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-    if (typeof this.value === 'undefined') {
-      this.set('value', {})
+  _setValueFromHex: function () {
+    var hex = this.valueAsHex;
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+      return r + r + g + g + b + b;
+    });
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (typeof this.value === "undefined") {
+      this.set("value", {});
     }
-    this.set('value.red', parseInt(result[1], 16))
-    this.set('value.green', parseInt(result[2], 16))
-    this.set('value.blue', parseInt(result[3], 16))
-  }
-})
+    this.set("value.red", parseInt(result[1], 16));
+    this.set("value.green", parseInt(result[2], 16));
+    this.set("value.blue", parseInt(result[3], 16));
+  },
+});

src/paper-color-picker.js

@@ -1,15 +0,15 @@
-import { html } from '@polymer/polymer/polymer-element'
+import { html } from "@polymer/polymer/polymer-element";
 
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn'
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom'
+import { Polymer } from "@polymer/polymer/lib/legacy/polymer-fn";
+import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
 
-import '@polymer/iron-flex-layout/iron-flex-layout'
-import '@polymer/paper-slider/paper-slider'
-import '@polymer/paper-dialog/paper-dialog'
-import '@polymer/paper-button/paper-button'
-import '@polymer/paper-input/paper-input'
-import '@polymer/paper-input/paper-input-container'
-import '@polymer/neon-animation/animations/fade-out-animation'
-import '@polymer/neon-animation/animations/scale-up-animation'
-import './paper-color-circle.js'
+import "@polymer/iron-flex-layout/iron-flex-layout";
+import "@polymer/paper-slider/paper-slider";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-input-container";
+import "@polymer/neon-animation/animations/fade-out-animation";
+import "@polymer/neon-animation/animations/scale-up-animation";
+import "./paper-color-circle.js";
 
@@ -73,3 +73,3 @@ Polymer({
       #detail {
-        background-color:#fff;
+        background-color: #fff;
         min-width: 240px;
@@ -88,6 +88,11 @@ margin: 0px;
         background-image: linear-gradient(45deg, #eee 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%),
+          linear-gradient(45deg, transparent 75%, #eee 75%),
+          linear-gradient(45deg, #eee 25%, transparent 25%),
           linear-gradient(45deg, transparent 75%, #eee 75%);
         background-size: 24px 24px;
-        background-position: 0 0, 0px 0px, 12px 12px, 12px 12px;
+        background-position:
+          0 0,
+          0px 0px,
+          12px 12px,
+          12px 12px;
       }
@@ -240,4 +245,10 @@
 
-          <template is="dom-if" if="{{_and(allowAlpha,_initialAlphaValueHackApplied)}}">
-            <paper-input-container attr-for-value="immediate-value" hidden$="{{!_or(alwaysShowAlpha, advanced)}}">
+          <template
+            is="dom-if"
+            if="{{_and(allowAlpha,_initialAlphaValueHackApplied)}}"
+          >
+            <paper-input-container
+              attr-for-value="immediate-value"
+              hidden$="{{!_or(alwaysShowAlpha, advanced)}}"
+            >
               <label slot="label">Alpha (transparency)</label>
@@ -295,4 +306,8 @@ <paper-slider
           <paper-button dialog-dismiss>Cancel</paper-button>
-          <paper-button on-tap="toggleAdvancedMode" hidden$="{{advanced}}">Advanced</paper-button>
-          <paper-button dialog-confirm on-tap="setColor" autofocus>OK</paper-button>
+          <paper-button on-tap="toggleAdvancedMode" hidden$="{{advanced}}"
+            >Advanced</paper-button
+          >
+          <paper-button dialog-confirm on-tap="setColor" autofocus
+            >OK</paper-button
+          >
         </div>
@@ -302,3 +317,3 @@ </div>
   `,
-  is: 'paper-color-picker',
+  is: "paper-color-picker",
   properties: {
@@ -318,21 +333,21 @@ /**
         blue: undefined,
-        alpha: 1
+        alpha: 1,
       },
-      notify: true
+      notify: true,
     },
     colorHue: {
       type: Number,
-      value: 0
+      value: 0,
     },
     colorLightness: {
       type: Number,
-      value: 0.5
+      value: 0.5,
     },
     colorValue: {
       type: Number,
-      value: 1
+      value: 1,
     },
     disableUpdate: {
       type: Boolean,
-      value: false
+      value: false,
     },
@@ -361,5 +376,5 @@ /**
         blue: 136,
-        alpha: 1
+        alpha: 1,
       },
-      notify: true
+      notify: true,
     },
@@ -375,8 +390,8 @@ /**
       type: String,
-      value: 'circle',
-      notify: true
+      value: "circle",
+      notify: true,
     },
     sliderHue: {
       type: Number,
-      value: 50
+      value: 50,
     },
@@ -386,3 +401,3 @@ sliderLightness: {
       value: 50,
-      observer: 'sliderLightnessChanged'
+      observer: "sliderLightnessChanged",
     },
@@ -392,3 +407,3 @@ sliderValue: {
       value: 100,
-      observer: 'sliderValueChanged'
+      observer: "sliderValueChanged",
     },
@@ -404,12 +419,12 @@ /**
       type: String,
-      value: 'hsv',
-      notify: true
+      value: "hsv",
+      notify: true,
     },
     immediateColorAsString: {
       type: String,
-      notify: true
+      notify: true,
     },
     colorAsString: {
       type: String,
-      notify: true
+      notify: true,
     },
@@ -419,178 +434,186 @@ advanced: {
       reflectToAttribute: true,
-      observer: '_recenterDialog'
-    }
+      observer: "_recenterDialog",
+    },
   },
-  observers: ['immediateColorChanged(immediateColor.*)'],
-  ready: function() {
+  observers: ["immediateColorChanged(immediateColor.*)"],
+  ready: function () {
     if (!this.advanced) {
-      this.set('advanced', false)
+      this.set("advanced", false);
     }
     if (!this.alwaysShowAlpha) {
-      this.set('alwaysShowAlpha', false)
+      this.set("alwaysShowAlpha", false);
     }
-    this.async(function() {
+    this.async(function () {
       if (this._isColorDefined()) {
-        if (this.allowAlpha && typeof this.color.alpha !== 'undefined') {
-          this._initialAlphaValueHack = this.color.alpha
+        if (this.allowAlpha && typeof this.color.alpha !== "undefined") {
+          this._initialAlphaValueHack = this.color.alpha;
         } else {
-          this._initialAlphaValueHack = 1
+          this._initialAlphaValueHack = 1;
         }
       } else if (this._isImmediateColorDefined()) {
-        if (this.allowAlpha && typeof this.immediateColor.alpha !== 'undefined') {
-          this._initialAlphaValueHack = this.immediateColor.alpha
+        if (
+          this.allowAlpha &&
+          typeof this.immediateColor.alpha !== "undefined"
+        ) {
+          this._initialAlphaValueHack = this.immediateColor.alpha;
         } else {
-          this._initialAlphaValueHack = 1
+          this._initialAlphaValueHack = 1;
         }
       } else {
-        this._initialAlphaValueHack = 1
+        this._initialAlphaValueHack = 1;
       }
-      this._initialAlphaValueHackApplied = true
-    })
+      this._initialAlphaValueHackApplied = true;
+    });
     window.addEventListener(
-      'resize',
-      function() {
-        this.$.dialog.resetFit()
-      }.bind(this)
-    )
+      "resize",
+      function () {
+        this.$.dialog.resetFit();
+      }.bind(this),
+    );
   },
-  _and: function(a, b) {
-    return a && b
+  _and: function (a, b) {
+    return a && b;
   },
-  _or: function(a, b) {
-    return a || b
+  _or: function (a, b) {
+    return a || b;
   },
-  _isColorDefined: function() {
-    return this.color.red >= 0 && this.color.green >= 0 && this.color.blue >= 0
+  _isColorDefined: function () {
+    return this.color.red >= 0 && this.color.green >= 0 && this.color.blue >= 0;
   },
-  _isImmediateColorDefined: function() {
-    return this.immediateColor.red >= 0 && this.immediateColor.green >= 0 && this.immediateColor.blue >= 0
+  _isImmediateColorDefined: function () {
+    return (
+      this.immediateColor.red >= 0 &&
+      this.immediateColor.green >= 0 &&
+      this.immediateColor.blue >= 0
+    );
   },
-  setColorWheel: function() {
+  setColorWheel: function () {
     if (!this.disableUpdate) {
       if (this._showValueSlider()) {
-        this.set('colorValue', this.sliderValue / 100)
+        this.set("colorValue", this.sliderValue / 100);
       }
-      if (this._showLightnessSlider()) this.colorLightness = this.sliderLightness / 100
+      if (this._showLightnessSlider())
+        this.colorLightness = this.sliderLightness / 100;
       setTimeout(
-        function() {
-          this.disableUpdate = false
+        function () {
+          this.disableUpdate = false;
         }.bind(this),
-        50
-      )
+        50,
+      );
     }
-    this.disableUpdate = true
+    this.disableUpdate = true;
   },
-  sliderValueChanged: function() {
-    this.setColorWheel()
+  sliderValueChanged: function () {
+    this.setColorWheel();
   },
-  sliderLightnessChanged: function() {
-    this.setColorWheel()
+  sliderLightnessChanged: function () {
+    this.setColorWheel();
   },
-  _calculateLuminance: function(r, g, b) {
-    var a = [r, g, b].map(function(v) {
-      v /= 255
-      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
-    })
-    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+  _calculateLuminance: function (r, g, b) {
+    var a = [r, g, b].map(function (v) {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
   },
-  immediateColorChanged: function() {
-    if (typeof this.immediateColor.alpha == 'undefined') {
-      this.immediateColor.alpha = 1
+  immediateColorChanged: function () {
+    if (typeof this.immediateColor.alpha == "undefined") {
+      this.immediateColor.alpha = 1;
     }
     var colorAsString =
-      'rgba(' +
-      this.immediateColor['red'] +
-      ',' +
-      this.immediateColor['green'] +
-      ',' +
-      this.immediateColor['blue'] +
-      ',' +
-      this.immediateColor['alpha'] +
-      ')'
-    this.$.color.style.backgroundColor = colorAsString
-    this.immediateColorAsString = colorAsString
+      "rgba(" +
+      this.immediateColor["red"] +
+      "," +
+      this.immediateColor["green"] +
+      "," +
+      this.immediateColor["blue"] +
+      "," +
+      this.immediateColor["alpha"] +
+      ")";
+    this.$.color.style.backgroundColor = colorAsString;
+    this.immediateColorAsString = colorAsString;
   },
-  drawHuePicker: function() {
+  drawHuePicker: function () {
     this._huePickerCtx = dom(this.root)
-      .querySelector('#huePicker')
-      .getContext('2d')
-    var bitmap = this._huePickerCtx.getImageData(0, 0, 360, 30)
+      .querySelector("#huePicker")
+      .getContext("2d");
+    var bitmap = this._huePickerCtx.getImageData(0, 0, 360, 30);
     for (var x = 0; x < 360; x++) {
-      var hue = x
-      var color = this.$.picker.hsv2rgb(hue, 1, 1)
-      bitmap.data[4 * x + 0] = color[0]
-      bitmap.data[4 * x + 1] = color[1]
-      bitmap.data[4 * x + 2] = color[2]
-      bitmap.data[4 * x + 3] = 255
+      var hue = x;
+      var color = this.$.picker.hsv2rgb(hue, 1, 1);
+      bitmap.data[4 * x + 0] = color[0];
+      bitmap.data[4 * x + 1] = color[1];
+      bitmap.data[4 * x + 2] = color[2];
+      bitmap.data[4 * x + 3] = 255;
     }
-    this._huePickerCtx.putImageData(bitmap, 0, 0)
+    this._huePickerCtx.putImageData(bitmap, 0, 0);
   },
-  huePickerPickColor: function(e) {
+  huePickerPickColor: function (e) {
     var rect = dom(this.root)
-      .querySelector('#huePicker')
-      .getBoundingClientRect()
-    var percentage = (e.detail.x - rect.left) / rect.width
-    if (percentage > 0 && percentage < 1) this.colorHue = percentage
+      .querySelector("#huePicker")
+      .getBoundingClientRect();
+    var percentage = (e.detail.x - rect.left) / rect.width;
+    if (percentage > 0 && percentage < 1) this.colorHue = percentage;
   },
-  changeColorMixture: function() {
-    var red = this.$.redField.value
-    var green = this.$.greenField.value
-    var blue = this.$.blueField.value
+  changeColorMixture: function () {
+    var red = this.$.redField.value;
+    var green = this.$.greenField.value;
+    var blue = this.$.blueField.value;
     var colors = {
       red: red,
       green: green,
-      blue: blue
-    }
-    this.set('immediateColor', colors)
+      blue: blue,
+    };
+    this.set("immediateColor", colors);
   },
-  setColor: function() {
-    this.set('color.red', this.immediateColor.red)
-    this.set('color.green', this.immediateColor.green)
-    this.set('color.blue', this.immediateColor.blue)
-    this.set('color.alpha', this.immediateColor.alpha)
-    this.set('colorAsString', this.immediateColorAsString)
+  setColor: function () {
+    this.set("color.red", this.immediateColor.red);
+    this.set("color.green", this.immediateColor.green);
+    this.set("color.blue", this.immediateColor.blue);
+    this.set("color.alpha", this.immediateColor.alpha);
+    this.set("colorAsString", this.immediateColorAsString);
   },
-  open: function() {
-    if (this.color && this.color['green']) this.immediateColor = this.color
-    this.immediateColorChanged()
-    this.$.dialog.open()
-    if (this._showHuePicker()) this.drawHuePicker()
+  open: function () {
+    if (this.color && this.color["green"]) this.immediateColor = this.color;
+    this.immediateColorChanged();
+    this.$.dialog.open();
+    if (this._showHuePicker()) this.drawHuePicker();
   },
-  _computeColouredaaborder: function() {
+  _computeColouredaaborder: function () {
     return {
       red: 50,
       green: 50,
-      blue: 50
-    }
+      blue: 50,
+    };
   },
-  _showValueSlider: function() {
-    return this.type == 'hsv' && this.shape !== 'huebox'
+  _showValueSlider: function () {
+    return this.type == "hsv" && this.shape !== "huebox";
   },
-  _showLightnessSlider: function() {
-    return this.type == 'hsl' && this.shape !== 'huebox'
+  _showLightnessSlider: function () {
+    return this.type == "hsl" && this.shape !== "huebox";
   },
-  _showHuePicker: function() {
-    return this.shape == 'huebox'
+  _showHuePicker: function () {
+    return this.shape == "huebox";
   },
-  toggleAdvancedMode: function() {
-    this.advanced = !this.advanced
+  toggleAdvancedMode: function () {
+    this.advanced = !this.advanced;
   },
-  _recenterDialog: function() {
-    if (this.$.dialog.opened) this.$.dialog.center()
+  _recenterDialog: function () {
+    if (this.$.dialog.opened) this.$.dialog.center();
   },
-  _setSliders: function() {
-    this.async(function() {
-      var valueSlider = dom(this.root).querySelector('#valueSlider')
+  _setSliders: function () {
+    this.async(function () {
+      var valueSlider = dom(this.root).querySelector("#valueSlider");
       if (valueSlider) {
-        valueSlider.set('value', this.colorValue * 100)
+        valueSlider.set("value", this.colorValue * 100);
       }
-      var lightnessSlider = dom(this.root).querySelector('#lightnessSlider')
+      var lightnessSlider = dom(this.root).querySelector("#lightnessSlider");
       if (lightnessSlider) {
-        lightnessSlider.set('value', this.colorLightness * 100)
+        lightnessSlider.set("value", this.colorLightness * 100);
       }
-    })
+    });
   },
-  _onAlphaChanged: function(e) {
-    e.stopPropagation()
-  }
-})
+  _onAlphaChanged: function (e) {
+    e.stopPropagation();
+  },
+});

No alert changes

Improved metrics

Total package byte prevSize

67728

increased by1.32%

Lines of code

1316

increased by3.3%

Is type module

Yes

No dependency changes