slick-components 17.0.30 → 17.0.32
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.
|
|
26
|
+
static { this.version = "17.0.32"; }
|
|
27
27
|
constructor() { }
|
|
28
28
|
static init(initParams) {
|
|
29
29
|
console.info(`Slick Components Version ${SlickInitService.version}`);
|
|
@@ -8168,15 +8168,16 @@ 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 {
|
|
8176
8177
|
constructor() {
|
|
8177
8178
|
this.stars = [];
|
|
8178
8179
|
this.checkedColor = "gold";
|
|
8179
|
-
this.uncheckedColor = "
|
|
8180
|
+
this.uncheckedColor = "#edf2fa";
|
|
8180
8181
|
this.size = "24px";
|
|
8181
8182
|
this.readonly = false;
|
|
8182
8183
|
this.totalStars = 5;
|
|
@@ -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,16 @@ class SlickStarRatingComponent {
|
|
|
8220
8223
|
generateStars() {
|
|
8221
8224
|
this.stars = [];
|
|
8222
8225
|
for (let i = 0; i < this.totalStars; i++) {
|
|
8223
|
-
|
|
8224
|
-
this.
|
|
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;
|
|
8232
|
+
// have to do a 1.1 here in order to get the correct scale. fill works weird with icons
|
|
8233
|
+
fill = Math.min(fill * 1.1, 1); // scale up fractional fill to compensate visually
|
|
8234
|
+
}
|
|
8235
|
+
this.stars.push(new Star(fill > 0, Math.min(fill, 1)));
|
|
8225
8236
|
}
|
|
8226
8237
|
}
|
|
8227
8238
|
/** @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 +8242,7 @@ class SlickStarRatingComponent {
|
|
|
8231
8242
|
useExisting: forwardRef((() => SlickStarRatingComponent)),
|
|
8232
8243
|
multi: true,
|
|
8233
8244
|
}
|
|
8234
|
-
], usesOnChanges: true, ngImport: i0, template: "<div
|
|
8245
|
+
], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"readonly\">\r\n\t<div *ngFor=\"let star of stars\" class=\"me-1\"\r\n\t\t style=\"position: relative; display: inline-block;\"\r\n\t\t [style.width]=\"size\" [style.height]=\"size\">\r\n\r\n\t\t<i class=\"fas fa-star\"\r\n\t\t [style.color]=\"uncheckedColor\"\r\n\t\t [style.fontSize]=\"size\"></i>\r\n\r\n\t\t<!--fill is weird with icons so in order to get the full fill we need to do 110%-->\r\n\t\t<div *ngIf=\"star.fill > 0\"\r\n\t\t\t [style.width]=\"star.fill === 1 ? '110%' : (star.fill * 100 + '%')\"\r\n\t\t\t style=\"overflow: hidden; height: 100%; position: absolute; top: 0; left: 0; 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</div>\r\n\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
8246
|
}
|
|
8236
8247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickStarRatingComponent, decorators: [{
|
|
8237
8248
|
type: Component,
|
|
@@ -8241,7 +8252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
8241
8252
|
useExisting: forwardRef((() => SlickStarRatingComponent)),
|
|
8242
8253
|
multi: true,
|
|
8243
8254
|
}
|
|
8244
|
-
], template: "<div
|
|
8255
|
+
], template: "<div *ngIf=\"readonly\">\r\n\t<div *ngFor=\"let star of stars\" class=\"me-1\"\r\n\t\t style=\"position: relative; display: inline-block;\"\r\n\t\t [style.width]=\"size\" [style.height]=\"size\">\r\n\r\n\t\t<i class=\"fas fa-star\"\r\n\t\t [style.color]=\"uncheckedColor\"\r\n\t\t [style.fontSize]=\"size\"></i>\r\n\r\n\t\t<!--fill is weird with icons so in order to get the full fill we need to do 110%-->\r\n\t\t<div *ngIf=\"star.fill > 0\"\r\n\t\t\t [style.width]=\"star.fill === 1 ? '110%' : (star.fill * 100 + '%')\"\r\n\t\t\t style=\"overflow: hidden; height: 100%; position: absolute; top: 0; left: 0; 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</div>\r\n\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
8256
|
}], ctorParameters: () => [], propDecorators: { checkedColor: [{
|
|
8246
8257
|
type: Input
|
|
8247
8258
|
}], uncheckedColor: [{
|