feat(slider): Add RTL support

AmadeusITGroup · Jan 4, 2024 · 890047b · 890047b
1 parent d9fc9c9
commit 890047b
Show file tree

Hide file tree

Showing 12 changed files with 898 additions and 124 deletions.
diff --git a/angular/demo/src/app/samples/slider/right-to-left.route.ts b/angular/demo/src/app/samples/slider/right-to-left.route.ts
@@ -0,0 +1,27 @@
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import {Component} from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
+	template: `
+		<h2>Horizontal slider</h2>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl" [auRtl]="true"></div>
+		<br />
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderRangeControl" [auRtl]="true"></div>
+		<h2>Vertical slider</h2>
+		<div class="d-flex" style="height: 350px">
+			<div class="col-6" style="height: 300px">
+				<div auSlider auMin="0" auMax="100" [auRtl]="true" auStepSize="1" auVertical [formControl]="sliderControl" auClassName="my-0"></div>
+			</div>
+			<div class="col-6" style="height: 300px">
+				<div auSlider auMin="0" auMax="100" [auRtl]="true" auStepSize="1" auVertical [formControl]="sliderRangeControl" auClassName="my-0"></div>
+			</div>
+		</div>
+	`,
+})
+export default class RtlSliderComponent {
+	sliderControl = new FormControl([30]);
+	sliderRangeControl = new FormControl([30, 70]);
+}
diff --git a/angular/lib/src/components/slider/slider.component.ts b/angular/lib/src/components/slider/slider.component.ts
@@ -30,7 +30,9 @@ import {take} from 'rxjs';
 			<div
 				class="au-slider-progress"
 				[style.left.%]="option.left"
+				[style.right.%]="option.right"
 				[style.bottom.%]="option.bottom"
+				[style.top.%]="option.top"
 				[style.width.%]="option.width"
 				[style.height.%]="option.height"
 			></div>
@@ -39,13 +41,15 @@ import {take} from 'rxjs';
 		@if (state().showMinMaxLabels) {
 			<div
 				[class]="state().vertical ? 'au-slider-label-vertical au-slider-label-vertical-min' : 'au-slider-label au-slider-label-min'"
+				[class.au-slider-rtl]="state().rtl"
 				[class.invisible]="!state().minValueLabelDisplay"
 				[auUse]="widget.directives.minLabelDirective"
 			>
 				{{ state().min }}
 			</div>
 			<div
 				[class]="state().vertical ? 'au-slider-label-vertical au-slider-label-vertical-max' : 'au-slider-label au-slider-label-max'"
+				[class.au-slider-rtl]="state().rtl"
 				[class.invisible]="!state().maxValueLabelDisplay"
 				[auUse]="widget.directives.maxLabelDirective"
 			>
@@ -58,7 +62,11 @@ import {take} from 'rxjs';
 				[style.left.%]="state().combinedLabelPositionLeft"
 				[style.top.%]="state().combinedLabelPositionTop"
 			>
-				{{ state().sortedValues[0] }} - {{ state().sortedValues[1] }}
+				@if (state().rtl) {
+					{{ state().sortedValues[1] }} - {{ state().sortedValues[0] }}
+				} @else {
+					{{ state().sortedValues[0] }} - {{ state().sortedValues[1] }}
+				}
 			</div>
 		}
 		@for (item of state().sortedHandles; track item.id; let i = $index) {
@@ -75,8 +83,8 @@ import {take} from 'rxjs';
 				[attr.aria-orientation]="state().vertical ? 'vertical' : null"
 				[disabled]="state().disabled"
 				[class]="state().vertical ? 'au-slider-handle-vertical' : 'au-slider-handle-horizontal'"
-				[style.left.%]="state().vertical ? null : state().handleDisplayOptions[item.id].left"
-				[style.top.%]="state().vertical ? state().handleDisplayOptions[item.id].top : null"
+				[style.left.%]="state().handleDisplayOptions[item.id].left"
+				[style.top.%]="state().handleDisplayOptions[item.id].top"
 				(keydown)="onKeyDown($event, item.id)"
 				(mousedown)="widget.actions.mouseDown($event, item.id)"
 			>
@@ -141,6 +149,12 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 	@Input('auValues')
 	values: number[] | undefined;
 
+	/**
+	 * It `true` slider display is inversed
+	 */
+	@Input({alias: 'auRtl', transform: auBooleanAttribute})
+	rtl: boolean | undefined;
+
 	/**
 	 * If `true` the value labels are displayed on the slider
 	 */