@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
203 lines (199 loc) • 10.4 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* @internal
* Generates base range slider classes with style variants
*/
const rangeComponent = cva(['range', 'grow', 'font-body', 'text-pretty', 'w-full'], {
variants: {
variant: {
primary: ['range-primary'],
secondary: ['range-secondary'],
tertiary: ['range-tertiary'],
success: ['range-success'],
info: ['range-info'],
error: ['range-error'],
warning: ['range-warning'],
accent: ['range-accent'],
},
size: {
xs: ['range-xs'],
sm: ['range-sm'],
md: ['range-md'],
lg: ['range-mlg'],
xl: ['range-xl'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
size: 'xs',
},
});
/**
* A customizable range slider component with form integration
*
* @remarks
* Implements ControlValueAccessor for seamless Angular form integration.
* Supports step markers and custom styling variants.
*
* @example
* ```html
* <!-- Basic usage -->
* <st-range [(value)]="sliderValue"></st-range>
* ```
*
* @example
* <!-- With form integration and steps -->
* <st-range
* variant="accent"
* size="lg"
* label="Volume"
* [min]="0"
* [max]="100"
* [steps]="4"
* [parentForm]="audioForm"
* formControlName="volume"
* ></st-range>
* ```
*/
class RangeComponent {
/**
* Range slider color variant
* @defaultValue 'primary'
*/
variant = input('primary');
/**
* Range slider size variant
* @defaultValue 'xs'
*/
size = input('xs');
/**
* Label text displayed with the range slider
*/
label = input('');
/**
* HTML name attribute for the range slider
*/
name = input(null);
/**
* Minimum value of the range slider
* @defaultValue 0
*/
min = input(0);
/**
* Maximum value of the range slider
* @defaultValue 100
*/
max = input(100);
/**
* Whether to show min/max values
* @defaultValue true
*/
showRange = input(true);
/**
* Number of steps to display (0 for continuous)
* @defaultValue 0
*/
steps = input(0);
/**
* @internal
* Computed array of step markers
*/
stepsQuantity = computed(() => Array.from({ length: this.steps() + 1 }));
/**
* @internal
* Computed size between steps
*/
jumpSize = computed(() => (this.max() - this.min()) / this.steps());
/**
* Two-way bindable range value
*/
value = model(0);
/**
* Parent form group for reactive forms
*/
parentForm = input(null);
/**
* Form control name for reactive forms
*/
formControlName = input('');
/**
* @internal
* Gets the associated FormControl instance
*/
get formField() {
if (!this.parentForm())
return null;
return this.parentForm()?.get(this.formControlName());
}
// ControlValueAccessor implementation
onControlChange = () => { };
onControlTouch = () => { };
/**
* Whether the range slider is disabled
* @defaultValue false
*/
disabled = model(false);
/**
* Event emitted when range value changes
*/
valueUpdated = output();
/**
* @internal
* Computed class string for the range slider
*/
componentClass = computed(() => cn(rangeComponent({
variant: this.variant(),
size: this.size(),
})));
// ControlValueAccessor methods
writeValue(obj) {
this.value.set(obj);
}
registerOnChange(fn) {
this.onControlChange = fn;
}
registerOnTouched(fn) {
this.onControlTouch = fn;
}
setDisabledState(isDisabled) {
this.disabled.set(isDisabled);
}
/**
* @internal
* Handles range value changes
*/
handleChange() {
this.onControlChange(this.value());
this.valueUpdated.emit(this.value());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: RangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: RangeComponent, isStandalone: true, selector: "st-range", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", valueUpdated: "valueUpdated" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: RangeComponent,
multi: true,
},
], ngImport: i0, template: "@if (label()) {\n\t<label class=\"fieldset-label text-base-content font-body text-pretty\" [for]=\"this.name()\">\n\t\t{{ label() }}\n\t</label>\n}\n\n<div class=\"font-body w-full text-pretty\">\n\t<input\n\t\t[class]=\"componentClass()\"\n\t\t[attr.name]=\"name()\"\n\t\ttype=\"range\"\n\t\t[min]=\"min()\"\n\t\t[max]=\"max()\"\n\t\t[step]=\"jumpSize()\"\n\t\t[value]=\"value()\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabled()\"\n\t\t(ngModelChange)=\"handleChange()\"\n\t/>\n\t@if (steps() > 0 && !showRange()) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t@for (step of stepsQuantity(); track $index) {\n\t\t\t\t<span>|</span>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showRange() && steps() <= 0) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t<span>{{ min() }}</span>\n\t\t\t<span>{{ max() }}</span>\n\t\t</div>\n\t}\n\n\t@if (showRange() && steps() > 0) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t<span>{{ min() }}</span>\n\t\t\t@for (step of stepsQuantity(); track $index) {\n\t\t\t\t<span>|</span>\n\t\t\t}\n\t\t\t<span>{{ max() }}</span>\n\t\t</div>\n\t}\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: RangeComponent, decorators: [{
type: Component,
args: [{ selector: 'st-range', imports: [FormsModule], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: RangeComponent,
multi: true,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n\t<label class=\"fieldset-label text-base-content font-body text-pretty\" [for]=\"this.name()\">\n\t\t{{ label() }}\n\t</label>\n}\n\n<div class=\"font-body w-full text-pretty\">\n\t<input\n\t\t[class]=\"componentClass()\"\n\t\t[attr.name]=\"name()\"\n\t\ttype=\"range\"\n\t\t[min]=\"min()\"\n\t\t[max]=\"max()\"\n\t\t[step]=\"jumpSize()\"\n\t\t[value]=\"value()\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabled()\"\n\t\t(ngModelChange)=\"handleChange()\"\n\t/>\n\t@if (steps() > 0 && !showRange()) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t@for (step of stepsQuantity(); track $index) {\n\t\t\t\t<span>|</span>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showRange() && steps() <= 0) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t<span>{{ min() }}</span>\n\t\t\t<span>{{ max() }}</span>\n\t\t</div>\n\t}\n\n\t@if (showRange() && steps() > 0) {\n\t\t<div class=\"mt-2 flex justify-between px-2.5 text-xs\">\n\t\t\t<span>{{ min() }}</span>\n\t\t\t@for (step of stepsQuantity(); track $index) {\n\t\t\t\t<span>|</span>\n\t\t\t}\n\t\t\t<span>{{ max() }}</span>\n\t\t</div>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RangeComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-forms-range.mjs.map