@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
166 lines (162 loc) • 6.77 kB
JavaScript
import * as i0 from '@angular/core';
import { input, model, output, computed, 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 switch classes with style variants
*/
const switchComponent = cva(['toggle', 'bg-base-100'], {
variants: {
variant: {
primary: ['toggle-primary'],
secondary: ['toggle-secondary'],
tertiary: ['toggle-tertiary'],
accent: ['toggle-accent'],
info: ['toggle-info'],
success: ['toggle-success'],
error: ['toggle-error'],
warning: ['toggle-warning'],
},
size: {
xs: ['toggle-xs'],
sm: ['toggle-sm'],
md: ['toggle-md'],
lg: ['toggle-lg'],
xl: ['toggle-xl'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
size: 'md',
},
});
/**
* A customizable switch/toggle component with form integration
*
* @remarks
* Implements ControlValueAccessor for Angular form compatibility.
* Supports various style variants and sizes through Tailwind CSS.
*
* @example
* ```html
* <!-- Basic standalone usage -->
* <st-switch [(value)]="isEnabled"></st-switch>
* ```
*
* @example
* ```html
* <!-- With form integration -->
* <st-switch
* [parentForm]="settingsForm"
* formControlName="darkMode"
* label="Dark Mode"
* ></st-switch>
* ```
*/
class SwitchComponent {
/**
* Switch style variant
* @defaultValue 'primary'
*/
variant = input('primary');
/**
* Switch size variant
* @defaultValue 'md'
*/
size = input('md');
/**
* Label text displayed next to the switch
*/
label = input('');
/**
* HTML name attribute for the switch
*/
name = input(null);
/**
* Two-way bindable switch state
*/
value = model(false);
/**
* Event emitted when switch loses focus
*/
blurred = output();
// ControlValueAccessor implementation
/** @internal */
onControlChange = () => { };
/** @internal */
onControlTouch = () => { };
/**
* Whether the switch is disabled
* @defaultValue false
*/
disabled = model(false);
/**
* Event emitted when switch state changes
*/
valueUpdated = output();
/**
* @internal
* Computed base switch classes
*/
componentClass = computed(() => cn(switchComponent({
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 state changes
*/
handleChange() {
this.onControlChange(this.value());
this.valueUpdated.emit(this.value());
}
/**
* @internal
* Handles blur event
*/
handleBlur() {
this.blurred.emit(this.value());
this.onControlTouch();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: SwitchComponent, isStandalone: true, selector: "st-switch", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred", disabled: "disabledChange", valueUpdated: "valueUpdated" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: SwitchComponent,
multi: true,
},
], ngImport: i0, template: "<label class=\"fieldset-label text-base-content font-body\">\n\t<input\n\t\ttype=\"checkbox\"\n\t\t[class]=\"componentClass()\"\n\t\t[attr.name]=\"name()\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabled()\"\n\t\t(change)=\"handleChange()\"\n\t\t(blur)=\"handleBlur()\"\n\t/>\n\t{{ label() }}\n</label>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'st-switch', imports: [FormsModule], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: SwitchComponent,
multi: true,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"fieldset-label text-base-content font-body\">\n\t<input\n\t\ttype=\"checkbox\"\n\t\t[class]=\"componentClass()\"\n\t\t[attr.name]=\"name()\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabled()\"\n\t\t(change)=\"handleChange()\"\n\t\t(blur)=\"handleBlur()\"\n\t/>\n\t{{ label() }}\n</label>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SwitchComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-forms-switch.mjs.map