feat(move packaging to ngPackagr <3): Switch the release and bundle p…

…rocess to ngPackagr

fixes #76

lib/.browserslistcr

@@ -0,0 +1,3 @@
+last 2 Chrome versions
+iOS > 10
+Safari > 10

src/package.json → lib/package.json

@@ -1,7 +1,15 @@
 {
   "name": "angular-star-rating",
-  "description": "Angular Star Rating is a Angular2 component written in typescript.",
+  "description": "Angular Star Rating is a fully featured and configurabel Angular UI component.",
   "version": "3.0.8",
+  "ngPackage": {
+    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+    "workingDirectory": "../.ng_build",
+    "lib": {
+      "entryFile": "src/public_api.ts"
+    },
+    "dest": "dist/lib"
+  },
   "homepage": "https://github.com/BioPhoton/angular-star-rating#readme",
   "repository": {
     "type": "git",
@@ -46,9 +54,9 @@
     "css-star-rating": "^1.1.3"
   },
   "peerDependencies": {
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "rxjs": "^5.1.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "rxjs": "^5.5.2",
     "zone.js": "^0.8.4"
   }
 }

lib/src/components/star-rating.component.ts

@@ -0,0 +1,231 @@
+import {Component, EventEmitter, forwardRef, Input} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {ClickEvent} from '../interfaces/click-event.interface';
+import {HoverRatingChangeEvent} from '../interfaces/hover-rating-change-event.interface';
+import {RatingChangeEvent} from '../interfaces/rating-change-event.interface';
+import {StarRating} from '../services/star-rating';
+import {StarRatingConfigService} from '../services/star-rating-config.service';
+import {StarRatingUtils} from '../services/star-rating.utils';
+
+const STAR_RATING_CONTROL_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => StarRatingComponent),
+  multi: true
+};
+
+@Component({
+  selector: 'star-rating-comp',
+  providers: [STAR_RATING_CONTROL_ACCESSOR],
+  inputs: [
+    'getHalfStarVisible'
+    , 'getColor'
+    , 'showHalfStars'
+    , 'hoverEnabled'
+    , 'rating'
+    , 'step'
+    , 'disabled'
+    , 'readOnly'
+    , 'space'
+    , 'starType'
+    , 'size'
+    , 'speed'
+    , 'numOfStars'
+    , 'direction'
+    , 'staticColor'
+    //, 'labelVisible'
+    , 'labelPosition'
+    , 'labelText'
+    , 'id'
+  ],
+  outputs: [
+    'clickEmitter'
+    , 'ratingChangeEmitter'
+    , 'hoverRatingChangeEmitter'
+  ],
+  styleUrls: [],
+  templateUrl: 'star-rating.component.html'
+})
+export class StarRatingComponent extends StarRating implements ControlValueAccessor {
+
+  //Outputs
+  ///////////////////////////////////////////////////////////////////////////////////////////
+
+  clickEmitter: EventEmitter<ClickEvent> = new EventEmitter<ClickEvent>();
+
+  saveOnClick($event: ClickEvent) {
+    if (this.clickEmitter) {
+      this.clickEmitter.emit($event);
+    }
+  }
+
+  ratingChangeEmitter: EventEmitter<RatingChangeEvent> = new EventEmitter<RatingChangeEvent>();
+
+  saveOnRatingChange($event: RatingChangeEvent) {
+    if (this.ratingChangeEmitter) {
+      this.ratingChangeEmitter.emit($event);
+    }
+  }
+
+  hoverRatingChangeEmitter: EventEmitter<HoverRatingChangeEvent> = new EventEmitter<HoverRatingChangeEvent>();
+
+  saveOnHover($event: HoverRatingChangeEvent) {
+    if (this.hoverRatingChangeEmitter) {
+      this.hoverRatingChangeEmitter.emit($event);
+    }
+  }
+
+  onTouch: Function;
+  onModelChange: Function;
+  private onModelChangeRegistered: boolean = false;
+  private onTouchRegistered: boolean = false;
+
+  saveOnTouch() {
+    if (this.onTouchRegistered) {
+      this.onTouch();
+    }
+  }
+
+  saveOnModelChange(value: number) {
+    if (this.onModelChangeRegistered) {
+      this.onModelChange(value);
+    }
+  }
+
+  /**ACCESSIBILITY **/
+
+  //Keyboard events
+  onKeyDown(event: KeyboardEvent) {
+
+    if (!this.interactionPossible()) {
+      return;
+    }
+
+    const handlers: any = {
+      //Decrement
+      Minus: () => this.decrement(),
+      ArrowDown: () => this.decrement(),
+      ArrowLeft: () => this.decrement(),
+
+      //Increment
+      Plus: () => this.increment(),
+      ArrowRight: () => this.increment(),
+      ArrowUp: () => this.increment(),
+
+      //Reset
+      Backspace: () => this.reset(),
+      Delete: () => this.reset(),
+      Digit0: () => this.reset()
+    };
+
+    const handleDigits = (eventCode: string): void => {
+      let dStr = "Digit";
+      let digit: number = parseInt(eventCode.substr(dStr.length, eventCode.length - 1));
+      this.rating = digit;
+    };
+
+    if (handlers[event['code']] || StarRatingUtils.isDigitKeyEventCode(event['code'])) {
+      if (StarRatingUtils.isDigitKeyEventCode(event['code'])) {
+        handleDigits(event['code']);
+      } else {
+        handlers[event['code']]();
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    this.saveOnTouch();
+  }
+
+  //Focus events
+  onBlur(event: FocusEvent) {
+    this.focus = false;
+    event.preventDefault();
+    event.stopPropagation();
+    this.saveOnTouch();
+  }
+
+  onFocus(event: FocusEvent) {
+    this.focus = true;
+    event.preventDefault();
+    event.stopPropagation();
+    this.saveOnTouch();
+  }
+
+  //Hover events
+  onStarHover(rating?: number): void {
+
+    if (!this.interactionPossible() || !this.hoverEnabled) {
+      return;
+    }
+
+    this.hoverRating = rating ? parseInt(rating.toString()) : 0;
+
+    //fire onHoverRatingChange event
+    let $event: HoverRatingChangeEvent = {hoverRating: this.hoverRating};
+    this.saveOnHover($event);
+
+
+  }
+
+  /**Form Control - ControlValueAccessor implementation**/
+
+  writeValue(obj: any): void {
+    this.rating = obj;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onModelChange = fn;
+    this.onModelChangeRegistered = true;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+    this.onTouchRegistered = true;
+  }
+
+  constructor(config: StarRatingConfigService) {
+    super(config);
+  }
+
+  //Overrides
+  setRating(value: number): void {
+    let initValue = this.rating;
+    super.setRating(value);
+
+    //if value changed trigger valueAccessor events and outputs
+    if (initValue !== this.rating) {
+      let $event: RatingChangeEvent = {rating: this.rating};
+      this.saveOnRatingChange($event);
+
+      this.saveOnModelChange(this.rating);
+    }
+
+  };
+
+  /**
+   * onStarClicked
+   *
+   * Is fired when a star is clicked. And updated the rating value.
+   * This function returns if the disabled or readOnly
+   * property is set. If provided it emits the onClick event
+   * handler with the actual rating value.
+   *
+   * @param rating
+   */
+  onStarClicked(rating: number): void {
+
+    //fire onClick event
+    if (!this.interactionPossible()) {
+      return;
+    }
+
+    this.rating = rating;
+
+    let onClickEventObject: ClickEvent = {
+      rating: this.rating
+    };
+    this.saveOnClick(onClickEventObject);
+
+  }
+
+}

lib/src/configs/default.config.ts

@@ -0,0 +1,51 @@
+
+import {starRatingColor} from '../interfaces/star-rating-config.interface';
+export const getColor = function (rating: number, numOfStars: number, staticColor?: starRatingColor): starRatingColor {
+  rating = rating || 0;
+
+  // if a fix color is set use this one
+  if (staticColor) {
+    return staticColor
+  }
+
+  // calculate size of smallest fraction
+  const fractionSize = numOfStars / 3;
+
+  // apply color by fraction
+  let color: starRatingColor = 'default';
+  if (rating > 0) {
+    color = 'negative'
+  }
+  if (rating > fractionSize) {
+    color = 'ok'
+  }
+  if (rating > fractionSize * 2) {
+    color = 'positive'
+  }
+
+  return color
+};
+export const getHalfStarVisible = function (rating: number): boolean {
+  return Math.abs(rating % 1) > 0
+};
+
+export const defaultConfig = {
+  classEmpty: "default-star-empty-icon",
+  classHalf: "default-star-half-icon",
+  classFilled: "default-star-filled-icon",
+  numOfStars: 5,
+  size: "medium",
+  speed: "noticeable",
+  labelPosition: "left",
+  starType: "svg",
+  assetsPath: "assets/images/",
+  svgPath: this.assetsPath + "star-rating.icons.svg",
+  svgEmptySymbolId: "star-empty",
+  svgHalfSymbolId: "star-half",
+  svgFilledSymbolId: "star-filled",
+  svgPathEmpty: this.svgPath + "#" + this.svgEmptySymbolId,
+  svgPathHalf: this.svgPath + "#" + this.svgHalfSymbolId,
+  svgPathFilled: this.svgPath + "#" + this.svgFilledSymbolId,
+  getColor: getColor,
+  getHalfStarVisible:getHalfStarVisible
+};

lib/src/injection-tokens/star-rating-config.injection-token.ts

@@ -0,0 +1,2 @@
+import {InjectionToken} from '@angular/core';
+export const StarRatingConfig = new InjectionToken('StarRating config object')

lib/src/interfaces/click-event.interface.ts

@@ -0,0 +1,3 @@
+export interface ClickEvent {
+  rating: number;
+}

lib/src/interfaces/hover-rating-change-event.interface.ts

@@ -0,0 +1,3 @@
+export interface HoverRatingChangeEvent {
+  hoverRating : number;
+}

lib/src/interfaces/rating-change-event.interface.ts

@@ -0,0 +1,3 @@
+export interface RatingChangeEvent {
+  rating: number;
+}

lib/src/interfaces/star-rating-config.interface.ts

@@ -0,0 +1,31 @@
+export type starRatingSizes = 'small' | 'medium' | 'large';
+export type starRatingColor = 'default' | 'negative' | 'ok' | 'positive';
+export type starRatingSpeed = 'immediately' | 'noticeable' | 'slow';
+export type starRatingLabelPosition = 'left' | 'right' | 'top' | 'bottom';
+export type starRatingStarTypes = 'svg' | 'icon' | 'image';
+export type starRatingStarSpace= 'no' | 'between' | 'around';
+export type starRatingDirection= 'rtl' | 'ltr';
+
+export interface IStarRatingConfig {
+  // binding defaults
+  numOfStars?: number,
+  size?: starRatingSizes,
+  speed?: starRatingSpeed,
+  labelPosition?: starRatingLabelPosition,
+  starType?: starRatingStarTypes,
+  staticColor: starRatingColor,
+  getColor?: (rating: number, numOfStars: number, staticColor?: starRatingColor)=> starRatingColor,
+  getHalfStarVisible?:(rating: number) => boolean
+  // statics
+  classEmpty?: string,
+  classHalf?: string,
+  classFilled?: string,
+  assetsPath?: string,
+  svgPath?: string,
+  svgEmptySymbolId?: string,
+  svgHalfSymbolId?: string,
+  svgFilledSymbolId?: string,
+  svgPathEmpty?: string,
+  svgPathHalf?: string,
+  svgPathFilled?: string,
+}

lib/src/public_api.ts

@@ -0,0 +1,9 @@
+export * from './services/star-rating-config.service';
+export * from './services/star-rating';
+export * from './services/star-rating.utils';
+export * from './components/star-rating.component';
+export * from './star-rating.module';
+export * from './interfaces/click-event.interface'
+export * from './interfaces/hover-rating-change-event.interface'
+export * from './interfaces/rating-change-event.interface'
+export * from './interfaces/star-rating-config.interface'