UNPKG

@sixbell-telco/sdk

Version:

A collection of reusable components designed for use in Sixbell Telco Angular projects

1 lines 9.03 kB
{"version":3,"file":"sixbell-telco-sdk-components-forms-switch.mjs","sources":["../../../projects/sdk/components/forms/switch/src/switch.component.ts","../../../projects/sdk/components/forms/switch/src/switch.component.html","../../../projects/sdk/components/forms/switch/sixbell-telco-sdk-components-forms-switch.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\n\n/**\n * @internal\n * Generates base switch classes with style variants\n */\nconst switchComponent = cva(['toggle', 'bg-base-100'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: ['toggle-primary'],\n\t\t\tsecondary: ['toggle-secondary'],\n\t\t\ttertiary: ['toggle-tertiary'],\n\t\t\taccent: ['toggle-accent'],\n\t\t\tinfo: ['toggle-info'],\n\t\t\tsuccess: ['toggle-success'],\n\t\t\terror: ['toggle-error'],\n\t\t\twarning: ['toggle-warning'],\n\t\t},\n\t\tsize: {\n\t\t\txs: ['toggle-xs'],\n\t\t\tsm: ['toggle-sm'],\n\t\t\tmd: ['toggle-md'],\n\t\t\tlg: ['toggle-lg'],\n\t\t\txl: ['toggle-xl'],\n\t\t},\n\t},\n\tcompoundVariants: [],\n\tdefaultVariants: {\n\t\tvariant: 'primary',\n\t\tsize: 'md',\n\t},\n});\n\n/** Possible switch style variants */\nexport type SwitchVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'error' | 'warning' | null | undefined;\n\n/** Possible switch size variants */\nexport type SwitchSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;\n\n/** Configuration object for switch styling */\nexport type SwitchProps = {\n\tvariant?: SwitchVariantProps;\n\tsize?: SwitchSizeProps;\n};\n\n/**\n * A customizable switch/toggle component with form integration\n *\n * @remarks\n * Implements ControlValueAccessor for Angular form compatibility.\n * Supports various style variants and sizes through Tailwind CSS.\n *\n * @example\n * ```html\n * <!-- Basic standalone usage -->\n * <st-switch [(value)]=\"isEnabled\"></st-switch>\n * ```\n *\n * @example\n * ```html\n * <!-- With form integration -->\n * <st-switch\n * [parentForm]=\"settingsForm\"\n * formControlName=\"darkMode\"\n * label=\"Dark Mode\"\n * ></st-switch>\n * ```\n */\n@Component({\n\tselector: 'st-switch',\n\timports: [FormsModule],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: SwitchComponent,\n\t\t\tmulti: true,\n\t\t},\n\t],\n\ttemplateUrl: './switch.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SwitchComponent implements ControlValueAccessor {\n\t/**\n\t * Switch style variant\n\t * @defaultValue 'primary'\n\t */\n\tvariant = input<SwitchVariantProps>('primary');\n\n\t/**\n\t * Switch size variant\n\t * @defaultValue 'md'\n\t */\n\tsize = input<SwitchSizeProps>('md');\n\n\t/**\n\t * Label text displayed next to the switch\n\t */\n\tlabel = input<string>('');\n\n\t/**\n\t * HTML name attribute for the switch\n\t */\n\tname = input<string | null>(null);\n\n\t/**\n\t * Two-way bindable switch state\n\t */\n\tvalue = model<boolean>(false);\n\n\t/**\n\t * Event emitted when switch loses focus\n\t */\n\tblurred = output<boolean>();\n\n\t// ControlValueAccessor implementation\n\t/** @internal */\n\tprivate onControlChange: any = () => {};\n\t/** @internal */\n\tprivate onControlTouch: any = () => {};\n\n\t/**\n\t * Whether the switch is disabled\n\t * @defaultValue false\n\t */\n\tdisabled = model<boolean>(false);\n\n\t/**\n\t * Event emitted when switch state changes\n\t */\n\tvalueUpdated = output<boolean>();\n\n\t/**\n\t * @internal\n\t * Computed base switch classes\n\t */\n\tcomponentClass = computed(() =>\n\t\tcn(\n\t\t\tswitchComponent({\n\t\t\t\tvariant: this.variant(),\n\t\t\t\tsize: this.size(),\n\t\t\t}),\n\t\t),\n\t);\n\n\t// ControlValueAccessor methods\n\twriteValue(obj: any): void {\n\t\tthis.value.set(obj);\n\t}\n\n\tregisterOnChange(fn: any): void {\n\t\tthis.onControlChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any): void {\n\t\tthis.onControlTouch = fn;\n\t}\n\n\tsetDisabledState(isDisabled: boolean): void {\n\t\tthis.disabled.set(isDisabled);\n\t}\n\n\t/**\n\t * @internal\n\t * Handles state changes\n\t */\n\thandleChange(): void {\n\t\tthis.onControlChange(this.value());\n\t\tthis.valueUpdated.emit(this.value());\n\t}\n\n\t/**\n\t * @internal\n\t * Handles blur event\n\t */\n\thandleBlur() {\n\t\tthis.blurred.emit(this.value());\n\t\tthis.onControlTouch();\n\t}\n}\n","<label class=\"fieldset-label text-base-content font-body text-pretty\">\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}