ngwr 7.3.0 → 9.0.0

package/fesm2022/ngwr-sidebar.mjs

@@ -35,7 +35,7 @@ function isGroup(entry) {
  * ]" />
  * ```
  *
- * @see https://ngwr.dev/components/sidebar
+ * @see https://ngwr.dev/reference/components/sidebar
  */
 class WrSidebar {
     entries = input([], /* @ts-ignore */
@@ -118,10 +118,10 @@ class WrSidebar {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSidebar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-sidebar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sidebar', role: 'navigation' }, imports: [RouterLink, RouterLinkActive, WrIcon], template: "<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n" }]
         }], ctorParameters: () => [], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], defaultGroupIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupIcon", required: false }] }], defaultItemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultItemIcon", required: false }] }], autoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpand", required: false }] }] } });

package/fesm2022/ngwr-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-sidebar.mjs","sources":["../../../projects/lib/sidebar/sidebar.ts","../../../projects/lib/sidebar/sidebar.html","../../../projects/lib/sidebar/ngwr-sidebar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, effect, inject, input, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { filter, map, startWith } from 'rxjs';\n\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSidebarEntry, WrSidebarGroup, WrSidebarItem } from './interfaces';\n\nfunction isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup {\n  return 'children' in entry;\n}\n\n/**\n * Data-driven sidebar nav. Pass `[entries]` — either flat\n * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal\n * child items). Active route auto-expands its containing group.\n *\n * @example\n * ```html\n * <wr-sidebar [entries]=\"[\n *   { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },\n *   {\n *     title: 'Settings',\n *     icon: 'cog',\n *     children: [\n *       { title: 'Profile', url: ['/settings', 'profile'] },\n *       { title: 'Billing', url: ['/settings', 'billing'] }\n *     ]\n *   }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/components/sidebar\n */\n@Component({\n  selector: 'wr-sidebar',\n  templateUrl: './sidebar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-sidebar', role: 'navigation' },\n  imports: [RouterLink, RouterLinkActive, WrIcon],\n})\nexport class WrSidebar {\n  readonly entries = input<readonly WrSidebarEntry[]>([]);\n\n  /** Default icon for entries without one. @default 'folder' */\n  readonly defaultGroupIcon = input<string>('folder');\n\n  /** Default icon for items without one. @default 'caret-forward' */\n  readonly defaultItemIcon = input<string>('caret-forward');\n\n  /** Auto-expand the group containing the active route. @default true */\n  readonly autoExpand = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly isGroup = isGroup;\n\n  private readonly opened = signal<ReadonlySet<string>>(new Set());\n\n  private readonly router = inject(Router);\n  private readonly currentUrl = toSignal(\n    this.router.events.pipe(\n      filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n      map(e => e.urlAfterRedirects),\n      startWith(this.router.url)\n    ),\n    { initialValue: this.router.url }\n  );\n\n  /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */\n  private lastAutoUrl: string | null = null;\n\n  constructor() {\n    // Seed defaultOpen groups.\n    effect(() => {\n      const seeded = new Set<string>();\n      for (const entry of this.entries()) {\n        if (isGroup(entry) && entry.defaultOpen) seeded.add(entry.title);\n      }\n      if (seeded.size > 0) {\n        this.opened.update(prev => new Set([...prev, ...seeded]));\n      }\n    });\n\n    // Auto-expand the group containing the current URL.\n    effect(() => {\n      if (!this.autoExpand()) return;\n      const url = this.currentUrl();\n      if (url === this.lastAutoUrl) return;\n      this.lastAutoUrl = url;\n      const match = this.findGroupForUrl(url);\n      if (!match || this.opened().has(match)) return;\n      this.opened.update(prev => {\n        const next = new Set(prev);\n        next.add(match);\n        return next;\n      });\n    });\n  }\n\n  protected isOpen(title: string): boolean {\n    return this.opened().has(title);\n  }\n\n  /** Stable id for the group body, referenced by the toggle's `aria-controls`. */\n  protected groupBodyId(title: string): string {\n    return `wr-sidebar-group-${title.replace(/\\s+/g, '-').toLowerCase()}`;\n  }\n\n  protected toggleGroup(title: string): void {\n    this.opened.update(prev => {\n      const next = new Set(prev);\n      if (next.has(title)) next.delete(title);\n      else next.add(title);\n      return next;\n    });\n  }\n\n  protected asItem(entry: WrSidebarEntry): WrSidebarItem {\n    return entry as WrSidebarItem;\n  }\n\n  protected asGroup(entry: WrSidebarEntry): WrSidebarGroup {\n    return entry as WrSidebarGroup;\n  }\n\n  private findGroupForUrl(url: string): string | null {\n    for (const entry of this.entries()) {\n      if (!isGroup(entry)) continue;\n      const hit = entry.children.some(child => url.startsWith(`/${child.url.join('/')}`));\n      if (hit) return entry.title;\n    }\n    return null;\n  }\n}\n","<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron — not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-sidebar.mjs","sources":["../../../projects/lib/sidebar/sidebar.ts","../../../projects/lib/sidebar/sidebar.html","../../../projects/lib/sidebar/ngwr-sidebar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, effect, inject, input, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { filter, map, startWith } from 'rxjs';\n\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSidebarEntry, WrSidebarGroup, WrSidebarItem } from './interfaces';\n\nfunction isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup {\n  return 'children' in entry;\n}\n\n/**\n * Data-driven sidebar nav. Pass `[entries]` — either flat\n * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal\n * child items). Active route auto-expands its containing group.\n *\n * @example\n * ```html\n * <wr-sidebar [entries]=\"[\n *   { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },\n *   {\n *     title: 'Settings',\n *     icon: 'cog',\n *     children: [\n *       { title: 'Profile', url: ['/settings', 'profile'] },\n *       { title: 'Billing', url: ['/settings', 'billing'] }\n *     ]\n *   }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/sidebar\n */\n@Component({\n  selector: 'wr-sidebar',\n  templateUrl: './sidebar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-sidebar', role: 'navigation' },\n  imports: [RouterLink, RouterLinkActive, WrIcon],\n})\nexport class WrSidebar {\n  readonly entries = input<readonly WrSidebarEntry[]>([]);\n\n  /** Default icon for entries without one. @default 'folder' */\n  readonly defaultGroupIcon = input<string>('folder');\n\n  /** Default icon for items without one. @default 'caret-forward' */\n  readonly defaultItemIcon = input<string>('caret-forward');\n\n  /** Auto-expand the group containing the active route. @default true */\n  readonly autoExpand = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly isGroup = isGroup;\n\n  private readonly opened = signal<ReadonlySet<string>>(new Set());\n\n  private readonly router = inject(Router);\n  private readonly currentUrl = toSignal(\n    this.router.events.pipe(\n      filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n      map(e => e.urlAfterRedirects),\n      startWith(this.router.url)\n    ),\n    { initialValue: this.router.url }\n  );\n\n  /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */\n  private lastAutoUrl: string | null = null;\n\n  constructor() {\n    // Seed defaultOpen groups.\n    effect(() => {\n      const seeded = new Set<string>();\n      for (const entry of this.entries()) {\n        if (isGroup(entry) && entry.defaultOpen) seeded.add(entry.title);\n      }\n      if (seeded.size > 0) {\n        this.opened.update(prev => new Set([...prev, ...seeded]));\n      }\n    });\n\n    // Auto-expand the group containing the current URL.\n    effect(() => {\n      if (!this.autoExpand()) return;\n      const url = this.currentUrl();\n      if (url === this.lastAutoUrl) return;\n      this.lastAutoUrl = url;\n      const match = this.findGroupForUrl(url);\n      if (!match || this.opened().has(match)) return;\n      this.opened.update(prev => {\n        const next = new Set(prev);\n        next.add(match);\n        return next;\n      });\n    });\n  }\n\n  protected isOpen(title: string): boolean {\n    return this.opened().has(title);\n  }\n\n  /** Stable id for the group body, referenced by the toggle's `aria-controls`. */\n  protected groupBodyId(title: string): string {\n    return `wr-sidebar-group-${title.replace(/\\s+/g, '-').toLowerCase()}`;\n  }\n\n  protected toggleGroup(title: string): void {\n    this.opened.update(prev => {\n      const next = new Set(prev);\n      if (next.has(title)) next.delete(title);\n      else next.add(title);\n      return next;\n    });\n  }\n\n  protected asItem(entry: WrSidebarEntry): WrSidebarItem {\n    return entry as WrSidebarItem;\n  }\n\n  protected asGroup(entry: WrSidebarEntry): WrSidebarGroup {\n    return entry as WrSidebarGroup;\n  }\n\n  private findGroupForUrl(url: string): string | null {\n    for (const entry of this.entries()) {\n      if (!isGroup(entry)) continue;\n      const hit = entry.children.some(child => url.startsWith(`/${child.url.join('/')}`));\n      if (hit) return entry.title;\n    }\n    return null;\n  }\n}\n","<nav class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron — not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-skeleton.mjs

@@ -21,7 +21,7 @@ import { input, computed, ViewEncapsulation, Component } from '@angular/core';
  * <wr-skeleton color="primary" [animated]="false" />
  * ```
  *
- * @see https://ngwr.dev/components/skeleton
+ * @see https://ngwr.dev/reference/components/skeleton
  */
 class WrSkeleton {
     /**
@@ -49,10 +49,10 @@ class WrSkeleton {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSkeleton, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-skeleton',

package/fesm2022/ngwr-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-skeleton.mjs","sources":["../../../projects/lib/skeleton/skeleton.ts","../../../projects/lib/skeleton/ngwr-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrColor } from 'ngwr/theme';\n\n/**\n * Placeholder block shown while content is loading.\n *\n * Default sizing fills the parent width and matches the surrounding\n * text height (`1lh`). Override `--wr-skeleton-height` / `width` on the\n * host for custom shapes.\n *\n * @example\n * ```html\n * <wr-skeleton />\n * <wr-skeleton color=\"primary\" [animated]=\"false\" />\n * ```\n *\n * @see https://ngwr.dev/components/skeleton\n */\n@Component({\n  selector: 'wr-skeleton',\n  template: '',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'aria-busy': 'true',\n    'aria-live': 'polite',\n    '[class]': 'classes()',\n  },\n})\nexport class WrSkeleton {\n  /**\n   * Color tint for the placeholder.\n   *\n   * Default is `'light'` because it's theme-stable — the `light` token is\n   * slate-300 in light mode (subtle gray on white) and slate-800 in dark\n   * mode (subtle lift on near-black). The `'dark'` value flips to a near-\n   * white wash in dark mode and breaks the placeholder affordance.\n   *\n   * @default 'light'\n   */\n  readonly color = input<WrColor>('light');\n\n  /**\n   * Whether the shimmer animation runs.\n   *\n   * @default true\n   */\n  readonly animated = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-skeleton', `wr-skeleton--${this.color()}`];\n    if (this.animated()) parts.push('wr-skeleton--animated');\n    return parts.join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAWU,UAAU,CAAA;AACrB;;;;;;;;;AASG;IACM,KAAK,GAAG,KAAK,CAAU,OAAO;8EAAC;AAExC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAElD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE,CAAC;QAC7D,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AACxD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAxBS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,wbARX,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQD,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,EAAE;oBACZ,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;ACpCD;;AAEG;;;;"}
+{"version":3,"file":"ngwr-skeleton.mjs","sources":["../../../projects/lib/skeleton/skeleton.ts","../../../projects/lib/skeleton/ngwr-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrColor } from 'ngwr/theme';\n\n/**\n * Placeholder block shown while content is loading.\n *\n * Default sizing fills the parent width and matches the surrounding\n * text height (`1lh`). Override `--wr-skeleton-height` / `width` on the\n * host for custom shapes.\n *\n * @example\n * ```html\n * <wr-skeleton />\n * <wr-skeleton color=\"primary\" [animated]=\"false\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/skeleton\n */\n@Component({\n  selector: 'wr-skeleton',\n  template: '',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'aria-busy': 'true',\n    'aria-live': 'polite',\n    '[class]': 'classes()',\n  },\n})\nexport class WrSkeleton {\n  /**\n   * Color tint for the placeholder.\n   *\n   * Default is `'light'` because it's theme-stable — the `light` token is\n   * slate-300 in light mode (subtle gray on white) and slate-800 in dark\n   * mode (subtle lift on near-black). The `'dark'` value flips to a near-\n   * white wash in dark mode and breaks the placeholder affordance.\n   *\n   * @default 'light'\n   */\n  readonly color = input<WrColor>('light');\n\n  /**\n   * Whether the shimmer animation runs.\n   *\n   * @default true\n   */\n  readonly animated = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-skeleton', `wr-skeleton--${this.color()}`];\n    if (this.animated()) parts.push('wr-skeleton--animated');\n    return parts.join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAWU,UAAU,CAAA;AACrB;;;;;;;;;AASG;IACM,KAAK,GAAG,KAAK,CAAU,OAAO;8EAAC;AAExC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAElD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE,CAAC;QAC7D,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AACxD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAxBS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,wbARX,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQD,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,EAAE;oBACZ,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;ACpCD;;AAEG;;;;"}

package/fesm2022/ngwr-slider.mjs

@@ -1,8 +1,7 @@
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, signal, computed, viewChild, forwardRef, ViewEncapsulation, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { noop, clamp, round } from 'ngwr/utils';
+import { input, computed, model, output, signal, viewChild, effect, ViewEncapsulation, Component } from '@angular/core';
+import { clamp, round } from 'ngwr/utils';
 
 /**
  * @license
@@ -14,48 +13,79 @@ import { noop, clamp, round } from 'ngwr/utils';
 /**
  * Numeric slider with optional dual-thumb range mode.
  *
- * Implements `ControlValueAccessor` — works with `[(ngModel)]`,
- * `formControl`, `formControlName`. The value shape depends on `range`:
- * `number` (default) or `[number, number]` when `range="true"`.
+ * A signal-forms native control: it implements `FormValueControl<WrSliderValue>`,
+ * so `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. The value
+ * shape depends on `range`: `number` (default) or `[number, number]` when
+ * `range="true"`.
  *
  * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;
  * Home / End jump to min / max; PageUp / PageDown by `step × 10`.
  *
  * @example
  * ```html
- * <wr-slider [(ngModel)]="volume" min="0" max="100" step="5" />
- * <wr-slider [(ngModel)]="range" range min="0" max="1000" step="10" />
+ * <!-- signal forms -->
+ * <wr-slider [formField]="form.volume" min="0" max="100" step="5" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-slider [(value)]="range" range min="0" max="1000" step="10" />
  * ```
  *
- * @see https://ngwr.dev/components/slider
+ * @see https://ngwr.dev/reference/components/slider
  */
 class WrSlider {
+    // Typed `WrSliderValue | undefined` (not `number`) to satisfy the reserved
+    // `FormUiControl` min/max slots, which are keyed to the control's value type.
+    // The transform still coerces to a plain number, so the bounds stay numeric
+    // at runtime; `minValue`/`maxValue` narrow them back for arithmetic.
     /** Lower bound. @default 0 */
     min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 0) });
     /** Upper bound. @default 100 */
     max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 100) });
