Support onInit hook

addon/components/color-picker.js

@@ -202,6 +202,13 @@ const ColorPicker = Component.extend({
    */
   adjustableNumbers: true,
 
+  /**
+   * Initialization done - Pickr can be used
+   * @argument onInit
+   * @type {Function}
+   */
+  onInit: undefined,
+
   /**
    * Pickr got closed
    * @argument onHide
@@ -303,8 +310,12 @@ const ColorPicker = Component.extend({
       components: this._components
     });
 
-    this._pickr.on('init', () => {
+    this._pickr.on('init', (...args) => {
       this.set('_value', this.formatColor(this._pickr.getColor()));
+
+      if (this.onInit) {
+        this.onInit(...args);
+      }
     }).on('save', (...args) => {
       let [hsva, instance] = args;
       let value = this.formatColor(hsva);

tests/dummy/app/controllers/docs/index.js

@@ -25,6 +25,10 @@ export default Controller.extend({
 
     handleOnChange(hsva) {
       this.set('value', hsva.toHEXA().toString());
+    },
+
+    onInit(pickrInstance) {
+      pickrInstance.setColor(null);
     }
   }
 });

tests/dummy/app/controllers/docs/null-example.js

@@ -0,0 +1,11 @@
+// BEGIN-SNIPPET null-example.js
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  actions: {
+    onInit(pickrInstance) {
+      pickrInstance.setColor(null);
+    }
+  }
+});
+// END-SNIPPET

tests/dummy/app/templates/docs/index.md

@@ -102,6 +102,26 @@ You can call **`toString`** on the resulting array to get the string representat
   {{demo.snippet 'controller-components.js' title='controller.js'}}
 {{/docs-demo}}
 
+If you would like to set the default color as null, you can make use of the **`onInit`** hook.
+
+{{#docs-demo class='docs-text-left' as |demo|}}
+  {{#demo.example name='null-example.hbs'}}
+    <p>The currently selected color is <strong>{{nullExample}}</strong>.</p>
+    <div class="docs-flex">
+      {{color-picker
+        value=nullExample
+        format="hex"
+        default="00f1f1"
+        onInit=(action "onInit")
+      }}
+    </div>
+  {{/demo.example}}
+
+  {{demo.snippet 'null-example.hbs' title='template.hbs'}}
+  {{demo.snippet 'null-example.js' title='controller.js'}}
+{{/docs-demo}}
+
+
 ## Themes
 
 pickr ships with three themes (`classic`, `monolith` and `nano`).
@@ -129,5 +149,3 @@ new EmberApp(defaults, {
 ### Nano
 
 {{color-picker theme="nano"}}
-
-

tests/dummy/app/templates/index.hbs

@@ -10,7 +10,6 @@
             <div class="docs-flex docs-justify-center">
               {{color-picker
                 value=value
-                default="#e04e39"
                 format="hexa"
                 class="docs-border"
               }}

tests/integration/components/color-picker-test.js

@@ -168,12 +168,39 @@ module('Integration | Component | color-picker', function(hooks) {
     assert.equal(this.get('color'), '#00ff00');
   });
 
+  test('it supports null values', async function(assert) {
+    this.set('onInit', function(pickrInstance) {
+      pickrInstance.setColor(null);
+    });
+
+    await render(hbs`
+      {{input value=color}}
+      {{color-picker 
+        value=color 
+        format="hexa"
+        onInit=onInit
+      }}
+    `);
+
+    await sleep(1000);
+
+    assert.equal(this.value, null);
+    assert.equal(this.color, null);
+
+    // background color in pickr for null
+    assert.equal(
+      getComputedStyle(this.element.querySelector('.pcr-button')).color,
+      'rgba(0, 0, 0, 0.15)'
+    );
+  });
+
   test('it proxies known pickr events', async function(assert) {
     // TODO: this should probably replaced by testdouble or sinon if used more often
     const calls = {};
     const spyCall = (type) => () => calls[type] = true;
 
     this.set('color', '#123');
+    this.set('onInit', spyCall('onInit'));
     this.set('onSave', spyCall('onSave'));
     this.set('onShow', spyCall('onShow'));
     this.set('onHide', spyCall('onHide'));
@@ -207,6 +234,7 @@ module('Integration | Component | color-picker', function(hooks) {
         components=components
         swatches=swatches
         format="hexa"
+        onInit=onInit
         onSave=onSave
         onClear=onClear
         onChange=onChange
@@ -233,6 +261,7 @@ module('Integration | Component | color-picker', function(hooks) {
     // trigger onCancel
     await click(inPickr('.pcr-clear[value="Cancel"]'));
 
+    assert.ok(calls.onInit, 'called onInit');
     assert.ok(calls.onSave, 'called onSave');
     assert.ok(calls.onShow, 'called onShow');
     assert.ok(calls.onHide, 'called onHide');