UNPKG

rm-ng-star-rating

Version:

A highly optimized and fully customizable pure angular component for value range selection.

github.com/malikrajat/rm-ng-star-rating

malikrajat/rm-ng-star-rating

1 lines • 8.61 kB
1
{"version":3,"file":"rm-ng-star-rating.mjs","sources":["../../projects/rm-ng-star-rating/src/lib/rm-ng-star-rating.component.ts","../../projects/rm-ng-star-rating/src/lib/rm-ng-star-rating.component.html","../../projects/rm-ng-star-rating/src/public-api.ts","../../projects/rm-ng-star-rating/src/rm-ng-star-rating.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'rm-ng-star-rating',\n imports: [CommonModule],\n templateUrl: './rm-ng-star-rating.component.html',\n styleUrls: ['./rm-ng-star-rating.component.css']\n})\nexport class RmNgStarRatingComponent implements OnInit {\n @Output() ratingUpdated: EventEmitter<number> = new EventEmitter();\n @Input() @HostBinding('style.--star-color') color: string = 'gold';\n @Input() @HostBinding('style.--star-empty-color') emptyColor: string =\n 'lightgray';\n @Input() @HostBinding('style.--star-size') size: string = '40px';\n @Input() rating: number = 0;\n @Input() starCount: number = 5;\n @Input() readOnly: boolean = false;\n // it is for showing pointing ratiing\n // @Input() decimalRatting: boolean = false;\n // @ViewChild('tooltip', {static: false}) tooltip!: ElementRef;\n\n hovered: number = 0;\n hoveredRating: number = 0;\n starsArray: any[] = [];\n\n ngOnInit(): void {\n this.starsArray = Array.from({ length: this.starCount });\n }\n\n onMouseEnter(index: number, event: MouseEvent): void {\n if (!this.readOnly) {\n this.hovered = index;\n this.hoveredRating = index;\n // it is for showing pointing ratiing\n // this.hoveredRating = this.calculateRating(index, event);\n // const tooltipElement = this.tooltip.nativeElement as HTMLElement;\n // tooltipElement.style.display = 'block';\n // this.positionTooltip(event);\n }\n }\n\n onMouseLeave(): void {\n if (!this.readOnly) {\n this.hovered = 0;\n this.hoveredRating = 0;\n // const tooltipElement = this.tooltip.nativeElement as HTMLElement;\n // tooltipElement.style.display = 'none';\n }\n }\n\n onClick(index: number): void {\n if (!this.readOnly) {\n this.rating = index;\n // it is for showing pointing ratiing\n // this.rating = this.calculateRating(index);\n this.ratingUpdated.emit(this.rating);\n }\n }\n\n getStarClass(index: number): string {\n return this.hovered >= index || this.rating >= index\n ? 'star-filled'\n : 'star-empty';\n }\n\n // it is for showing pointing ratiing\n // getStarClass(index: number): string {\n // if (this.hovered >= index || this.rating >= index) {\n // const fullStars = Math.floor(this.rating);\n // const fractionalPart = this.rating - fullStars;\n // if (index === fullStars + 1 && fractionalPart > 0) {\n // return 'star-half-filled';\n // }\n // return 'star-filled';\n // }\n // return 'star-empty';\n // }\n\n calculateRating(index: number, event?: MouseEvent): number {\n if (event) {\n const starWidth = (event.target as HTMLElement).offsetWidth;\n const offsetX =\n event.clientX -\n (event.target as HTMLElement).getBoundingClientRect().left;\n const fraction = Math.min(1, Math.max(0, offsetX / starWidth));\n return index - 1 + fraction;\n }\n return index;\n }\n\n // positionTooltip(event: MouseEvent): void {\n // const tooltipElement = this.tooltip.nativeElement as HTMLElement;\n // const xOffset = -10; // Distance from the star to the tooltip\n // const yOffset = -30; // Position above the star\n //\n // tooltipElement.style.left = `${event.clientX + xOffset}px`;\n // tooltipElement.style.top = `${event.clientY + yOffset}px`;\n // }\n}\n","<!--<div class=\"star-rating\" [ngStyle]=\"{'font-size.px': size}\">-->\n<!-- <span *ngFor=\"let star of [].constructor(starCount); let i = index\"-->\n<!-- class=\"star\"-->\n<!-- [ngClass]=\"getStarClass(i + 1)\"-->\n<!-- (mouseenter)=\"onMouseEnter(i + 1)\"-->\n<!-- (mouseleave)=\"onMouseLeave()\"-->\n<!-- (click)=\"onClick(i + 1)\">-->\n<!-- ★-->\n<!-- </span>-->\n<!--</div>-->\n\n<!--<div class=\"star-rating-container\">-->\n<!-- <div class=\"star-rating\" [ngStyle]=\"{'font-size.px': size}\">-->\n<!-- <span *ngFor=\"let star of starsArray; let i = index\"-->\n<!-- class=\"star-wrapper\"-->\n<!-- (mouseenter)=\"onMouseEnter(i + 1, $event)\"-->\n<!-- (mouseleave)=\"onMouseLeave()\">-->\n<!-- <span class=\"star\"-->\n<!-- [ngClass]=\"getStarClass(i + 1)\"-->\n<!-- (click)=\"onClick(i + 1)\">-->\n<!-- ★-->\n<!-- </span>-->\n<!-- &lt;!&ndash; Tooltip displayed above the star &ndash;&gt;-->\n<!-- <div class=\"tooltip\" #tooltip>-->\n<!-- {{ hoveredRating }}-->\n<!-- </div>-->\n<!-- </span>-->\n<!-- </div>-->\n<!--</div>-->\n\n<div class=\"star-rating-container\">\n <div class=\"star-rating\" [ngStyle]=\"{ 'font-size.px': size }\">\n <span\n *ngFor=\"let star of starsArray; let i = index\"\n class=\"star-wrapper\"\n (mouseenter)=\"onMouseEnter(i + 1, $event)\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <span\n class=\"star\"\n [ngClass]=\"getStarClass(i + 1)\"\n (click)=\"onClick(i + 1)\"\n >\n ★\n </span>\n </span>\n </div>\n <!-- Tooltip element -->\n <!-- <div class=\"tooltip\" #tooltip>-->\n <!-- {{ hoveredRating }}-->\n <!-- </div>-->\n</div>\n","/*\n * Public API Surface of rm-ng-star-rating\n */\n\nexport * from './lib/rm-ng-star-rating.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}