@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
1 lines • 9.13 kB
Source Map (JSON)
{"version":3,"file":"sixbell-telco-sdk-components-forms-radio.mjs","sources":["../../../projects/sdk/components/forms/radio/src/radio.component.ts","../../../projects/sdk/components/forms/radio/src/radio.component.html","../../../projects/sdk/components/forms/radio/sixbell-telco-sdk-components-forms-radio.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 radio button classes with style variants\n */\nconst radioComponent = cva(['radio', 'font-body'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: ['radio-primary'],\n\t\t\tsecondary: ['radio-secondary'],\n\t\t\ttertiary: ['radio-tertiary'],\n\t\t\taccent: ['radio-accent'],\n\t\t\tsuccess: ['radio-success'],\n\t\t\twarning: ['radio-warning'],\n\t\t\tinfo: ['radio-info'],\n\t\t\terror: ['radio-error'],\n\t\t},\n\t\tsize: {\n\t\t\txs: ['radio-xs'],\n\t\t\tsm: ['radio-sm'],\n\t\t\tmd: ['radio-md'],\n\t\t\tlg: ['radio-lg'],\n\t\t\txl: ['radio-xl'],\n\t\t},\n\t},\n\tcompoundVariants: [],\n\tdefaultVariants: {\n\t\tvariant: 'primary',\n\t\tsize: 'md',\n\t},\n});\n\n/** Possible radio button color variants */\nexport type RadioVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'info' | 'error' | null | undefined;\n\n/** Possible radio button size variants */\nexport type RadioSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;\n\n/** Configuration object for radio button styling */\nexport type RadioProps = {\n\tvariant?: RadioVariantProps;\n\tsize?: RadioSizeProps;\n};\n\n/**\n * A customizable radio button component with form integration\n *\n * @remarks\n * Implements ControlValueAccessor for seamless Angular form integration.\n * Supports grouped radio buttons through name attribute binding.\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <st-radio value=\"option1\" [(selected)]=\"selectedOption\"></st-radio>\n * ```\n *\n * @example\n * ```html\n * <!-- Grouped radio buttons with labels -->\n * <st-radio\n * variant=\"success\"\n * size=\"lg\"\n * label=\"Option 1\"\n * value=\"opt1\"\n * name=\"options\"\n * [(selected)]=\"selectedOption\"\n * ></st-radio>\n * <st-radio\n * variant=\"success\"\n * size=\"lg\"\n * label=\"Option 2\"\n * value=\"opt2\"\n * name=\"options\"\n * [(selected)]=\"selectedOption\"\n * ></st-radio>\n * ```\n */\n@Component({\n\tselector: 'st-radio',\n\timports: [FormsModule],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioComponent,\n\t\t\tmulti: true,\n\t\t},\n\t],\n\ttemplateUrl: './radio.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioComponent implements ControlValueAccessor {\n\t/**\n\t * Radio button color variant\n\t * @defaultValue 'primary'\n\t */\n\tvariant = input<RadioVariantProps>('primary');\n\n\t/**\n\t * Radio button size variant\n\t * @defaultValue 'md'\n\t */\n\tsize = input<RadioSizeProps>('md');\n\n\t/**\n\t * Label text displayed next to the radio button\n\t */\n\tlabel = input<string>('');\n\n\t/**\n\t * Group name for radio button selection\n\t */\n\tname = input<string | null>(null);\n\n\t/**\n\t * The value associated with this radio button\n\t */\n\tvalue = input.required<any>();\n\n\t/**\n\t * Two-way bindable selected value for radio group\n\t */\n\tselected = model<any>();\n\n\t/**\n\t * Event emitted when radio button is selected\n\t */\n\tvalueUpdated = output<any>();\n\n\t// ControlValueAccessor implementation\n\tprivate onControlChange: any = () => {};\n\tprivate onControlTouch: any = () => {};\n\n\t/**\n\t * Whether the radio button is disabled\n\t * @defaultValue false\n\t */\n\tdisabled = model<boolean>(false);\n\n\t/**\n\t * @internal\n\t * Computed class string for the radio button\n\t */\n\tcomponentClass = computed(() => {\n\t\treturn cn(\n\t\t\tradioComponent({\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.selected.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 radio button selection changes\n\t */\n\thandleChange(): void {\n\t\tthis.onControlChange(this.value());\n\t\tthis.valueUpdated.emit(this.value());\n\t\tthis.selected.set(this.value());\n\t}\n\n\t/**\n\t * @internal\n\t * Handles blur event\n\t */\n\thandleBlur() {\n\t\tthis.onControlTouch();\n\t}\n}\n","<label class=\"fieldset-label text-base-content font-body\">\n\t<input\n\t\ttype=\"radio\"\n\t\t[class]=\"componentClass()\"\n\t\t[value]=\"value()\"\n\t\t[checked]=\"selected() === value()\"\n\t\t[disabled]=\"disabled()\"\n\t\t[attr.name]=\"name()\"\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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"}