ngx-com 0.0.19 → 0.0.21

package/fesm2022/ngx-com-components-switch.mjs

@@ -0,0 +1,258 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { cva } from 'class-variance-authority';
+
+/**
+ * CVA variants for the switch track (pill-shaped container).
+ *
+ * Uses `peer` selectors to style based on native input state:
+ * - `peer-checked:` for on state
+ * - `peer-focus-visible:` for keyboard focus
+ * - `peer-disabled:` for disabled state
+ *
+ * @tokens `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-muted`, `--color-muted-hover`,
+ *         `--color-disabled`, `--color-ring`, `--radius-pill`
+ */
+const switchTrackVariants = cva([
+    'com-switch__track',
+    'relative inline-flex shrink-0 cursor-pointer items-center',
+    'rounded-pill border-2 border-transparent',
+    'transition-colors duration-150',
+    'bg-muted hover:bg-muted-hover',
+    'peer-focus-visible:outline-[1px] peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring',
+    'peer-disabled:cursor-not-allowed peer-disabled:bg-disabled peer-disabled:hover:bg-disabled',
+], {
+    variants: {
+        variant: {
+            primary: [
+                'peer-checked:bg-primary peer-checked:hover:bg-primary-hover',
+                'peer-disabled:peer-checked:bg-disabled',
+            ],
+            accent: [
+                'peer-checked:bg-accent peer-checked:hover:bg-accent-hover',
+                'peer-disabled:peer-checked:bg-disabled',
+            ],
+            warn: [
+                'peer-checked:bg-warn peer-checked:hover:bg-warn-hover',
+                'peer-disabled:peer-checked:bg-disabled',
+            ],
+        },
+        size: {
+            sm: 'h-5 w-9',
+            md: 'h-6 w-11',
+            lg: 'h-7 w-13',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+    },
+});
+/** Size-based classes for the sliding thumb. */
+const SWITCH_THUMB_SIZES = {
+    sm: 'size-4',
+    md: 'size-5',
+    lg: 'size-6',
+};
+/** Size-based translate classes applied when the switch is checked. */
+const SWITCH_THUMB_TRANSLATE = {
+    sm: 'translate-x-4',
+    md: 'translate-x-5',
+    lg: 'translate-x-6',
+};
+/** Size-based classes for the label content. */
+const SWITCH_LABEL_SIZES = {
+    sm: 'text-sm ms-2',
+    md: 'text-base ms-2.5',
+    lg: 'text-lg ms-3',
+};
+
+/** Auto-incrementing ID counter for unique switch IDs. */
+let nextId = 0;
+/**
+ * Toggle switch component with full accessibility support.
+ *
+ * Uses a native `<input type="checkbox" role="switch">` for built-in keyboard
+ * handling, `:checked` pseudo-class, and screen reader support.
+ *
+ * Implements `ControlValueAccessor` for Reactive Forms integration via
+ * `NgControl` injection pattern (no `NG_VALUE_ACCESSOR` provider).
+ *
+ * @tokens `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-muted`, `--color-muted-hover`,
+ *         `--color-background`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--radius-pill`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-switch [(checked)]="darkMode">Dark mode</com-switch>
+ * ```
+ *
+ * @example With reactive forms
+ * ```html
+ * <com-switch formControlName="notifications">Push notifications</com-switch>
+ * ```
+ *
+ * @example Variants and sizes
+ * ```html
+ * <com-switch variant="accent" size="lg">Large accent switch</com-switch>
+ * <com-switch variant="warn" size="sm">Small warning switch</com-switch>
+ * ```
+ */
+class ComSwitch {
+    /** Optional NgControl for reactive forms integration. */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    /** Reference to the native input element. */
+    inputRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    /** Unique ID for this switch instance. */
+    uniqueId = `com-switch-${nextId++}`;
+    // Inputs
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : {}), alias: 'aria-describedby' });
+    // Outputs
+    changed = output();
+    // Computed state
+    inputId = computed(() => this.id() ?? this.uniqueId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    trackClasses = computed(() => switchTrackVariants({ variant: this.variant(), size: this.size() }), ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+    thumbClasses = computed(() => {
+        const base = `pointer-events-none block rounded-pill bg-background shadow-sm transition-transform duration-150 ${SWITCH_THUMB_SIZES[this.size()]}`;
+        return this.checked() ? `${base} ${SWITCH_THUMB_TRANSLATE[this.size()]}` : base;
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    labelClasses = computed(() => `com-switch__label select-none peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground ${SWITCH_LABEL_SIZES[this.size()]}`, ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    // CVA callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.checked.set(value ?? false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // Event handlers
+    onInputChange(event) {
+        const input = event.target;
+        const newChecked = input.checked;
+        this.checked.set(newChecked);
+        this.onChange(newChecked);
+        this.changed.emit({ checked: newChecked, source: this });
+    }
+    // Public API
+    /** Focuses this switch's input element. */
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Toggles the switch state programmatically. */
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const newChecked = !this.checked();
+        this.checked.set(newChecked);
+        this.onChange(newChecked);
+        this.changed.emit({ checked: newChecked, source: this });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ComSwitch, isStandalone: true, selector: "com-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", changed: "changed" }, host: { properties: { "class.com-switch--disabled": "disabled()", "class.com-switch--checked": "checked()" }, classAttribute: "com-switch inline-block align-middle" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], exportAs: ["comSwitch"], ngImport: i0, template: `
+    <label
+      class="group relative inline-flex items-center"
+      [class.cursor-pointer]="!disabled()"
+      [class.cursor-not-allowed]="disabled()"
+    >
+      <input
+        #inputElement
+        type="checkbox"
+        role="switch"
+        class="peer sr-only"
+        [id]="inputId()"
+        [checked]="checked()"
+        [disabled]="disabled()"
+        [attr.name]="name()"
+        [attr.value]="value()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        (change)="onInputChange($event)"
+        (blur)="onTouched()"
+      />
+      <span [class]="trackClasses()">
+        <span [class]="thumbClasses()"></span>
+      </span>
+      <span [class]="labelClasses()">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-switch', exportAs: 'comSwitch', template: `
+    <label
+      class="group relative inline-flex items-center"
+      [class.cursor-pointer]="!disabled()"
+      [class.cursor-not-allowed]="disabled()"
+    >
+      <input
+        #inputElement
+        type="checkbox"
+        role="switch"
+        class="peer sr-only"
+        [id]="inputId()"
+        [checked]="checked()"
+        [disabled]="disabled()"
+        [attr.name]="name()"
+        [attr.value]="value()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        (change)="onInputChange($event)"
+        (blur)="onTouched()"
+      />
+      <span [class]="trackClasses()">
+        <span [class]="thumbClasses()"></span>
+      </span>
+      <span [class]="labelClasses()">
+        <ng-content />
+      </span>
+    </label>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'com-switch inline-block align-middle',
+                        '[class.com-switch--disabled]': 'disabled()',
+                        '[class.com-switch--checked]': 'checked()',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+// Public API for the switch component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComSwitch, SWITCH_LABEL_SIZES, SWITCH_THUMB_SIZES, SWITCH_THUMB_TRANSLATE, switchTrackVariants };
+//# sourceMappingURL=ngx-com-components-switch.mjs.map

package/fesm2022/ngx-com-components-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-switch.mjs","sources":["../../../projects/com/components/switch/switch.variants.ts","../../../projects/com/components/switch/switch.component.ts","../../../projects/com/components/switch/index.ts","../../../projects/com/components/switch/ngx-com-components-switch.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/** Switch size variants. */\nexport type SwitchSize = 'sm' | 'md' | 'lg';\n\n/** Switch color variants. */\nexport type SwitchVariant = 'primary' | 'accent' | 'warn';\n\n/**\n * CVA variants for the switch track (pill-shaped container).\n *\n * Uses `peer` selectors to style based on native input state:\n * - `peer-checked:` for on state\n * - `peer-focus-visible:` for keyboard focus\n * - `peer-disabled:` for disabled state\n *\n * @tokens `--color-primary`, `--color-primary-hover`,\n *         `--color-accent`, `--color-accent-hover`,\n *         `--color-warn`, `--color-warn-hover`,\n *         `--color-muted`, `--color-muted-hover`,\n *         `--color-disabled`, `--color-ring`, `--radius-pill`\n */\nexport const switchTrackVariants: (props?: {\n  variant?: SwitchVariant;\n  size?: SwitchSize;\n}) => string = cva(\n  [\n    'com-switch__track',\n    'relative inline-flex shrink-0 cursor-pointer items-center',\n    'rounded-pill border-2 border-transparent',\n    'transition-colors duration-150',\n    'bg-muted hover:bg-muted-hover',\n    'peer-focus-visible:outline-[1px] peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring',\n    'peer-disabled:cursor-not-allowed peer-disabled:bg-disabled peer-disabled:hover:bg-disabled',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'peer-checked:bg-primary peer-checked:hover:bg-primary-hover',\n          'peer-disabled:peer-checked:bg-disabled',\n        ],\n        accent: [\n          'peer-checked:bg-accent peer-checked:hover:bg-accent-hover',\n          'peer-disabled:peer-checked:bg-disabled',\n        ],\n        warn: [\n          'peer-checked:bg-warn peer-checked:hover:bg-warn-hover',\n          'peer-disabled:peer-checked:bg-disabled',\n        ],\n      },\n      size: {\n        sm: 'h-5 w-9',\n        md: 'h-6 w-11',\n        lg: 'h-7 w-13',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n);\n\n/** Size-based classes for the sliding thumb. */\nexport const SWITCH_THUMB_SIZES: Record<SwitchSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/** Size-based translate classes applied when the switch is checked. */\nexport const SWITCH_THUMB_TRANSLATE: Record<SwitchSize, string> = {\n  sm: 'translate-x-4',\n  md: 'translate-x-5',\n  lg: 'translate-x-6',\n};\n\n/** Size-based classes for the label content. */\nexport const SWITCH_LABEL_SIZES: Record<SwitchSize, string> = {\n  sm: 'text-sm ms-2',\n  md: 'text-base ms-2.5',\n  lg: 'text-lg ms-3',\n};\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type {\n  InputSignal,\n  ModelSignal,\n  OutputEmitterRef,\n  Signal,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport type { ControlValueAccessor } from '@angular/forms';\nimport {\n  switchTrackVariants,\n  SWITCH_THUMB_SIZES,\n  SWITCH_THUMB_TRANSLATE,\n  SWITCH_LABEL_SIZES,\n} from './switch.variants';\nimport type { SwitchSize, SwitchVariant } from './switch.variants';\n\n/** Event emitted when switch state changes. */\nexport interface SwitchChange {\n  checked: boolean;\n  source: ComSwitch;\n}\n\n/** Auto-incrementing ID counter for unique switch IDs. */\nlet nextId = 0;\n\n/**\n * Toggle switch component with full accessibility support.\n *\n * Uses a native `<input type=\"checkbox\" role=\"switch\">` for built-in keyboard\n * handling, `:checked` pseudo-class, and screen reader support.\n *\n * Implements `ControlValueAccessor` for Reactive Forms integration via\n * `NgControl` injection pattern (no `NG_VALUE_ACCESSOR` provider).\n *\n * @tokens `--color-primary`, `--color-primary-hover`,\n *         `--color-accent`, `--color-accent-hover`,\n *         `--color-warn`, `--color-warn-hover`,\n *         `--color-muted`, `--color-muted-hover`,\n *         `--color-background`, `--color-disabled`, `--color-disabled-foreground`,\n *         `--color-ring`, `--radius-pill`\n *\n * @example Basic usage\n * ```html\n * <com-switch [(checked)]=\"darkMode\">Dark mode</com-switch>\n * ```\n *\n * @example With reactive forms\n * ```html\n * <com-switch formControlName=\"notifications\">Push notifications</com-switch>\n * ```\n *\n * @example Variants and sizes\n * ```html\n * <com-switch variant=\"accent\" size=\"lg\">Large accent switch</com-switch>\n * <com-switch variant=\"warn\" size=\"sm\">Small warning switch</com-switch>\n * ```\n */\n@Component({\n  selector: 'com-switch',\n  exportAs: 'comSwitch',\n  template: `\n    <label\n      class=\"group relative inline-flex items-center\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <input\n        #inputElement\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"peer sr-only\"\n        [id]=\"inputId()\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"name()\"\n        [attr.value]=\"value()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-describedby]=\"ariaDescribedby()\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onTouched()\"\n      />\n      <span [class]=\"trackClasses()\">\n        <span [class]=\"thumbClasses()\"></span>\n      </span>\n      <span [class]=\"labelClasses()\">\n        <ng-content />\n      </span>\n    </label>\n  `,\n  styles: `\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'com-switch inline-block align-middle',\n    '[class.com-switch--disabled]': 'disabled()',\n    '[class.com-switch--checked]': 'checked()',\n  },\n})\nexport class ComSwitch implements ControlValueAccessor {\n  /** Optional NgControl for reactive forms integration. */\n  readonly ngControl: NgControl | null = inject(NgControl, { optional: true, self: true });\n\n  /** Reference to the native input element. */\n  readonly inputRef: Signal<ElementRef<HTMLInputElement> | undefined> =\n    viewChild<ElementRef<HTMLInputElement>>('inputElement');\n\n  /** Unique ID for this switch instance. */\n  private readonly uniqueId: string = `com-switch-${nextId++}`;\n\n  // Inputs\n  readonly size: InputSignal<SwitchSize> = input<SwitchSize>('md');\n  readonly variant: InputSignal<SwitchVariant> = input<SwitchVariant>('primary');\n  readonly checked: ModelSignal<boolean> = model<boolean>(false);\n  readonly disabled: ModelSignal<boolean> = model<boolean>(false);\n  readonly value: InputSignal<string | undefined> = input<string>();\n  readonly name: InputSignal<string | undefined> = input<string>();\n  readonly id: InputSignal<string | undefined> = input<string>();\n  readonly ariaLabel: InputSignal<string | null> = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaLabelledby: InputSignal<string | null> = input<string | null>(null, { alias: 'aria-labelledby' });\n  readonly ariaDescribedby: InputSignal<string | null> = input<string | null>(null, { alias: 'aria-describedby' });\n\n  // Outputs\n  readonly changed: OutputEmitterRef<SwitchChange> = output<SwitchChange>();\n\n  // Computed state\n  readonly inputId: Signal<string> = computed(() => this.id() ?? this.uniqueId);\n\n  protected readonly trackClasses: Signal<string> = computed(() =>\n    switchTrackVariants({ variant: this.variant(), size: this.size() })\n  );\n\n  protected readonly thumbClasses: Signal<string> = computed(() => {\n    const base = `pointer-events-none block rounded-pill bg-background shadow-sm transition-transform duration-150 ${SWITCH_THUMB_SIZES[this.size()]}`;\n    return this.checked() ? `${base} ${SWITCH_THUMB_TRANSLATE[this.size()]}` : base;\n  });\n\n  protected readonly labelClasses: Signal<string> = computed(() =>\n    `com-switch__label select-none peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground ${SWITCH_LABEL_SIZES[this.size()]}`\n  );\n\n  // CVA callbacks\n  private onChange: (value: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: boolean): void {\n    this.checked.set(value ?? false);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n\n  // Event handlers\n  protected onInputChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const newChecked = input.checked;\n\n    this.checked.set(newChecked);\n    this.onChange(newChecked);\n    this.changed.emit({ checked: newChecked, source: this });\n  }\n\n  // Public API\n  /** Focuses this switch's input element. */\n  focus(): void {\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  /** Toggles the switch state programmatically. */\n  toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    const newChecked = !this.checked();\n    this.checked.set(newChecked);\n    this.onChange(newChecked);\n    this.changed.emit({ checked: newChecked, source: this });\n  }\n}\n","// Public API for the switch component\n\n// Main component\nexport { ComSwitch } from './switch.component';\n\n// Types\nexport type { SwitchChange } from './switch.component';\n\n// Variants (for advanced customization)\nexport {\n  switchTrackVariants,\n  SWITCH_THUMB_SIZES,\n  SWITCH_THUMB_TRANSLATE,\n  SWITCH_LABEL_SIZES,\n} from './switch.variants';\n\nexport type { SwitchSize, SwitchVariant } from './switch.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}