feat: adding validation for appearance in dev loop

Author: willmendesneto

CHANGELOG.md

@@ -13,10 +13,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - if `count` is not a numeric value, it will use the default value as `1`
   - if `animation` is not a valid attribute, it will use the default value as `progress`
   - PS: The other values alredy have a fallback, so nothing to worry here
+- Adding error feedback for `appearance` attribute in case of wrong configuration. Now it will show a error message on the console in case of receiving a wrong value
 
 ### Updated
 
 - Adding `ngOnChange` to validate `count` input in case of changes via binding
+- Updating `README.md` with information about `appearance` and `theme` usage.
 
 ## [2.8.0][] - 2021-02-18
 

README.md

@@ -118,6 +118,15 @@ export class YourAppComponent {}
 
 - loadingText - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..."
 
+## Appearance
+
+You can also define which appearance want to use in your skeleton loader by passing the options in your component via `[appearance]` attribute.
+
+### Options
+
+- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line, but line is not a expected appearance to be passed;
+- `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :);
+
 ## Animations
 
 You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via `[animation]` attribute.
@@ -178,6 +187,24 @@ you need to apply the style changes on the
 </div>
 ```
 
+The [theme] attribute now accepts the same configuration as `ngStyle` as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience
+
+```html
+<!--
+Note that we are using a combination of styles and ngStyle inside theme object,
+having `height.px` receiving a number and `background-color` receiving a HEX Color
+-->
+<div style="background: #FF0001; padding: 10px;">
+  <ngx-skeleton-loader
+    count="5"
+    [theme]="{ 
+      'height.px': 50,
+      'background-color': '#992929'
+    }"
+  ></ngx-skeleton-loader>
+</div>
+```
+
 ### ⚠️ This is here only as a documentation, but it's not encouraged to be used. Please consider use it with caution ⚠️
 
 Also, you can use CSS to add theme styles into your component. However, there are some implications:

package.json

@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "./dist/ngx-skeleton-loader/bundles/ngx-skeleton-loader.umd.min.js",
-      "maxSize": "1.6KB"
+      "maxSize": "1.7KB"
     }
   ],
   "dependencies": {

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts

@@ -43,6 +43,10 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
         <ngx-skeleton-loader [count]="invalidValueIncount"></ngx-skeleton-loader>
       </div>
 
+      <div class="skeletons-appearance-invalid-option">
+        <ngx-skeleton-loader appearance="invalid-appearance"></ngx-skeleton-loader>
+      </div>
+
       <div class="skeletons-with-count">
         <ngx-skeleton-loader count="2"></ngx-skeleton-loader>
       </div>
@@ -78,8 +82,8 @@ describe('NgxSkeletonLoaderComponent', () => {
     }),
   );
 
-  it('should console 2 errors if `animation` and `count` receives invalid options and is running in development mode', () => {
-    expect(console.error).toHaveBeenCalledTimes(2);
+  it('should console 3 errors if `animation`, `appearance` and `count` receives invalid options and is running in development mode', () => {
+    expect(console.error).toHaveBeenCalledTimes(3);
   });
 
   it('should console errors if `animation` is an invalid option and is running in development mode', () => {
@@ -89,20 +93,27 @@ describe('NgxSkeletonLoaderComponent', () => {
     );
   });
 
-  it('should console errors if `animation` is an invalid option and is running in development mode', () => {
+  it('should console errors if `count` is an invalid option and is running in development mode', () => {
     expect(console.error).toHaveBeenCalledWith(
       // tslint:disable-next-line: max-line-length
       `\`NgxSkeletonLoaderComponent\` need to receive 'count' a numeric value. Forcing default to "1".`,
     );
   });
 
+  it('should console errors if `appearance` is an invalid option and is running in development mode', () => {
+    expect(console.error).toHaveBeenCalledWith(
+      // tslint:disable-next-line: max-line-length
+      `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+    );
+  });
+
   it('should add all relevant WAI-ARIA `aria-` attributes in all ngx-skeleton-loader', () => {
-    expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(13);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(13);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(13);
-    expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(13);
-    expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(13);
-    expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(13);
+    expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(14);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(14);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(14);
+    expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(14);
+    expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(14);
+    expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(14);
   });
 
   it('should use progress as default animation if `animation` is not passed as component attribute', () => {

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts

@@ -76,6 +76,16 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
       }
       this.animation = 'progress';
     }
+
+    if (['circle', ''].indexOf(String(this.appearance)) === -1) {
+      // Shows error message only in Development
+      if (isDevMode()) {
+        console.error(
+          `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+        );
+      }
+      this.appearance = '';
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {