Update predominant color

src/cloudinary-image.component.spec.ts

@@ -770,10 +770,39 @@ describe('CloudinaryImage', () => {
       expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_30/e_pixelate,f_auto,q_1/bear'));
     }));
   });
-  describe('placeholder type solid', () => {
+  describe('placeholder type predominant-color with exact dimensions', () => {
+    @Component({
+      template: `<cl-image public-id="bear" width="300" height="300" crop="fit">
+        <cl-placeholder type="predominant-color"></cl-placeholder>
+      </cl-image>`
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement[];  // the elements w/ the directive
+    let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+      { cloud_name: '@@fake_angular2_sdk@@', client_hints: true } as CloudinaryConfiguration);
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, CloudinaryPlaceHolder],
+        providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+      des = fixture.debugElement.queryAll(By.directive(CloudinaryPlaceHolder));
+    });
+    it('creates an img element with placeholder size 1 pxl', fakeAsync(() => {
+      tick();
+      fixture.detectChanges();
+      const img = des[0].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,h_30,w_30/ar_1,b_auto,' +
+        'c_pad,w_iw_div_2/c_crop,g_north_east,h_1,w_1/f_auto,q_auto/bear'));
+    }));
+  });
+  describe('placeholder type predominant-color', () => {
     @Component({
       template: `<cl-image public-id="bear" width="300" crop="fit">
-          <cl-placeholder type="solid"></cl-placeholder>
+          <cl-placeholder type="predominant-color"></cl-placeholder>
       </cl-image>`
     })
     class TestComponent {}

src/cloudinary-image.component.ts

@@ -22,7 +22,7 @@ import { isBrowser } from './cloudinary.service';
   selector: 'cl-image',
   template: `<img [ngStyle]="{opacity: shouldShowPlaceHolder ? '0' : '1', position: shouldShowPlaceHolder ? 'absolute' : 'unset'}"(load)="hasLoaded()">
   <div [style.display]="shouldShowPlaceHolder ? 'inline' : 'none'">
-      <ng-content></ng-content>
+    <ng-content></ng-content>
   </div>
   `,
 })
@@ -109,6 +109,7 @@ export class CloudinaryImage
       image.onerror = e => {
         this.onError.emit(e);
       }
+
       const options = this.cloudinary.toCloudinaryAttributes(
         nativeElement.attributes,
         this.transformations
@@ -141,8 +142,9 @@ export class CloudinaryImage
     const placeholderOptions = {};
 
     Object.keys(options).forEach(name => {
-      placeholderOptions[name] = (name === 'width' && !options[name].startsWith('auto') || name === 'height') ? Math.floor(parseInt(options[name], 10) * 0.1) : options[name];
+      placeholderOptions[name] = (name === 'width' && !options[name].startsWith('auto') || name === 'height') ? Math.ceil(parseInt(options[name], 10) * 0.1) : options[name];
     })
     this.placeholderComponent.options = placeholderOptions;
   }
 }
+

src/cloudinary-placeholder.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
 } from '@angular/core';
 import {Cloudinary} from './cloudinary.service';
-
+import { placeholderImageOptions, predominantColorTransformPxl } from './constants';
 
 @Component({
   selector: 'cl-placeholder',
@@ -40,17 +40,10 @@ export class CloudinaryPlaceHolder implements AfterContentChecked {
   }
 
   getPlaceholderImage() {
-    const placeholderImageOptions = {
-      'vectorize': {effect: 'vectorize', quality: 1},
-      'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'},
-      'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'},
-      'solid': [
-        {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
-        {crop: 'crop', width: 10, height: 10, gravity: 'north_east'},
-        {width: 'iw', height: 'ih', crop: 'fill'},
-        {fetch_format: 'auto', quality: 'auto'}]
+    if (this.type === 'predominant-color' && this.itemHeight && this.itemWidth) {
+      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...predominantColorTransformPxl]});
+    } else {
+      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...placeholderImageOptions[this.type] || placeholderImageOptions['blur']]})
     }
-    let transformation = [].concat.apply([], [this.options, placeholderImageOptions[this.type] || placeholderImageOptions['blur']]);
-    return this.cloudinary.url(this.publicId, {transformation: transformation});
   }
 }

src/constants.ts

@@ -0,0 +1,17 @@
+export const predominantColorTransformPxl = [
+  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
+  {crop: 'crop', width: 1, height: 1, gravity: 'north_east'},
+  {fetch_format: 'auto', quality: 'auto'}];
+
+export const predominantColorTransform  = [
+  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
+  {crop: 'crop', width: 10, height: 10, gravity: 'north_east'},
+  {width: 'iw', height: 'ih', crop: 'fill'},
+  {fetch_format: 'auto', quality: 'auto'}];
+
+export const placeholderImageOptions = {
+  'vectorize': {effect: 'vectorize', quality: 1},
+  'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'},
+  'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'},
+  'predominant-color': predominantColorTransform
+};