js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

backport SL-2189

Browse Source
This commit is contained in:
Cory LaViska
2024-12-04 12:39:03 -05:00
parent 6dd31748e9
commit 56dc07e30d
13 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/rating/rating.ts
View File

@@ -3,6 +3,7 @@ import { clamp } from '../../internal/math.js';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
import { html } from 'lit';
import { LocalizeController } from '../../utilities/localize.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { WaChangeEvent } from '../../events/change.js';
@@ -37,6 +38,8 @@ import type { CSSResultGroup } from 'lit';
export default class WaRating extends WebAwesomeElement {
static styles: CSSResultGroup = [componentStyles, styles];
private readonly localize = new LocalizeController(this);
@query('.rating') rating: HTMLElement;
@state() private hoverValue = 0;
@@ -80,7 +83,7 @@ export default class WaRating extends WebAwesomeElement {
}
private getValueFromXCoordinate(coordinate: number) {
const isRtl = this.matches(':dir(rtl)');
const isRtl = this.localize.dir() === 'rtl';
const { left, right, width } = this.rating.getBoundingClientRect();
const value = isRtl
? this.roundToPrecision(((right - coordinate) / width) * this.max, this.precision)
@@ -109,7 +112,7 @@ export default class WaRating extends WebAwesomeElement {
private handleKeyDown(event: KeyboardEvent) {
const isLtr = this.matches(':dir(ltr)');
const isRtl = this.matches(':dir(rtl)');
const isRtl = this.localize.dir() === 'rtl';
const oldValue = this.value;
if (this.disabled || this.readonly) {
@@ -214,7 +217,7 @@ export default class WaRating extends WebAwesomeElement {
}
render() {
const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir;
const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir;
const counter = Array.from(Array(this.max).keys());
let displayValue = 0;