+    /** Resolved numeric lower bound for internal arithmetic. */
+    minValue = computed(() => {
+        const m = this.min();
+        return typeof m === 'number' ? m : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    /** Resolved numeric upper bound for internal arithmetic. */
+    maxValue = computed(() => {
+        const m = this.max();
+        return typeof m === 'number' ? m : 100;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
     /** Step size for keyboard and drag. @default 1 */
     step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0.0001, coerceNumberProperty(v, 1)) });
     /** Render two thumbs and emit `[low, high]`. @default false */
     range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Disable interaction. @default false */
+    /**
+     * Disable interaction. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Render the current value below the track. @default true */
     showLabel = input(true, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape
+     * follows `range`: a plain `number`, or `[low, high]` in range mode.
+     */
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur so a bound field can mark itself touched. */
+    touch = output();
     low = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
     high = signal(100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
-    disabledFromCva = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
-    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
-    track = viewChild.required('track');
+    track = viewChild.required('track', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-slider'];
         if (this.range())
             parts.push('wr-slider--range');
-        if (this.effectiveDisabled())
+        if (this.disabled())
             parts.push('wr-slider--disabled');
         return parts.join(' ');
     }, /* @ts-ignore */
@@ -70,34 +100,24 @@ class WrSlider {
     ...(ngDevMode ? [{ debugName: "fillWidth" }] : /* istanbul ignore next */ []));
     label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    onChange = noop;
-    onTouched = noop;
-    // ControlValueAccessor
-    writeValue(v) {
-        if (Array.isArray(v)) {
-            const tuple = v;
-            this.low.set(this.clampToBounds(tuple[0]));
-            this.high.set(this.clampToBounds(tuple[1]));
-        }
-        else if (typeof v === 'number') {
-            this.low.set(this.clampToBounds(v));
-        }
-        else {
-            this.low.set(this.min());
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    constructor() {
+        // Keep the internal thumbs in sync with external writes to `value`
+        // (the old `writeValue`): split the tuple / clamp into the low & high cells.
+        effect(() => {
+            const v = this.value();
+            if (Array.isArray(v)) {
+                const tuple = v;
+                this.low.set(this.clampToBounds(tuple[0]));
+                this.high.set(this.clampToBounds(tuple[1]));
+            }
+            else if (typeof v === 'number') {
+                this.low.set(this.clampToBounds(v));
+            }
+        });
     }
     // Interaction
     onPointerDown(event, thumb) {
-        if (this.effectiveDisabled())
+        if (this.disabled())
             return;
         event.preventDefault();
         const target = event.currentTarget;
@@ -107,14 +127,14 @@ class WrSlider {
             target.releasePointerCapture(e.pointerId);
             target.removeEventListener('pointermove', move);
             target.removeEventListener('pointerup', up);
-            this.onTouched();
+            this.touch.emit();
         };
         target.addEventListener('pointermove', move);
         target.addEventListener('pointerup', up);
         this.updateFromEvent(event, thumb);
     }
     onTrackPointerDown(event) {
-        if (this.effectiveDisabled())
+        if (this.disabled())
             return;
         if (event.target.closest('.wr-slider__thumb'))
             return;
@@ -123,7 +143,7 @@ class WrSlider {
         this.focusThumb(thumb);
     }
     onKey(event, thumb) {
-        if (this.effectiveDisabled())
+        if (this.disabled())
             return;
         const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;
         const delta = this.step() * big;
@@ -141,10 +161,10 @@ class WrSlider {
                 next = current - delta;
                 break;
             case 'Home':
-                next = this.min();
+                next = this.minValue();
                 break;
             case 'End':
-                next = this.max();
+                next = this.maxValue();
                 break;
         }
         if (next === null)
@@ -152,13 +172,13 @@ class WrSlider {
         event.preventDefault();
         this.setThumb(thumb, next);
         this.emitChange();
-        this.onTouched();
+        this.touch.emit();
     }
     // Internals
     updateFromEvent(event, thumb) {
         const rect = this.track().nativeElement.getBoundingClientRect();
         const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
-        const raw = this.min() + ratio * (this.max() - this.min());
+        const raw = this.minValue() + ratio * (this.maxValue() - this.minValue());
         this.setThumb(thumb, raw);
         this.emitChange();
     }
@@ -167,7 +187,7 @@ class WrSlider {
             return 'low';
         const rect = this.track().nativeElement.getBoundingClientRect();
         const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
-        const raw = this.min() + ratio * (this.max() - this.min());
+        const raw = this.minValue() + ratio * (this.maxValue() - this.minValue());
         return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';
     }
     focusThumb(thumb) {
@@ -188,43 +208,29 @@ class WrSlider {
         }
     }
     snap(value) {
-        const stepped = Math.round((value - this.min()) / this.step()) * this.step() + this.min();
+        const stepped = Math.round((value - this.minValue()) / this.step()) * this.step() + this.minValue();
         return this.clampToBounds(round(stepped, 6));
     }
     clampToBounds(v) {
-        return clamp(v, this.min(), this.max());
+        return clamp(v, this.minValue(), this.maxValue());
     }
     percentOf(v) {
-        const span = this.max() - this.min();
+        const span = this.maxValue() - this.minValue();
         if (span <= 0)
             return 0;
-        return ((v - this.min()) / span) * 100;
+        return ((v - this.minValue()) / span) * 100;
     }
     emitChange() {
         const value = this.range() ? [this.low(), this.high()] : this.low();
-        this.onChange(value);
+        this.value.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrSlider),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSlider, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrSlider),
-                            multi: true,
-                        },
-                    ], template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n" }]
-        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+            args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-slider.mjs","sources":["../../../projects/lib/slider/slider.ts","../../../projects/lib/slider/slider.html","../../../projects/lib/slider/ngwr-slider.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport type { ElementRef } from '@angular/core';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, signal, viewChild } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { clamp, noop, round } from 'ngwr/utils';\n\nimport type { WrSliderValue } from './interfaces';\n\n/** Trim float drift from step calculations. */\n\n/**\n * Numeric slider with optional dual-thumb range mode.\n *\n * Implements `ControlValueAccessor` — works with `[(ngModel)]`,\n * `formControl`, `formControlName`. The value shape depends on `range`:\n * `number` (default) or `[number, number]` when `range=\"true\"`.\n *\n * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;\n * Home / End jump to min / max; PageUp / PageDown by `step × 10`.\n *\n * @example\n * ```html\n * <wr-slider [(ngModel)]=\"volume\" min=\"0\" max=\"100\" step=\"5\" />\n * <wr-slider [(ngModel)]=\"range\" range min=\"0\" max=\"1000\" step=\"10\" />\n * ```\n *\n * @see https://ngwr.dev/components/slider\n */\n@Component({\n  selector: 'wr-slider',\n  templateUrl: './slider.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrSlider),\n      multi: true,\n    },\n  ],\n})\nexport class WrSlider implements ControlValueAccessor {\n  /** Lower bound. @default 0 */\n  readonly min = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  /** Upper bound. @default 100 */\n  readonly max = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n  /** Step size for keyboard and drag. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n  /** Render two thumbs and emit `[low, high]`. @default false */\n  readonly range = input(false, { transform: coerceBooleanProperty });\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n  /** Render the current value below the track. @default true */\n  readonly showLabel = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly low = signal(0);\n  protected readonly high = signal(100);\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-slider'];\n    if (this.range()) parts.push('wr-slider--range');\n    if (this.effectiveDisabled()) parts.push('wr-slider--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly lowPercent = computed(() => this.percentOf(this.low()));\n  protected readonly highPercent = computed(() => this.percentOf(this.high()));\n\n  protected readonly fillLeft = computed(() => (this.range() ? this.lowPercent() : 0));\n  protected readonly fillWidth = computed(() =>\n    this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent()\n  );\n\n  protected readonly label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`));\n\n  private onChange: (v: WrSliderValue) => void = noop;\n  private onTouched: () => void = noop;\n\n  // ControlValueAccessor\n\n  writeValue(v: WrSliderValue | null): void {\n    if (Array.isArray(v)) {\n      const tuple = v as readonly [number, number];\n      this.low.set(this.clampToBounds(tuple[0]));\n      this.high.set(this.clampToBounds(tuple[1]));\n    } else if (typeof v === 'number') {\n      this.low.set(this.clampToBounds(v));\n    } else {\n      this.low.set(this.min());\n    }\n  }\n\n  registerOnChange(fn: (v: WrSliderValue) => 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.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Interaction\n\n  protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void {\n    if (this.effectiveDisabled()) return;\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    const move = (e: PointerEvent): void => this.updateFromEvent(e, thumb);\n    const up = (e: PointerEvent): void => {\n      target.releasePointerCapture(e.pointerId);\n      target.removeEventListener('pointermove', move);\n      target.removeEventListener('pointerup', up);\n      this.onTouched();\n    };\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', up);\n    this.updateFromEvent(event, thumb);\n  }\n\n  protected onTrackPointerDown(event: PointerEvent): void {\n    if (this.effectiveDisabled()) return;\n    if ((event.target as HTMLElement).closest('.wr-slider__thumb')) return;\n    const thumb = this.nearestThumb(event);\n    this.updateFromEvent(event, thumb);\n    this.focusThumb(thumb);\n  }\n\n  protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.effectiveDisabled()) return;\n    const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;\n    const delta = this.step() * big;\n    const current = thumb === 'low' ? this.low() : this.high();\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n      case 'PageUp':\n        next = current + delta;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n      case 'PageDown':\n        next = current - delta;\n        break;\n      case 'Home':\n        next = this.min();\n        break;\n      case 'End':\n        next = this.max();\n        break;\n    }\n\n    if (next === null) return;\n    event.preventDefault();\n    this.setThumb(thumb, next);\n    this.emitChange();\n    this.onTouched();\n  }\n\n  // Internals\n\n  private updateFromEvent(event: PointerEvent, thumb: 'low' | 'high'): void {\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.min() + ratio * (this.max() - this.min());\n    this.setThumb(thumb, raw);\n    this.emitChange();\n  }\n\n  private nearestThumb(event: PointerEvent): 'low' | 'high' {\n    if (!this.range()) return 'low';\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.min() + ratio * (this.max() - this.min());\n    return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';\n  }\n\n  private focusThumb(thumb: 'low' | 'high'): void {\n    queueMicrotask(() => {\n      const root = this.track().nativeElement;\n      const el = root.querySelector<HTMLElement>(`.wr-slider__thumb--${thumb}`);\n      el?.focus();\n    });\n  }\n\n  private setThumb(thumb: 'low' | 'high', raw: number): void {\n    const stepped = this.snap(raw);\n    if (thumb === 'low') {\n      const next = this.range() ? Math.min(stepped, this.high()) : stepped;\n      this.low.set(next);\n    } else {\n      this.high.set(Math.max(stepped, this.low()));\n    }\n  }\n\n  private snap(value: number): number {\n    const stepped = Math.round((value - this.min()) / this.step()) * this.step() + this.min();\n    return this.clampToBounds(round(stepped, 6));\n  }\n\n  private clampToBounds(v: number): number {\n    return clamp(v, this.min(), this.max());\n  }\n\n  private percentOf(v: number): number {\n    const span = this.max() - this.min();\n    if (span <= 0) return 0;\n    return ((v - this.min()) / span) * 100;\n  }\n\n  private emitChange(): void {\n    const value: WrSliderValue = this.range() ? [this.low(), this.high()] : this.low();\n    this.onChange(value);\n  }\n}\n","<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-slider.mjs","sources":["../../../projects/lib/slider/slider.ts","../../../projects/lib/slider/slider.html","../../../projects/lib/slider/ngwr-slider.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport type { ElementRef } from '@angular/core';\nimport { Component, ViewEncapsulation, computed, effect, input, model, output, signal, viewChild } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { clamp, round } from 'ngwr/utils';\n\nimport type { WrSliderValue } from './interfaces';\n\n/** Trim float drift from step calculations. */\n\n/**\n * Numeric slider with optional dual-thumb range mode.\n *\n * A signal-forms native control: it implements `FormValueControl<WrSliderValue>`,\n * so `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone. The value\n * shape depends on `range`: `number` (default) or `[number, number]` when\n * `range=\"true\"`.\n *\n * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;\n * Home / End jump to min / max; PageUp / PageDown by `step × 10`.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-slider [formField]=\"form.volume\" min=\"0\" max=\"100\" step=\"5\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-slider [(value)]=\"range\" range min=\"0\" max=\"1000\" step=\"10\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/slider\n */\n@Component({\n  selector: 'wr-slider',\n  templateUrl: './slider.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrSlider implements FormValueControl<WrSliderValue> {\n  // Typed `WrSliderValue | undefined` (not `number`) to satisfy the reserved\n  // `FormUiControl` min/max slots, which are keyed to the control's value type.\n  // The transform still coerces to a plain number, so the bounds stay numeric\n  // at runtime; `minValue`/`maxValue` narrow them back for arithmetic.\n  /** Lower bound. @default 0 */\n  readonly min = input<WrSliderValue | undefined>(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  /** Upper bound. @default 100 */\n  readonly max = input<WrSliderValue | undefined>(100, {\n    transform: (v: unknown): number => coerceNumberProperty(v, 100),\n  });\n\n  /** Resolved numeric lower bound for internal arithmetic. */\n  private readonly minValue = computed(() => {\n    const m = this.min();\n    return typeof m === 'number' ? m : 0;\n  });\n  /** Resolved numeric upper bound for internal arithmetic. */\n  private readonly maxValue = computed(() => {\n    const m = this.max();\n    return typeof m === 'number' ? m : 100;\n  });\n\n  /** Step size for keyboard and drag. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n  /** Render two thumbs and emit `[low, high]`. @default false */\n  readonly range = input(false, { transform: coerceBooleanProperty });\n  /**\n   * Disable interaction. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n  /** Render the current value below the track. @default true */\n  readonly showLabel = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape\n   * follows `range`: a plain `number`, or `[low, high]` in range mode.\n   */\n  readonly value = model<WrSliderValue>(0);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly low = signal(0);\n  protected readonly high = signal(100);\n\n  protected readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-slider'];\n    if (this.range()) parts.push('wr-slider--range');\n    if (this.disabled()) parts.push('wr-slider--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly lowPercent = computed(() => this.percentOf(this.low()));\n  protected readonly highPercent = computed(() => this.percentOf(this.high()));\n\n  protected readonly fillLeft = computed(() => (this.range() ? this.lowPercent() : 0));\n  protected readonly fillWidth = computed(() =>\n    this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent()\n  );\n\n  protected readonly label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`));\n\n  constructor() {\n    // Keep the internal thumbs in sync with external writes to `value`\n    // (the old `writeValue`): split the tuple / clamp into the low & high cells.\n    effect(() => {\n      const v = this.value();\n      if (Array.isArray(v)) {\n        const tuple = v as readonly [number, number];\n        this.low.set(this.clampToBounds(tuple[0]));\n        this.high.set(this.clampToBounds(tuple[1]));\n      } else if (typeof v === 'number') {\n        this.low.set(this.clampToBounds(v));\n      }\n    });\n  }\n\n  // Interaction\n\n  protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    const move = (e: PointerEvent): void => this.updateFromEvent(e, thumb);\n    const up = (e: PointerEvent): void => {\n      target.releasePointerCapture(e.pointerId);\n      target.removeEventListener('pointermove', move);\n      target.removeEventListener('pointerup', up);\n      this.touch.emit();\n    };\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', up);\n    this.updateFromEvent(event, thumb);\n  }\n\n  protected onTrackPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    if ((event.target as HTMLElement).closest('.wr-slider__thumb')) return;\n    const thumb = this.nearestThumb(event);\n    this.updateFromEvent(event, thumb);\n    this.focusThumb(thumb);\n  }\n\n  protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;\n    const delta = this.step() * big;\n    const current = thumb === 'low' ? this.low() : this.high();\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n      case 'PageUp':\n        next = current + delta;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n      case 'PageDown':\n        next = current - delta;\n        break;\n      case 'Home':\n        next = this.minValue();\n        break;\n      case 'End':\n        next = this.maxValue();\n        break;\n    }\n\n    if (next === null) return;\n    event.preventDefault();\n    this.setThumb(thumb, next);\n    this.emitChange();\n    this.touch.emit();\n  }\n\n  // Internals\n\n  private updateFromEvent(event: PointerEvent, thumb: 'low' | 'high'): void {\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.minValue() + ratio * (this.maxValue() - this.minValue());\n    this.setThumb(thumb, raw);\n    this.emitChange();\n  }\n\n  private nearestThumb(event: PointerEvent): 'low' | 'high' {\n    if (!this.range()) return 'low';\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.minValue() + ratio * (this.maxValue() - this.minValue());\n    return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';\n  }\n\n  private focusThumb(thumb: 'low' | 'high'): void {\n    queueMicrotask(() => {\n      const root = this.track().nativeElement;\n      const el = root.querySelector<HTMLElement>(`.wr-slider__thumb--${thumb}`);\n      el?.focus();\n    });\n  }\n\n  private setThumb(thumb: 'low' | 'high', raw: number): void {\n    const stepped = this.snap(raw);\n    if (thumb === 'low') {\n      const next = this.range() ? Math.min(stepped, this.high()) : stepped;\n      this.low.set(next);\n    } else {\n      this.high.set(Math.max(stepped, this.low()));\n    }\n  }\n\n  private snap(value: number): number {\n    const stepped = Math.round((value - this.minValue()) / this.step()) * this.step() + this.minValue();\n    return this.clampToBounds(round(stepped, 6));\n  }\n\n  private clampToBounds(v: number): number {\n    return clamp(v, this.minValue(), this.maxValue());\n  }\n\n  private percentOf(v: number): number {\n    const span = this.maxValue() - this.minValue();\n    if (span <= 0) return 0;\n    return ((v - this.minValue()) / span) * 100;\n  }\n\n  private emitChange(): void {\n    const value: WrSliderValue = this.range() ? [this.low(), this.high()] : this.low();\n    this.value.set(value);\n  }\n}\n","<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-sparkline.mjs

@@ -18,7 +18,7 @@ import { input, computed, ViewEncapsulation, Component } from '@angular/core';
  * <wr-sparkline [data]="prices" [showArea]="true" color="var(--wr-color-success)" />
  * ```
  *
- * @see https://ngwr.dev/components/sparkline
+ * @see https://ngwr.dev/reference/components/sparkline
  */
 class WrSparkline {
     data = input([], /* @ts-ignore */
@@ -88,10 +88,10 @@ class WrSparkline {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tipPoint" }] : /* istanbul ignore next */ []));
     viewBox = `0 0 ${this.vbW} ${this.vbH}`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showTip: { classPropertyName: "showTip", publicName: "showTip", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, ngImport: i0, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showTip: { classPropertyName: "showTip", publicName: "showTip", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, ngImport: i0, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSparkline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSparkline, decorators: [{
             type: Component,
             args: [{ selector: 'wr-sparkline', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sparkline' }, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTip", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });