feat(slider): Add slider component (#182)

Co-authored-by: Marko OLEKSIYENKO <[email protected]>

angular/demo/src/app/samples/slider/default.route.ts

@@ -0,0 +1,51 @@
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import type {OnInit} from '@angular/core';
+import {Component} from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
+	template: `
+		<h2>Slider with form control</h2>
+		<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="sliderControl"></au-component> Form control values:
+		{{ sliderControl.value }}
+		<hr />
+
+		<h2>Slider with value</h2>
+		<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [(auValues)]="sliderValues"></au-component> Values:
+		{{ sliderValues }}
+		<hr />
+
+		<h2>Disabled slider</h2>
+		<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="disabledControl" [auReadonly]="readonlyToggle"></au-component>
+
+		<div class="form-check form-switch">
+			<input class="form-check-input" type="checkbox" role="switch" id="disabled" [(ngModel)]="disabledToggle" (change)="handleDisabled()" />
+			<label class="form-check-label" for="disabled">Disabled</label>
+		</div>
+		<div class="form-check form-switch">
+			<input class="form-check-input" type="checkbox" role="switch" id="readonly" [(ngModel)]="readonlyToggle" />
+			<label class="form-check-label" for="readonly">Readonly</label>
+		</div>
+	`,
+})
+export default class DefaultSliderComponent implements OnInit {
+	sliderControl = new FormControl([70]);
+	disabledControl = new FormControl(60);
+	sliderValues = [20];
+	disabledToggle = true;
+	readonlyToggle = true;
+
+	ngOnInit() {
+		this.disabledControl.disable();
+	}
+
+	handleDisabled() {
+		if (this.disabledToggle) {
+			this.disabledControl.disable();
+		} else {
+			this.disabledControl.enable();
+		}
+	}
+}

angular/demo/src/app/samples/slider/playground.route.ts

@@ -0,0 +1,23 @@
+import type {SliderComponent} from '@agnos-ui/angular';
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import {getSliderDefaultConfig} from '@agnos-ui/core';
+import {Component, ViewChild} from '@angular/core';
+import {getUndefinedValues, hashChangeHook, provideHashConfig} from '../../utils';
+
+const undefinedConfig = getUndefinedValues(getSliderDefaultConfig());
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule],
+	providers: provideHashConfig('slider'),
+	template: `<au-component auSlider #widget></au-component>`,
+})
+export default class PlaygroundComponent {
+	@ViewChild('widget') widget: SliderComponent;
+
+	constructor() {
+		hashChangeHook((props) => {
+			this.widget?._widget.patch({...undefinedConfig, ...props});
+		});
+	}
+}

angular/demo/src/app/samples/slider/range.route.ts

@@ -0,0 +1,22 @@
+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>Slider with form control</h2>
+		<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="sliderControl"></au-component>
+		Form control values: {{ sliderControl.value }}
+		<hr />
+
+		<h2>Slider with value</h2>
+		<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [(auValues)]="sliderValues"></au-component>
+		Values: {{ sliderValues }}
+	`,
+})
+export default class RangeSliderComponent {
+	sliderControl = new FormControl([10, 40, 50, 60, 90]);
+	sliderValues = [10, 40];
+}

angular/demo/src/app/samples/slider/vertical.route.ts

@@ -0,0 +1,25 @@
+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>Vertical slider</h2>
+		<div class="d-flex" style="height: 350px">
+			<div class="col-6" style="height: 300px">
+				<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [auVertical]="true" [formControl]="sliderControl"></au-component>
+				Form control values: {{ sliderControl.value }}
+			</div>
+			<div class="col-6" style="height: 300px">
+				<au-component auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [auVertical]="true" [formControl]="sliderControlRange"></au-component>
+				From control values: {{ sliderControlRange.value }}
+			</div>
+		</div>
+	`,
+})
+export default class VerticalSliderComponent {
+	sliderControl = new FormControl([10, 40]);
+	sliderControlRange = new FormControl([40]);
+}

angular/headless/src/public-api.ts

@@ -3,20 +3,27 @@
  */
 
 export * from '@agnos-ui/core';
-
+export * from './lib/config';
+export type {WidgetsConfig} from './lib/config';
 export * from './lib/slot.directive';
 export * from './lib/slotDefault.directive';
-export * from './lib/use.directive';
 export * from './lib/slotTypes';
+export type {SlotContent} from './lib/slotTypes';
+export * from './lib/use.directive';
 export * from './lib/utils';
-export * from './lib/config';
 
 import type {PropsConfig, WidgetFactory, WidgetProps, WidgetState} from '@agnos-ui/core';
