@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
228 lines (224 loc) • 12.3 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 { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/* eslint-disable @typescript-eslint/no-explicit-any */
const toggleComponent = cva([
'text-pretty',
'font-body',
'leading-normal',
'grid',
'place-content-center',
'rounded-full',
'border-[1px]',
'border-solid',
'transition-colors',
'focus-visible:outline',
'focus-visible:outline-2',
'focus-visible:outline-offset-2',
'active:transition-[color, scale, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke]',
'active:hover:scale-95',
'active:hover:animate-pop',
'active:hover:ease-out',
'active:hover:animate-duration-0',
'active:hover:animate-fill-mode-backwards',
'active:focus:scale-95',
'active:focus:animate-pop',
'active:focus:ease-out',
'active:focus:animate-duration-0',
'active:focus:animate-fill-mode-backwards',
], {
variants: {
variant: {
primary: [
'border-secondary',
'text-base-content',
'hover:border-primary',
'hover:bg-primary/40',
'hover:text-base-content',
'hover:active:bg-primary/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-primary',
'hover:active:focus-visible:outline-primary',
'hover:active:text-primary-content',
'cursor-pointer',
],
'primary-toggled': ['bg-primary', 'border-primary', 'text-primary-content', 'hover:bg-primary/40', 'cursor-pointer'],
'primary-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
secondary: [
'border-secondary',
'text-base-content',
'hover:border-secondary',
'hover:bg-secondary/40',
'hover:text-base-content',
'hover:active:bg-secondary/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-secondary',
'hover:active:focus-visible:outline-secondary',
'hover:active:text-secondary-content',
'cursor-pointer',
],
'secondary-toggled': ['bg-secondary', 'border-secondary', 'text-secondary-content', 'hover:bg-secondary/40', 'cursor-pointer'],
'secondary-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
success: [
'border-secondary',
'text-base-content',
'hover:border-success',
'hover:bg-success/40',
'hover:text-base-content',
'hover:active:bg-success/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-success',
'hover:active:focus-visible:outline-success',
'hover:active:text-success-content',
'cursor-pointer',
],
'success-toggled': ['bg-success', 'border-success', 'text-success-content', 'hover:bg-success/40', 'cursor-pointer'],
'success-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
error: [
'border-secondary',
'text-base-content',
'hover:border-error',
'hover:bg-error/40',
'hover:text-base-content',
'hover:active:bg-error/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-error',
'hover:active:focus-visible:outline-error',
'hover:active:text-error-content',
'cursor-pointer',
],
'error-toggled': ['bg-error', 'border-error', 'text-error-content', 'hover:bg-error/40', 'cursor-pointer'],
'error-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
warning: [
'border-secondary',
'text-base-content',
'hover:border-warning',
'hover:bg-warning/40',
'hover:text-base-content',
'hover:active:bg-warning/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-warning',
'hover:active:focus-visible:outline-warning',
'hover:active:text-warning-content',
'cursor-pointer',
],
'warning-toggled': ['bg-warning', 'border-warning', 'text-warning-content', 'hover:bg-warning/40', 'cursor-pointer'],
'warning-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
info: [
'border-secondary',
'text-base-content',
'hover:border-info',
'hover:bg-info/40',
'hover:text-base-content',
'hover:active:bg-info/100',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-info',
'hover:active:focus-visible:outline-info',
'hover:active:text-primary-content',
'cursor-pointer',
],
'info-toggled': ['bg-info', 'border-info', 'text-info-content', 'hover:bg-info/40', 'cursor-pointer'],
'info-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
accent: [
'border-secondary',
'text-base-content',
'hover:border-accent',
'hover:bg-accent/40',
'hover:text-base-content/100',
'hover:active:bg-accent',
'focus-visible:outline-secondary',
'hover:focus-visible:outline-accent',
'hover:active:focus-visible:outline-accent',
'hover:active:text-accent-content',
'cursor-pointer',
],
'accent-toggled': ['bg-accent', 'border-accent', 'text-accent-content', 'hover:bg-accent/40', 'cursor-pointer'],
'accent-disabled': ['border-secondary/50', 'text-base-content/50', 'cursor-not-allowed'],
},
size: {
sm: ['h-10', 'w-10'],
md: ['h-11', 'w-11'],
lg: ['h-12', 'w-12'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'secondary',
size: 'sm',
},
});
class ToggleComponent {
// Base checkbox properties
variant = input();
size = input();
classes = input('');
label = input('');
name = input(null);
value = model(false);
// ControlValueAccessor attributes
onControlChange = () => { };
onControlTouch = () => { };
disabled = model(false);
// ControlValueAccessor methods
writeValue(obj) {
this.value.set(obj);
}
registerOnChange(fn) {
this.onControlChange = fn;
}
registerOnTouched(fn) {
this.onControlTouch = fn;
}
handleToggle() {
this.value.set(!this.value());
this.handleChange();
}
// Change handler
valueUpdated = output();
handleChange() {
this.onControlChange(this.value());
this.valueUpdated.emit(this.value());
}
// Blur handler
handleBlur() {
this.onControlTouch();
}
// classes
componentClass = computed(() => {
const baseVariant = this.variant() ?? 'primary';
const variantSuffix = this.disabled() ? '-disabled' : this.value() ? '-toggled' : '';
const variant = (variantSuffix ? `${baseVariant}${variantSuffix}` : baseVariant);
return cn(toggleComponent({
variant,
size: this.size(),
class: this.classes(),
}));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", 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", disabled: "disabledChange", valueUpdated: "valueUpdated" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: ToggleComponent,
multi: true,
},
], ngImport: i0, template: "@let disabledVar = disabled();\n<label class=\"flex cursor-pointer items-center justify-start gap-4\">\n\t<input\n\t\tclass=\"hidden\"\n\t\ttype=\"checkbox\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabledVar\"\n\t\t[attr.name]=\"name()\"\n\t\t(change)=\"handleChange()\"\n\t\t(blur)=\"handleBlur()\"\n\t/>\n\t<button [class]=\"componentClass()\" (click)=\"handleToggle()\" [disabled]=\"disabledVar\">\n\t\t<span typography [tyVariant]=\"'body'\" [tyColor]=\"'inherit'\">\n\t\t\t{{ label() }}\n\t\t</span>\n\t</button>\n</label>\n", styles: [""], 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"] }, { kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'st-toggle', imports: [FormsModule, TypographyDirective], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: ToggleComponent,
multi: true,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let disabledVar = disabled();\n<label class=\"flex cursor-pointer items-center justify-start gap-4\">\n\t<input\n\t\tclass=\"hidden\"\n\t\ttype=\"checkbox\"\n\t\t[(ngModel)]=\"value\"\n\t\t[disabled]=\"disabledVar\"\n\t\t[attr.name]=\"name()\"\n\t\t(change)=\"handleChange()\"\n\t\t(blur)=\"handleBlur()\"\n\t/>\n\t<button [class]=\"componentClass()\" (click)=\"handleToggle()\" [disabled]=\"disabledVar\">\n\t\t<span typography [tyVariant]=\"'body'\" [tyColor]=\"'inherit'\">\n\t\t\t{{ label() }}\n\t\t</span>\n\t</button>\n</label>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ToggleComponent, toggleComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-forms-toggle.mjs.map