@styloviz/toggle-switch 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# @styloviz/toggle-switch
+
+> Accessible on/off toggle switch with labels, sizes and disabled state.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/toggle-switch
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvToggleSwitchComponent } from '@styloviz/toggle-switch';
+
+@Component({
+  standalone: true,
+  imports: [SvToggleSwitchComponent],
+  template: `
+    <sv-toggle-switch />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean (two-way)` | `false` | Current on/off state. Use `[(checked)]` for two-way binding. |
+| `label` | `string` | `''` | Visible label text. |
+| `description` | `string` | `''` | Smaller descriptor line beneath the label. |
+| `labelPosition` | `ToggleLabelPosition` | `'right'` | Position of the label relative to the track. |
+| `onLabel` | `string` | `''` | Text shown inside the track when ON. Keep ≤ 3 characters for `md` size, fewer for smaller sizes. |
+| `offLabel` | `string` | `''` | Text shown inside the track when OFF. |
+| `onIconPath` | `string` | `''` | SVG `<path d="...">` rendered inside the thumb when the toggle is ON. Omit to show a plain thumb. |
+| `offIconPath` | `string` | `''` | SVG `<path d="...">` rendered inside the thumb when the toggle is OFF. |
+| `size` | `ToggleSize` | `'md'` | Size of the toggle track and thumb. |
+| `variant` | `ToggleVariant` | `'primary'` | Active-state color variant. |
+| `disabled` | `boolean` | `false` | Disable interaction. |
+| `required` | `boolean` | `false` | Mark the control as required (sets `aria-required`). |
+| `loading` | `boolean` | `false` | Show a spinner in the thumb — useful while an async action is in-flight. Implicitly disables interaction while true. |
+| `ariaLabel` | `string` | `''` | `aria-label` override — required when `labelPosition === 'hidden'` so screen readers still announce the control's purpose. |
+| `inputId` | `string` | `''` | id forwarded to the hidden `<input>` for `<label for="">` use. |
+| `customClass` | `string` | `''` | Additional CSS classes on the root wrapper element. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `toggled` | `boolean` | Emits the new boolean state after every toggle. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs
+
+## License
+
+MIT

package/fesm2022/styloviz-toggle-switch.mjs

@@ -0,0 +1,252 @@
+import * as i0 from '@angular/core';
+import { model, input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/** Process-wide counter for generating unique fallback ids. */
+let _svToggleUid = 0;
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * ToggleSwitch — An accessible on/off control for settings, feature flags,
+ * and boolean preferences.
+ *
+ * Supports:
+ * - Angular signals two-way binding via `[(checked)]`
+ * - Reactive Forms via `ControlValueAccessor` (`formControl` / `formControlName`)
+ * - 4 sizes × 5 color variants
+ * - Optional ON/OFF labels inside the track
+ * - Optional icon slots in the thumb (on/off state SVG paths)
+ * - Descriptive sub-label beneath the main label
+ * - Disabled & loading states
+ * - Full keyboard accessibility (Space / Enter toggle)
+ * - `aria-checked`, `role="switch"`, focus-visible ring
+ */
+class SvToggleSwitchComponent {
+    // ── Two-way binding ───────────────────────────────────────────────────────
+    /** Current on/off state. Use `[(checked)]` for two-way binding. @default false */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    // ── Content ───────────────────────────────────────────────────────────────
+    /** Visible label text. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Smaller descriptor line beneath the label. */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Position of the label relative to the track. @default 'right' */
+    labelPosition = input('right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Text shown inside the track when ON.
+     * Keep ≤ 3 characters for `md` size, fewer for smaller sizes. @default ''
+     */
+    onLabel = input('', ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Text shown inside the track when OFF. @default ''
+     */
+    offLabel = input('', ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * SVG `<path d="...">` rendered inside the thumb when the toggle is ON.
+     * Omit to show a plain thumb.
+     */
+    onIconPath = input('', ...(ngDevMode ? [{ debugName: "onIconPath" }] : /* istanbul ignore next */ []));
+    /**
+     * SVG `<path d="...">` rendered inside the thumb when the toggle is OFF.
+     */
+    offIconPath = input('', ...(ngDevMode ? [{ debugName: "offIconPath" }] : /* istanbul ignore next */ []));
+    // ── Appearance ────────────────────────────────────────────────────────────
+    /** Size of the toggle track and thumb. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Active-state color variant. @default 'primary' */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Disable interaction. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Mark the control as required (sets `aria-required`). @default false */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Show a spinner in the thumb — useful while an async action is in-flight.
+     * Implicitly disables interaction while true. @default false
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // ── Accessibility ─────────────────────────────────────────────────────────
+    /**
+     * `aria-label` override — required when `labelPosition === 'hidden'`
+     * so screen readers still announce the control's purpose.
+     */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** id forwarded to the hidden `<input>` for `<label for="">` use. */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    // ── Extra ─────────────────────────────────────────────────────────────────
+    /** Additional CSS classes on the root wrapper element. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emits the new boolean state after every toggle. */
+    toggled = output();
+    // ── CVA internals ────────────────────────────────────────────────────────
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Tracks disabled state set programmatically via formControl.disable(). */
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Merged disabled state — true when either the [disabled] input or the
+     * parent FormControl is disabled. Use this everywhere instead of disabled().
+     */
+    resolvedDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    writeValue(val) {
+        this.checked.set(!!val);
+    }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
+    // ── Interaction ───────────────────────────────────────────────────────────
+    toggle() {
+        if (this.resolvedDisabled() || this.loading())
+            return;
+        const next = !this.checked();
+        this.checked.set(next);
+        this._onChange(next);
+        this._onTouched();
+        this.toggled.emit(next);
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    // ── Computed class maps ───────────────────────────────────────────────────
+    /** Root wrapper layout class driven by labelPosition. */
+    rootClasses = computed(() => {
+        const pos = this.labelPosition();
+        const layout = pos === 'top'
+            ? 'flex flex-col gap-1.5'
+            : pos === 'left'
+                ? 'flex flex-row items-center gap-3'
+                : 'flex flex-row items-center gap-3';
+        return [
+            layout,
+            this.resolvedDisabled() || this.loading() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+            this.customClass(),
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** Track background — variant color when ON, gray when OFF. */
+    trackClasses = computed(() => {
+        const on = this.checked();
+        const variantOn = {
+            primary: 'bg-primary-600 dark:bg-primary-500',
+            success: 'bg-emerald-600 dark:bg-emerald-500',
+            warning: 'bg-amber-500 dark:bg-amber-400',
+            danger: 'bg-red-600 dark:bg-red-500',
+            neutral: 'bg-gray-700 dark:bg-gray-400',
+        };
+        const sizeMap = {
+            xs: 'h-4 w-7',
+            sm: 'h-5 w-9',
+            md: 'h-6 w-11',
+            lg: 'h-7 w-14',
+        };
+        return [
+            'relative inline-flex shrink-0 items-center rounded-full transition-colors duration-200 ease-in-out',
+            'focus-visible:outline-none',
+            sizeMap[this.size()],
+            on ? variantOn[this.variant()] : 'bg-gray-200 dark:bg-gray-700',
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    /** Thumb translate offset — moves right when ON. */
+    thumbClasses = computed(() => {
+        const on = this.checked();
+        const translateMap = {
+            xs: { off: 'translate-x-0.5', on: 'translate-x-3.5' },
+            sm: { off: 'translate-x-0.5', on: 'translate-x-4.5' },
+            md: { off: 'translate-x-0.5', on: 'translate-x-5.5' },
+            lg: { off: 'translate-x-1', on: 'translate-x-7.5' },
+        };
+        const sizeMap = {
+            xs: 'h-3 w-3',
+            sm: 'h-4 w-4',
+            md: 'h-5 w-5',
+            lg: 'h-5.5 w-5.5',
+        };
+        const t = translateMap[this.size()];
+        return [
+            'pointer-events-none inline-flex items-center justify-center rounded-full bg-white shadow-sm',
+            'transform transition-transform duration-200 ease-in-out ring-0',
+            sizeMap[this.size()],
+            on ? t.on : t.off,
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
+    /** Icon size inside the thumb. */
+    thumbIconClass = computed(() => {
+        switch (this.size()) {
+            case 'xs': return 'h-1.5 w-1.5';
+            case 'sm': return 'h-2.5 w-2.5';
+            case 'lg': return 'h-3.5 w-3.5';
+            default: return 'h-3 w-3';
+        }
+    }, ...(ngDevMode ? [{ debugName: "thumbIconClass" }] : /* istanbul ignore next */ []));
+    /** Track label text size. */
+    trackLabelClass = computed(() => {
+        switch (this.size()) {
+            case 'xs': return 'text-[7px]';
+            case 'sm': return 'text-[8px]';
+            case 'lg': return 'text-[10px]';
+            default: return 'text-[9px]';
+        }
+    }, ...(ngDevMode ? [{ debugName: "trackLabelClass" }] : /* istanbul ignore next */ []));
+    /** Main label text size. */
+    labelClass = computed(() => {
+        const base = 'font-medium text-gray-800 dark:text-gray-100 leading-none select-none';
+        switch (this.size()) {
+            case 'xs': return `${base} text-xs`;
+            case 'sm': return `${base} text-sm`;
+            case 'lg': return `${base} text-base`;
+            default: return `${base} text-sm`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    /** Description text size. */
+    descClass = computed(() => {
+        switch (this.size()) {
+            case 'lg': return 'text-sm text-gray-500 dark:text-gray-400 select-none mt-0.5';
+            default: return 'text-xs text-gray-500 dark:text-gray-400 select-none mt-0.5';
+        }
+    }, ...(ngDevMode ? [{ debugName: "descClass" }] : /* istanbul ignore next */ []));
+    /** Stable unique fallback id so label + ARIA associations always work. */
+    _autoId = `sv-toggle-${++_svToggleUid}`;
+    /** Effective id used by the switch and its <label for>. */
+    resolvedId = computed(() => this.inputId() || this._autoId, ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    /** id of the visible label (referenced by aria-labelledby). */
+    labelId = computed(() => `${this.resolvedId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    /** id of the description (referenced by aria-describedby). */
+    descId = computed(() => `${this.resolvedId()}-desc`, ...(ngDevMode ? [{ debugName: "descId" }] : /* istanbul ignore next */ []));
+    /** True when a visible text label is rendered next to the switch. */
+    hasVisibleLabel = computed(() => !!this.label() && this.labelPosition() !== 'hidden', ...(ngDevMode ? [{ debugName: "hasVisibleLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved aria-label for the button role. */
+    resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Toggle', ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether to show the thumb icon. */
+    hasThumbIcon = computed(() => !!(this.checked() ? this.onIconPath() : this.offIconPath()), ...(ngDevMode ? [{ debugName: "hasThumbIcon" }] : /* istanbul ignore next */ []));
+    currentThumbIcon = computed(() => this.checked() ? this.onIconPath() : this.offIconPath(), ...(ngDevMode ? [{ debugName: "currentThumbIcon" }] : /* istanbul ignore next */ []));
+    showOnLabel = computed(() => !!this.onLabel() && this.checked(), ...(ngDevMode ? [{ debugName: "showOnLabel" }] : /* istanbul ignore next */ []));
+    showOffLabel = computed(() => !!this.offLabel() && !this.checked(), ...(ngDevMode ? [{ debugName: "showOffLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvToggleSwitchComponent, isStandalone: true, selector: "sv-toggle-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onIconPath: { classPropertyName: "onIconPath", publicName: "onIconPath", isSignal: true, isRequired: false, transformFunction: null }, offIconPath: { classPropertyName: "offIconPath", publicName: "offIconPath", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", toggled: "toggled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SvToggleSwitchComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!--\n  Root wrapper acts as the interactive region.\n  We use a <div role=\"group\"> so a wrapping <label> remains optional.\n-->\n<div\n  [ngClass]=\"rootClasses()\"\n  [attr.aria-label]=\"labelPosition() === 'hidden' ? resolvedAriaLabel() : null\"\n>\n\n  <!-- \u2500\u2500 Top label (only when labelPosition === 'top') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && labelPosition() === 'top') {\n    <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n    @if (description()) {\n      <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n    }\n  }\n\n  <!-- \u2500\u2500 Left label (only when labelPosition === 'left') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && labelPosition() === 'left') {\n    <div class=\"flex flex-col min-w-0\">\n      <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n      @if (description()) {\n        <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <!-- \u2500\u2500 Track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [ngClass]=\"trackClasses()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.id]=\"resolvedId()\"\n    [attr.aria-labelledby]=\"hasVisibleLabel() ? labelId() : null\"\n    [attr.aria-label]=\"hasVisibleLabel() ? null : resolvedAriaLabel()\"\n    [attr.aria-describedby]=\"description() ? descId() : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-busy]=\"loading() || null\"\n    [attr.aria-disabled]=\"resolvedDisabled() || loading() || null\"\n    [attr.tabindex]=\"resolvedDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeydown($event)\"\n    class=\"focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\n           dark:focus-visible:ring-primary-400 dark:focus-visible:ring-offset-gray-900\"\n  >\n    <!-- Track ON label -->\n    @if (showOnLabel()) {\n      <span\n        class=\"absolute left-1.5 font-semibold text-white/90 leading-none pointer-events-none\"\n        [ngClass]=\"trackLabelClass()\"\n        aria-hidden=\"true\"\n      >\n        {{ onLabel() }}\n      </span>\n    }\n\n    <!-- Track OFF label -->\n    @if (showOffLabel()) {\n      <span\n        class=\"absolute right-1.5 font-semibold leading-none pointer-events-none\"\n        [ngClass]=\"[trackLabelClass(), 'text-gray-500 dark:text-gray-400']\"\n        aria-hidden=\"true\"\n      >\n        {{ offLabel() }}\n      </span>\n    }\n\n    <!-- Thumb -->\n    <span [ngClass]=\"thumbClasses()\" aria-hidden=\"true\">\n\n      <!-- Loading spinner -->\n      @if (loading()) {\n        <svg\n          class=\"animate-spin text-gray-400\"\n          [ngClass]=\"thumbIconClass()\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                  stroke=\"currentColor\" stroke-width=\"4\"/>\n          <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n        </svg>\n      }\n\n      <!-- State icon (ON or OFF path) -->\n      @if (!loading() && hasThumbIcon()) {\n        <svg\n          [ngClass]=\"[thumbIconClass(), checked() ? 'text-primary-600' : 'text-gray-400']\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path [attr.d]=\"currentThumbIcon()\" />\n        </svg>\n      }\n\n    </span>\n  </button>\n\n  <!-- \u2500\u2500 Right label (default, labelPosition === 'right') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && (labelPosition() === 'right' || labelPosition() === 'hidden')) {\n    @if (labelPosition() !== 'hidden') {\n      <div class=\"flex flex-col min-w-0\">\n        <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n        @if (description()) {\n          <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n        }\n      </div>\n    }\n  }\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvToggleSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-toggle-switch', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SvToggleSwitchComponent),
+                            multi: true,
+                        },
+                    ], template: "<!--\n  Root wrapper acts as the interactive region.\n  We use a <div role=\"group\"> so a wrapping <label> remains optional.\n-->\n<div\n  [ngClass]=\"rootClasses()\"\n  [attr.aria-label]=\"labelPosition() === 'hidden' ? resolvedAriaLabel() : null\"\n>\n\n  <!-- \u2500\u2500 Top label (only when labelPosition === 'top') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && labelPosition() === 'top') {\n    <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n    @if (description()) {\n      <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n    }\n  }\n\n  <!-- \u2500\u2500 Left label (only when labelPosition === 'left') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && labelPosition() === 'left') {\n    <div class=\"flex flex-col min-w-0\">\n      <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n      @if (description()) {\n        <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <!-- \u2500\u2500 Track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [ngClass]=\"trackClasses()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.id]=\"resolvedId()\"\n    [attr.aria-labelledby]=\"hasVisibleLabel() ? labelId() : null\"\n    [attr.aria-label]=\"hasVisibleLabel() ? null : resolvedAriaLabel()\"\n    [attr.aria-describedby]=\"description() ? descId() : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-busy]=\"loading() || null\"\n    [attr.aria-disabled]=\"resolvedDisabled() || loading() || null\"\n    [attr.tabindex]=\"resolvedDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeydown($event)\"\n    class=\"focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\n           dark:focus-visible:ring-primary-400 dark:focus-visible:ring-offset-gray-900\"\n  >\n    <!-- Track ON label -->\n    @if (showOnLabel()) {\n      <span\n        class=\"absolute left-1.5 font-semibold text-white/90 leading-none pointer-events-none\"\n        [ngClass]=\"trackLabelClass()\"\n        aria-hidden=\"true\"\n      >\n        {{ onLabel() }}\n      </span>\n    }\n\n    <!-- Track OFF label -->\n    @if (showOffLabel()) {\n      <span\n        class=\"absolute right-1.5 font-semibold leading-none pointer-events-none\"\n        [ngClass]=\"[trackLabelClass(), 'text-gray-500 dark:text-gray-400']\"\n        aria-hidden=\"true\"\n      >\n        {{ offLabel() }}\n      </span>\n    }\n\n    <!-- Thumb -->\n    <span [ngClass]=\"thumbClasses()\" aria-hidden=\"true\">\n\n      <!-- Loading spinner -->\n      @if (loading()) {\n        <svg\n          class=\"animate-spin text-gray-400\"\n          [ngClass]=\"thumbIconClass()\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                  stroke=\"currentColor\" stroke-width=\"4\"/>\n          <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n        </svg>\n      }\n\n      <!-- State icon (ON or OFF path) -->\n      @if (!loading() && hasThumbIcon()) {\n        <svg\n          [ngClass]=\"[thumbIconClass(), checked() ? 'text-primary-600' : 'text-gray-400']\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path [attr.d]=\"currentThumbIcon()\" />\n        </svg>\n      }\n\n    </span>\n  </button>\n\n  <!-- \u2500\u2500 Right label (default, labelPosition === 'right') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label() && (labelPosition() === 'right' || labelPosition() === 'hidden')) {\n    @if (labelPosition() !== 'hidden') {\n      <div class=\"flex flex-col min-w-0\">\n        <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n        @if (description()) {\n          <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n        }\n      </div>\n    }\n  }\n\n</div>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIconPath", required: false }] }], offIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIconPath", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvToggleSwitchComponent };
+//# sourceMappingURL=styloviz-toggle-switch.mjs.map

package/fesm2022/styloviz-toggle-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-toggle-switch.mjs","sources":["../../../../projects/toggle-switch/src/lib/toggle-switch.component.ts","../../../../projects/toggle-switch/src/lib/toggle-switch.component.html","../../../../projects/toggle-switch/src/styloviz-toggle-switch.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  signal,\n  model,\n  ChangeDetectionStrategy,\n  forwardRef,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ToggleSize    = 'xs' | 'sm' | 'md' | 'lg';\nexport type ToggleVariant = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';\n\n/**\n * Label position relative to the toggle track.\n * - `right`  — label follows the track (default)\n * - `left`   — label precedes the track\n * - `top`    — label stacked above the track\n * - `hidden` — no visible label (aria-label still required for a11y)\n */\nexport type ToggleLabelPosition = 'right' | 'left' | 'top' | 'hidden';\n\n/** Process-wide counter for generating unique fallback ids. */\nlet _svToggleUid = 0;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * ToggleSwitch — An accessible on/off control for settings, feature flags,\n * and boolean preferences.\n *\n * Supports:\n * - Angular signals two-way binding via `[(checked)]`\n * - Reactive Forms via `ControlValueAccessor` (`formControl` / `formControlName`)\n * - 4 sizes × 5 color variants\n * - Optional ON/OFF labels inside the track\n * - Optional icon slots in the thumb (on/off state SVG paths)\n * - Descriptive sub-label beneath the main label\n * - Disabled & loading states\n * - Full keyboard accessibility (Space / Enter toggle)\n * - `aria-checked`, `role=\"switch\"`, focus-visible ring\n */\n@Component({\n  selector: 'sv-toggle-switch',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './toggle-switch.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SvToggleSwitchComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SvToggleSwitchComponent implements ControlValueAccessor {\n  // ── Two-way binding ───────────────────────────────────────────────────────\n\n  /** Current on/off state. Use `[(checked)]` for two-way binding. @default false */\n  checked = model<boolean>(false);\n\n  // ── Content ───────────────────────────────────────────────────────────────\n\n  /** Visible label text. */\n  label           = input<string>('');\n\n  /** Smaller descriptor line beneath the label. */\n  description     = input<string>('');\n\n  /** Position of the label relative to the track. @default 'right' */\n  labelPosition   = input<ToggleLabelPosition>('right');\n\n  /**\n   * Text shown inside the track when ON.\n   * Keep ≤ 3 characters for `md` size, fewer for smaller sizes. @default ''\n   */\n  onLabel         = input<string>('');\n\n  /**\n   * Text shown inside the track when OFF. @default ''\n   */\n  offLabel        = input<string>('');\n\n  /**\n   * SVG `<path d=\"...\">` rendered inside the thumb when the toggle is ON.\n   * Omit to show a plain thumb.\n   */\n  onIconPath      = input<string>('');\n\n  /**\n   * SVG `<path d=\"...\">` rendered inside the thumb when the toggle is OFF.\n   */\n  offIconPath     = input<string>('');\n\n  // ── Appearance ────────────────────────────────────────────────────────────\n\n  /** Size of the toggle track and thumb. @default 'md' */\n  size    = input<ToggleSize>('md');\n\n  /** Active-state color variant. @default 'primary' */\n  variant = input<ToggleVariant>('primary');\n\n  // ── State ─────────────────────────────────────────────────────────────────\n\n  /** Disable interaction. @default false */\n  disabled = input<boolean>(false);\n\n  /** Mark the control as required (sets `aria-required`). @default false */\n  required = input<boolean>(false);\n\n  /**\n   * Show a spinner in the thumb — useful while an async action is in-flight.\n   * Implicitly disables interaction while true. @default false\n   */\n  loading  = input<boolean>(false);\n\n  // ── Accessibility ─────────────────────────────────────────────────────────\n\n  /**\n   * `aria-label` override — required when `labelPosition === 'hidden'`\n   * so screen readers still announce the control's purpose.\n   */\n  ariaLabel = input<string>('');\n\n  /** id forwarded to the hidden `<input>` for `<label for=\"\">` use. */\n  inputId   = input<string>('');\n\n  // ── Extra ─────────────────────────────────────────────────────────────────\n\n  /** Additional CSS classes on the root wrapper element. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emits the new boolean state after every toggle. */\n  toggled = output<boolean>();\n\n  // ── CVA internals ────────────────────────────────────────────────────────\n\n  private _onChange: (v: boolean) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  /** Tracks disabled state set programmatically via formControl.disable(). */\n  private readonly _formDisabled = signal(false);\n\n  /**\n   * Merged disabled state — true when either the [disabled] input or the\n   * parent FormControl is disabled. Use this everywhere instead of disabled().\n   */\n  readonly resolvedDisabled = computed(() => this.disabled() || this._formDisabled());\n\n  writeValue(val: boolean): void {\n    this.checked.set(!!val);\n  }\n  registerOnChange(fn: (v: boolean) => void): void { this._onChange = fn; }\n  registerOnTouched(fn: () => void): void          { this._onTouched = fn; }\n  setDisabledState(isDisabled: boolean): void      { this._formDisabled.set(isDisabled); }\n\n  // ── Interaction ───────────────────────────────────────────────────────────\n\n  toggle(): void {\n    if (this.resolvedDisabled() || this.loading()) return;\n    const next = !this.checked();\n    this.checked.set(next);\n    this._onChange(next);\n    this._onTouched();\n    this.toggled.emit(next);\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  // ── Computed class maps ───────────────────────────────────────────────────\n\n  /** Root wrapper layout class driven by labelPosition. */\n  rootClasses = computed<string>(() => {\n    const pos = this.labelPosition();\n    const layout = pos === 'top'\n      ? 'flex flex-col gap-1.5'\n      : pos === 'left'\n        ? 'flex flex-row items-center gap-3'\n        : 'flex flex-row items-center gap-3';\n\n    return [\n      layout,\n      this.resolvedDisabled() || this.loading() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',\n      this.customClass(),\n    ].filter(Boolean).join(' ');\n  });\n\n  /** Track background — variant color when ON, gray when OFF. */\n  trackClasses = computed<string>(() => {\n    const on = this.checked();\n\n    const variantOn: Record<ToggleVariant, string> = {\n      primary: 'bg-primary-600 dark:bg-primary-500',\n      success: 'bg-emerald-600 dark:bg-emerald-500',\n      warning: 'bg-amber-500 dark:bg-amber-400',\n      danger:  'bg-red-600 dark:bg-red-500',\n      neutral: 'bg-gray-700 dark:bg-gray-400',\n    };\n\n    const sizeMap: Record<ToggleSize, string> = {\n      xs: 'h-4 w-7',\n      sm: 'h-5 w-9',\n      md: 'h-6 w-11',\n      lg: 'h-7 w-14',\n    };\n\n    return [\n      'relative inline-flex shrink-0 items-center rounded-full transition-colors duration-200 ease-in-out',\n      'focus-visible:outline-none',\n      sizeMap[this.size()],\n      on ? variantOn[this.variant()] : 'bg-gray-200 dark:bg-gray-700',\n    ].join(' ');\n  });\n\n  /** Thumb translate offset — moves right when ON. */\n  thumbClasses = computed<string>(() => {\n    const on = this.checked();\n\n    const translateMap: Record<ToggleSize, { off: string; on: string }> = {\n      xs: { off: 'translate-x-0.5', on: 'translate-x-3.5' },\n      sm: { off: 'translate-x-0.5', on: 'translate-x-4.5' },\n      md: { off: 'translate-x-0.5', on: 'translate-x-5.5' },\n      lg: { off: 'translate-x-1',   on: 'translate-x-7.5' },\n    };\n\n    const sizeMap: Record<ToggleSize, string> = {\n      xs: 'h-3 w-3',\n      sm: 'h-4 w-4',\n      md: 'h-5 w-5',\n      lg: 'h-5.5 w-5.5',\n    };\n\n    const t = translateMap[this.size()];\n\n    return [\n      'pointer-events-none inline-flex items-center justify-center rounded-full bg-white shadow-sm',\n      'transform transition-transform duration-200 ease-in-out ring-0',\n      sizeMap[this.size()],\n      on ? t.on : t.off,\n    ].join(' ');\n  });\n\n  /** Icon size inside the thumb. */\n  thumbIconClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'xs': return 'h-1.5 w-1.5';\n      case 'sm': return 'h-2.5 w-2.5';\n      case 'lg': return 'h-3.5 w-3.5';\n      default:   return 'h-3 w-3';\n    }\n  });\n\n  /** Track label text size. */\n  trackLabelClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'xs': return 'text-[7px]';\n      case 'sm': return 'text-[8px]';\n      case 'lg': return 'text-[10px]';\n      default:   return 'text-[9px]';\n    }\n  });\n\n  /** Main label text size. */\n  labelClass = computed<string>(() => {\n    const base = 'font-medium text-gray-800 dark:text-gray-100 leading-none select-none';\n    switch (this.size()) {\n      case 'xs': return `${base} text-xs`;\n      case 'sm': return `${base} text-sm`;\n      case 'lg': return `${base} text-base`;\n      default:   return `${base} text-sm`;\n    }\n  });\n\n  /** Description text size. */\n  descClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'lg': return 'text-sm text-gray-500 dark:text-gray-400 select-none mt-0.5';\n      default:   return 'text-xs text-gray-500 dark:text-gray-400 select-none mt-0.5';\n    }\n  });\n\n  /** Stable unique fallback id so label + ARIA associations always work. */\n  private readonly _autoId = `sv-toggle-${++_svToggleUid}`;\n  /** Effective id used by the switch and its <label for>. */\n  readonly resolvedId = computed(() => this.inputId() || this._autoId);\n  /** id of the visible label (referenced by aria-labelledby). */\n  readonly labelId    = computed(() => `${this.resolvedId()}-label`);\n  /** id of the description (referenced by aria-describedby). */\n  readonly descId     = computed(() => `${this.resolvedId()}-desc`);\n\n  /** True when a visible text label is rendered next to the switch. */\n  readonly hasVisibleLabel = computed<boolean>(\n    () => !!this.label() && this.labelPosition() !== 'hidden'\n  );\n\n  /** Resolved aria-label for the button role. */\n  resolvedAriaLabel = computed<string>(() =>\n    this.ariaLabel() || this.label() || 'Toggle'\n  );\n\n  /** Whether to show the thumb icon. */\n  hasThumbIcon = computed<boolean>(() =>\n    !!(this.checked() ? this.onIconPath() : this.offIconPath())\n  );\n\n  currentThumbIcon = computed<string>(() =>\n    this.checked() ? this.onIconPath() : this.offIconPath()\n  );\n\n  showOnLabel  = computed(() => !!this.onLabel()  && this.checked());\n  showOffLabel = computed(() => !!this.offLabel()  && !this.checked());\n}\n","<!--\n  Root wrapper acts as the interactive region.\n  We use a <div role=\"group\"> so a wrapping <label> remains optional.\n-->\n<div\n  [ngClass]=\"rootClasses()\"\n  [attr.aria-label]=\"labelPosition() === 'hidden' ? resolvedAriaLabel() : null\"\n>\n\n  <!-- ── Top label (only when labelPosition === 'top') ─────────────────── -->\n  @if (label() && labelPosition() === 'top') {\n    <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n    @if (description()) {\n      <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n    }\n  }\n\n  <!-- ── Left label (only when labelPosition === 'left') ──────────────── -->\n  @if (label() && labelPosition() === 'left') {\n    <div class=\"flex flex-col min-w-0\">\n      <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n      @if (description()) {\n        <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <!-- ── Track ─────────────────────────────────────────────────────────── -->\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [ngClass]=\"trackClasses()\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.id]=\"resolvedId()\"\n    [attr.aria-labelledby]=\"hasVisibleLabel() ? labelId() : null\"\n    [attr.aria-label]=\"hasVisibleLabel() ? null : resolvedAriaLabel()\"\n    [attr.aria-describedby]=\"description() ? descId() : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-busy]=\"loading() || null\"\n    [attr.aria-disabled]=\"resolvedDisabled() || loading() || null\"\n    [attr.tabindex]=\"resolvedDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeydown($event)\"\n    class=\"focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\n           dark:focus-visible:ring-primary-400 dark:focus-visible:ring-offset-gray-900\"\n  >\n    <!-- Track ON label -->\n    @if (showOnLabel()) {\n      <span\n        class=\"absolute left-1.5 font-semibold text-white/90 leading-none pointer-events-none\"\n        [ngClass]=\"trackLabelClass()\"\n        aria-hidden=\"true\"\n      >\n        {{ onLabel() }}\n      </span>\n    }\n\n    <!-- Track OFF label -->\n    @if (showOffLabel()) {\n      <span\n        class=\"absolute right-1.5 font-semibold leading-none pointer-events-none\"\n        [ngClass]=\"[trackLabelClass(), 'text-gray-500 dark:text-gray-400']\"\n        aria-hidden=\"true\"\n      >\n        {{ offLabel() }}\n      </span>\n    }\n\n    <!-- Thumb -->\n    <span [ngClass]=\"thumbClasses()\" aria-hidden=\"true\">\n\n      <!-- Loading spinner -->\n      @if (loading()) {\n        <svg\n          class=\"animate-spin text-gray-400\"\n          [ngClass]=\"thumbIconClass()\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                  stroke=\"currentColor\" stroke-width=\"4\"/>\n          <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n        </svg>\n      }\n\n      <!-- State icon (ON or OFF path) -->\n      @if (!loading() && hasThumbIcon()) {\n        <svg\n          [ngClass]=\"[thumbIconClass(), checked() ? 'text-primary-600' : 'text-gray-400']\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path [attr.d]=\"currentThumbIcon()\" />\n        </svg>\n      }\n\n    </span>\n  </button>\n\n  <!-- ── Right label (default, labelPosition === 'right') ─────────────── -->\n  @if (label() && (labelPosition() === 'right' || labelPosition() === 'hidden')) {\n    @if (labelPosition() !== 'hidden') {\n      <div class=\"flex flex-col min-w-0\">\n        <label [attr.id]=\"labelId()\" [attr.for]=\"resolvedId()\" [ngClass]=\"[labelClass(), 'cursor-pointer']\">{{ label() }}</label>\n        @if (description()) {\n          <span [attr.id]=\"descId()\" [ngClass]=\"descClass()\">{{ description() }}</span>\n        }\n      </div>\n    }\n  }\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/toggle-switch",
+  "version": "0.1.1",
+  "description": "Accessible on/off toggle switch with labels, sizes and disabled state.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/toggle-switch"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-toggle-switch.mjs",
+  "typings": "types/styloviz-toggle-switch.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-toggle-switch.d.ts",
+      "default": "./fesm2022/styloviz-toggle-switch.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-toggle-switch.d.ts

@@ -0,0 +1,131 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+type ToggleSize = 'xs' | 'sm' | 'md' | 'lg';
+type ToggleVariant = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+/**
+ * Label position relative to the toggle track.
+ * - `right`  — label follows the track (default)
+ * - `left`   — label precedes the track
+ * - `top`    — label stacked above the track
+ * - `hidden` — no visible label (aria-label still required for a11y)
+ */
+type ToggleLabelPosition = 'right' | 'left' | 'top' | 'hidden';
+/**
+ * ToggleSwitch — An accessible on/off control for settings, feature flags,
+ * and boolean preferences.
+ *
+ * Supports:
+ * - Angular signals two-way binding via `[(checked)]`
+ * - Reactive Forms via `ControlValueAccessor` (`formControl` / `formControlName`)
+ * - 4 sizes × 5 color variants
+ * - Optional ON/OFF labels inside the track
+ * - Optional icon slots in the thumb (on/off state SVG paths)
+ * - Descriptive sub-label beneath the main label
+ * - Disabled & loading states
+ * - Full keyboard accessibility (Space / Enter toggle)
+ * - `aria-checked`, `role="switch"`, focus-visible ring
+ */
+declare class SvToggleSwitchComponent implements ControlValueAccessor {
+    /** Current on/off state. Use `[(checked)]` for two-way binding. @default false */
+    checked: _angular_core.ModelSignal<boolean>;
+    /** Visible label text. */
+    label: _angular_core.InputSignal<string>;
+    /** Smaller descriptor line beneath the label. */
+    description: _angular_core.InputSignal<string>;
+    /** Position of the label relative to the track. @default 'right' */
+    labelPosition: _angular_core.InputSignal<ToggleLabelPosition>;
+    /**
+     * Text shown inside the track when ON.
+     * Keep ≤ 3 characters for `md` size, fewer for smaller sizes. @default ''
+     */
+    onLabel: _angular_core.InputSignal<string>;
+    /**
+     * Text shown inside the track when OFF. @default ''
+     */
+    offLabel: _angular_core.InputSignal<string>;
+    /**
+     * SVG `<path d="...">` rendered inside the thumb when the toggle is ON.
+     * Omit to show a plain thumb.
+     */
+    onIconPath: _angular_core.InputSignal<string>;
+    /**
+     * SVG `<path d="...">` rendered inside the thumb when the toggle is OFF.
+     */
+    offIconPath: _angular_core.InputSignal<string>;
+    /** Size of the toggle track and thumb. @default 'md' */
+    size: _angular_core.InputSignal<ToggleSize>;
+    /** Active-state color variant. @default 'primary' */
+    variant: _angular_core.InputSignal<ToggleVariant>;
+    /** Disable interaction. @default false */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Mark the control as required (sets `aria-required`). @default false */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Show a spinner in the thumb — useful while an async action is in-flight.
+     * Implicitly disables interaction while true. @default false
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * `aria-label` override — required when `labelPosition === 'hidden'`
+     * so screen readers still announce the control's purpose.
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** id forwarded to the hidden `<input>` for `<label for="">` use. */
+    inputId: _angular_core.InputSignal<string>;
+    /** Additional CSS classes on the root wrapper element. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emits the new boolean state after every toggle. */
+    toggled: _angular_core.OutputEmitterRef<boolean>;
+    private _onChange;
+    private _onTouched;
+    /** Tracks disabled state set programmatically via formControl.disable(). */
+    private readonly _formDisabled;
+    /**
+     * Merged disabled state — true when either the [disabled] input or the
+     * parent FormControl is disabled. Use this everywhere instead of disabled().
+     */
+    readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    writeValue(val: boolean): void;
+    registerOnChange(fn: (v: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    onKeydown(event: KeyboardEvent): void;
+    /** Root wrapper layout class driven by labelPosition. */
+    rootClasses: _angular_core.Signal<string>;
+    /** Track background — variant color when ON, gray when OFF. */
+    trackClasses: _angular_core.Signal<string>;
+    /** Thumb translate offset — moves right when ON. */
+    thumbClasses: _angular_core.Signal<string>;
+    /** Icon size inside the thumb. */
+    thumbIconClass: _angular_core.Signal<string>;
+    /** Track label text size. */
+    trackLabelClass: _angular_core.Signal<string>;
+    /** Main label text size. */
+    labelClass: _angular_core.Signal<string>;
+    /** Description text size. */
+    descClass: _angular_core.Signal<string>;
+    /** Stable unique fallback id so label + ARIA associations always work. */
+    private readonly _autoId;
+    /** Effective id used by the switch and its <label for>. */
+    readonly resolvedId: _angular_core.Signal<string>;
+    /** id of the visible label (referenced by aria-labelledby). */
+    readonly labelId: _angular_core.Signal<string>;
+    /** id of the description (referenced by aria-describedby). */
+    readonly descId: _angular_core.Signal<string>;
+    /** True when a visible text label is rendered next to the switch. */
+    readonly hasVisibleLabel: _angular_core.Signal<boolean>;
+    /** Resolved aria-label for the button role. */
+    resolvedAriaLabel: _angular_core.Signal<string>;
+    /** Whether to show the thumb icon. */
+    hasThumbIcon: _angular_core.Signal<boolean>;
+    currentThumbIcon: _angular_core.Signal<string>;
+    showOnLabel: _angular_core.Signal<boolean>;
+    showOffLabel: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvToggleSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvToggleSwitchComponent, "sv-toggle-switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "onLabel": { "alias": "onLabel"; "required": false; "isSignal": true; }; "offLabel": { "alias": "offLabel"; "required": false; "isSignal": true; }; "onIconPath": { "alias": "onIconPath"; "required": false; "isSignal": true; }; "offIconPath": { "alias": "offIconPath"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "toggled": "toggled"; }, never, never, true, never>;
+}
+
+export { SvToggleSwitchComponent };
+export type { ToggleLabelPosition, ToggleSize, ToggleVariant };