From fbd08b23d96db42649529d3e391ea258ccf21b26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 17 Jul 2024 16:35:13 +0300 Subject: [PATCH] Theming | Add rating --- src/app/components/rating/rating.css | 15 ---- src/app/components/rating/rating.ts | 45 +++++++---- .../components/rating/style/ratingstyle.ts | 75 +++++++++++++++++++ 3 files changed, 106 insertions(+), 29 deletions(-) delete mode 100755 src/app/components/rating/rating.css create mode 100644 src/app/components/rating/style/ratingstyle.ts diff --git a/src/app/components/rating/rating.css b/src/app/components/rating/rating.css deleted file mode 100755 index c9fd771170e..00000000000 --- a/src/app/components/rating/rating.css +++ /dev/null @@ -1,15 +0,0 @@ -@layer primeng { - .p-rating { - display: inline-flex; - position: relative; - align-items: center; - } - - .p-rating-icon { - cursor: pointer; - } - - .p-rating.p-rating-readonly .p-rating-icon { - cursor: default; - } -} diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts index 2ffe5bafbdd..2dcc0ae88e2 100755 --- a/src/app/components/rating/rating.ts +++ b/src/app/components/rating/rating.ts @@ -1,5 +1,23 @@ import { CommonModule } from '@angular/common'; -import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, numberAttribute, OnInit, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + EventEmitter, + forwardRef, + inject, + Input, + NgModule, + numberAttribute, + OnInit, + Output, + QueryList, + signal, + TemplateRef, + ViewEncapsulation +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { BanIcon } from 'primeng/icons/ban'; @@ -10,6 +28,8 @@ import { RatingRateEvent } from './rating.interface'; import { DomHandler } from 'primeng/dom'; import { UniqueComponentId } from 'primeng/utils'; import { AutoFocusModule } from 'primeng/autofocus'; +import { RatingStyle } from './style/ratingstyle'; +import { BaseComponent } from 'primeng/basecomponent'; export const RATING_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -25,12 +45,12 @@ export const RATING_VALUE_ACCESSOR: any = { template: `
-
+
-
+
`, - providers: [RATING_VALUE_ACCESSOR], + providers: [RATING_VALUE_ACCESSOR, RatingStyle], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - styleUrls: ['./rating.css'], host: { class: 'p-element' } }) -export class Rating implements OnInit, ControlValueAccessor { +export class Rating extends BaseComponent implements OnInit, ControlValueAccessor { /** * When present, it specifies that the element should be disabled. * @group Props @@ -193,15 +212,13 @@ export class Rating implements OnInit, ControlValueAccessor { focusedOptionIndex = signal(-1); - name: string | undefined; + nameattr: string | undefined; - constructor( - private cd: ChangeDetectorRef, - private config: PrimeNGConfig - ) {} + _componentStyle = inject(RatingStyle); ngOnInit() { - this.name = this.name || UniqueComponentId(); + super.ngOnInit(); + this.nameattr = this.nameattr || UniqueComponentId(); this.starsArray = []; for (let i = 0; i < this.stars; i++) { this.starsArray[i] = i; diff --git a/src/app/components/rating/style/ratingstyle.ts b/src/app/components/rating/style/ratingstyle.ts new file mode 100644 index 00000000000..2e6202d6b95 --- /dev/null +++ b/src/app/components/rating/style/ratingstyle.ts @@ -0,0 +1,75 @@ +import { Injectable } from '@angular/core'; +import { BaseStyle } from 'primeng/base'; + +const theme = ({ dt }) => ` +.p-rating { + position: relative; + display: flex; + align-items: center; + gap: ${dt('rating.gap')}; +} + +.p-rating-option { + display: inline-flex; + align-items: center; + cursor: pointer; + outline-color: transparent; + border-radius: 50%; + cursor: pointer; + transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt( + 'rating.transition.duration' +)}; +} + +.p-rating-option.p-focus-visible { + box-shadow: ${dt('focus.ring.shadow')}; + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-rating-icon { + color: ${dt('rating.icon.color')}; + transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt( + 'rating.transition.duration' +)}; + font-size: ${dt('rating.icon.size')}; + width: ${dt('rating.icon.size')}; + height: ${dt('rating.icon.size')}; +} + +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon { + color: ${dt('rating.icon.hover.color')}; +} + +.p-rating-option-active .p-rating-icon { + color: ${dt('rating.icon.active.color')}; +} +`; + +const classes = { + root: ({ props }) => [ + 'p-rating', + { + 'p-readonly': props.readonly, + 'p-disabled': props.disabled + } + ], + option: ({ instance, props, value }) => [ + 'p-rating-option', + { + 'p-rating-option-active': value <= props.modelValue, + 'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem + } + ], + onIcon: 'p-rating-icon p-rating-on-icon', + offIcon: 'p-rating-icon p-rating-off-icon' +}; + +@Injectable() +export class RatingStyle extends BaseStyle { + name = 'rating'; + + theme = theme; + + classes = classes; +}