+import {
+	createAccordion as coreCreateAccordion,
+	createAlert as coreCreateAlert,
+	createModal as coreCreateModal,
+	createPagination as coreCreatePagination,
+	createProgressbar as coreCreateProgressbar,
+	createRating as coreCreateRating,
+	createSelect as coreCreateSelect,
+} from '@agnos-ui/core';
 import type {AdaptSlotContentProps, AdaptWidgetSlots} from './lib/slotTypes';
 
-export type {SlotContent} from './lib/slotTypes';
-export type {WidgetsConfig} from './lib/config';
-
 export type AccordionWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionWidget>;
 export type AccordionProps = WidgetProps<AccordionWidget>;
 export type AccordionState = WidgetState<AccordionWidget>;
@@ -25,46 +32,43 @@ export type AccordionItemWidget = AdaptWidgetSlots<import('@agnos-ui/core').Acco
 export type AccordionItemProps = WidgetProps<AccordionItemWidget>;
 export type AccordionItemState = WidgetState<AccordionItemWidget>;
 export type AccordionItemContext = AdaptSlotContentProps<import('@agnos-ui/core').AccordionItemContext>;
-import {createAccordion as coreCreateAccordion} from '@agnos-ui/core';
 export const createAccordion: WidgetFactory<AccordionWidget> = coreCreateAccordion as any;
 
 export type AlertWidget = AdaptWidgetSlots<import('@agnos-ui/core').AlertWidget>;
 export type AlertProps = WidgetProps<AlertWidget>;
 export type AlertState = WidgetState<AlertWidget>;
 export type AlertContext = AdaptSlotContentProps<import('@agnos-ui/core').AlertContext>;
-import {createAlert as coreCreateAlert} from '@agnos-ui/core';
 export const createAlert: WidgetFactory<AlertWidget> = coreCreateAlert as any;
 
 export type ModalWidget = AdaptWidgetSlots<import('@agnos-ui/core').ModalWidget>;
 export type ModalProps = WidgetProps<ModalWidget>;
 export type ModalState = WidgetState<ModalWidget>;
 export type ModalContext = AdaptSlotContentProps<import('@agnos-ui/core').ModalContext>;
-import {createModal as coreCreateModal} from '@agnos-ui/core';
 export const createModal: WidgetFactory<ModalWidget> = coreCreateModal as any;
 
 export type PaginationWidget = AdaptWidgetSlots<import('@agnos-ui/core').PaginationWidget>;
 export type PaginationProps = WidgetProps<PaginationWidget>;
 export type PaginationState = WidgetState<PaginationWidget>;
 export type PaginationContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationContext>;
 export type PaginationNumberContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationNumberContext>;
-import {createPagination as coreCreatePagination} from '@agnos-ui/core';
 export const createPagination: WidgetFactory<PaginationWidget> = coreCreatePagination as any;
 
 export type RatingWidget = AdaptWidgetSlots<import('@agnos-ui/core').RatingWidget>;
 export type RatingProps = WidgetProps<RatingWidget>;
 export type RatingState = WidgetState<RatingWidget>;
-import {createRating as coreCreateRating} from '@agnos-ui/core';
 export const createRating: WidgetFactory<RatingWidget> = coreCreateRating as any;
 
 export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core').SelectWidget<Item>>;
 export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
 export type SelectState<Item> = WidgetState<SelectWidget<Item>>;
-import {createSelect as coreCreateSelect} from '@agnos-ui/core';
 export const createSelect: <Item>(propsConfig?: PropsConfig<SelectProps<Item>>) => SelectWidget<Item> = coreCreateSelect as any;
 
+export type SliderWidget = AdaptWidgetSlots<import('@agnos-ui/core').SliderWidget>;
+export type SliderProps = WidgetProps<SliderWidget>;
+export type SliderState = WidgetState<SliderWidget>;
+
 export type ProgressbarWidget = AdaptWidgetSlots<import('@agnos-ui/core').ProgressbarWidget>;
 export type ProgressbarProps = WidgetProps<ProgressbarWidget>;
 export type ProgressbarState = WidgetState<ProgressbarWidget>;
 export type ProgressbarContext = AdaptSlotContentProps<import('@agnos-ui/core').ProgressbarContext>;
-import {createProgressbar as coreCreateProgressbar} from '@agnos-ui/core';
 export const createProgressbar: WidgetFactory<ProgressbarWidget> = coreCreateProgressbar as any;

angular/lib/src/lib/agnos-ui-angular.module.ts

@@ -28,6 +28,7 @@ import {
 	AccordionBodyDirective,
 	AccordionItemStructureDirective,
 } from './accordion/accordion.component';
+import {SliderComponent} from './slider/slider.component';
 
 /* istanbul ignore next */
 const components = [
@@ -56,6 +57,7 @@ const components = [
 	AccordionHeaderDirective,
 	AccordionBodyDirective,
 	AccordionItemStructureDirective,
+	SliderComponent,
 ];
 
 @NgModule({