slick-components 17.0.30 → 17.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,7 +23,7 @@ class SlickInitParams {
23
23
  }
24
24
  }
25
25
  class SlickInitService {
26
- static { this.version = "17.0.30"; }
26
+ static { this.version = "17.0.31"; }
27
27
  constructor() { }
28
28
  static init(initParams) {
29
29
  console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -8168,8 +8168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
8168
8168
  }] });
8169
8169
 
8170
8170
  class Star {
8171
- constructor(selected) {
8171
+ constructor(selected, fill = 1) {
8172
8172
  this.selected = selected;
8173
+ this.fill = fill;
8173
8174
  }
8174
8175
  }
8175
8176
  class SlickStarRatingComponent {
@@ -8189,10 +8190,12 @@ class SlickStarRatingComponent {
8189
8190
  }
8190
8191
  // this is the initial value set to the component
8191
8192
  writeValue(obj) {
8192
- if (obj)
8193
- this.ratingValue = obj - 1;
8194
- else
8193
+ if (obj == null) {
8195
8194
  this.ratingValue = -1;
8195
+ }
8196
+ else {
8197
+ this.ratingValue = obj;
8198
+ }
8196
8199
  this.generateStars();
8197
8200
  }
8198
8201
  // registers 'fn' that will be fired when changes are made
@@ -8220,8 +8223,14 @@ class SlickStarRatingComponent {
8220
8223
  generateStars() {
8221
8224
  this.stars = [];
8222
8225
  for (let i = 0; i < this.totalStars; i++) {
8223
- const selected = (i <= this.ratingValue);
8224
- this.stars.push(new Star(selected));
8226
+ let fill = 0;
8227
+ if (this.ratingValue >= i + 1) {
8228
+ fill = 1;
8229
+ }
8230
+ else if (this.ratingValue > i) {
8231
+ fill = this.ratingValue - i; // will be a decimal between 0 and 1
8232
+ }
8233
+ this.stars.push(new Star(fill > 0, Math.min(fill, 1)));
8225
8234
  }
8226
8235
  }
8227
8236
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickStarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8231,7 +8240,7 @@ class SlickStarRatingComponent {
8231
8240
  useExisting: forwardRef((() => SlickStarRatingComponent)),
8232
8241
  multi: true,
8233
8242
  }
8234
- ], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\" (mouseleave)=\"reset()\">\r\n\t<div *ngFor=\"let star of stars; let idx = index\" class=\"ps-1\" style=\"cursor: pointer\" (mouseenter)=\"onMouseEnter(idx)\" (click)=\"setRatingValue(idx)\">\r\n\t\t<div *ngIf=\"star.selected === true\" style=\"position: relative\">\r\n\t\t\t<div class=\"fas fa-star\" [style.color]=\"checkedColor\" [style.font-size]=\"size\"></div>\r\n\t\t\t<div class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.font-size]=\"size\" style=\"position: absolute; left: 0;\"></div>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"star.selected === false\" class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.font-size]=\"size\"></div>\r\n\t</div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
8243
+ ], usesOnChanges: true, ngImport: i0, template: "\r\n<div *ngIf=\"readonly\">\r\n\t<div *ngFor=\"let star of stars\" class=\"ps-1\"\r\n\t\t style=\"position: relative; display: inline-block; padding-left: 0.25rem;\"\r\n\t\t [style.width]=\"size\" [style.height]=\"size\">\r\n\t\t<i class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.fontSize]=\"size\"></i>\r\n\r\n\t\t<div *ngIf=\"star.fill > 0\"\r\n\t\t\t [style.width]=\"star.fill === 1 ? '100%' : (star.fill * 100 + '%')\"\r\n\t\t\t style=\"overflow: hidden; height: 100%; position: absolute; top: 0; left: 0.25rem; box-sizing: border-box;\">\r\n\t\t\t<i class=\"fas fa-star\"\r\n\t\t\t [style.color]=\"checkedColor\"\r\n\t\t\t [style.fontSize]=\"size\"\r\n\t\t\t style=\"box-sizing: border-box;\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!readonly\" class=\"d-flex\" (mouseleave)=\"reset()\">\r\n\t<div *ngFor=\"let star of stars; let idx = index\" class=\"ps-1\"\r\n\t\t style=\"cursor: pointer\"\r\n\t\t (mouseenter)=\"onMouseEnter(idx)\"\r\n\t\t (click)=\"setRatingValue(idx)\">\r\n\t\t<div class=\"fas fa-star\" [style.color]=\"star.selected ? checkedColor : uncheckedColor\" [style.font-size]=\"size\"></div>\r\n\t</div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
8235
8244
  }
8236
8245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickStarRatingComponent, decorators: [{
8237
8246
  type: Component,
@@ -8241,7 +8250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
8241
8250
  useExisting: forwardRef((() => SlickStarRatingComponent)),
8242
8251
  multi: true,
8243
8252
  }
8244
- ], template: "<div class=\"d-flex\" (mouseleave)=\"reset()\">\r\n\t<div *ngFor=\"let star of stars; let idx = index\" class=\"ps-1\" style=\"cursor: pointer\" (mouseenter)=\"onMouseEnter(idx)\" (click)=\"setRatingValue(idx)\">\r\n\t\t<div *ngIf=\"star.selected === true\" style=\"position: relative\">\r\n\t\t\t<div class=\"fas fa-star\" [style.color]=\"checkedColor\" [style.font-size]=\"size\"></div>\r\n\t\t\t<div class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.font-size]=\"size\" style=\"position: absolute; left: 0;\"></div>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"star.selected === false\" class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.font-size]=\"size\"></div>\r\n\t</div>\r\n</div>" }]
8253
+ ], template: "\r\n<div *ngIf=\"readonly\">\r\n\t<div *ngFor=\"let star of stars\" class=\"ps-1\"\r\n\t\t style=\"position: relative; display: inline-block; padding-left: 0.25rem;\"\r\n\t\t [style.width]=\"size\" [style.height]=\"size\">\r\n\t\t<i class=\"fal fa-star\" [style.color]=\"uncheckedColor\" [style.fontSize]=\"size\"></i>\r\n\r\n\t\t<div *ngIf=\"star.fill > 0\"\r\n\t\t\t [style.width]=\"star.fill === 1 ? '100%' : (star.fill * 100 + '%')\"\r\n\t\t\t style=\"overflow: hidden; height: 100%; position: absolute; top: 0; left: 0.25rem; box-sizing: border-box;\">\r\n\t\t\t<i class=\"fas fa-star\"\r\n\t\t\t [style.color]=\"checkedColor\"\r\n\t\t\t [style.fontSize]=\"size\"\r\n\t\t\t style=\"box-sizing: border-box;\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!readonly\" class=\"d-flex\" (mouseleave)=\"reset()\">\r\n\t<div *ngFor=\"let star of stars; let idx = index\" class=\"ps-1\"\r\n\t\t style=\"cursor: pointer\"\r\n\t\t (mouseenter)=\"onMouseEnter(idx)\"\r\n\t\t (click)=\"setRatingValue(idx)\">\r\n\t\t<div class=\"fas fa-star\" [style.color]=\"star.selected ? checkedColor : uncheckedColor\" [style.font-size]=\"size\"></div>\r\n\t</div>\r\n</div>" }]
8245
8254
  }], ctorParameters: () => [], propDecorators: { checkedColor: [{
8246
8255
  type: Input
8247
8256
  }], uncheckedColor: [{