ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/directives/wr-input.ts","../../../projects/lib/input/directives/wr-input-prefix.ts","../../../projects/lib/input/directives/wr-input-suffix.ts","../../../projects/lib/input/input-group.ts","../../../projects/lib/input/password-toggle.ts","../../../projects/lib/input/password-toggle.html","../../../projects/lib/input/ngwr-input.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 { Directive, ElementRef, computed, inject, input } from '@angular/core';\n\nimport { WR_FORM_FIELD } from 'ngwr/form';\n\nimport type { WrInputSize } from '../interfaces';\n\n/**\n * Applies NGWR input styling to a native `<input>` element.\n *\n * Because this is an attribute directive on the real `<input>` (not a wrapper\n * component), any other directive that targets `input` — `[(ngModel)]`,\n * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes\n * naturally on the same element.\n *\n * @example\n * ```html\n * <input wrInput [(ngModel)]=\"name\" placeholder=\"Your name\" />\n *\n * <!-- Works with ngx-mask, validators, etc. -->\n * <input wrInput [(ngModel)]=\"phone\" mask=\"(000) 000-0000\" />\n * ```\n *\n * For prefix / suffix / password-toggle layouts, wrap the input in\n * `<wr-input-group>`.\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Directive({\n  selector: 'input[wrInput], textarea[wrInput]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.id]': 'resolvedId()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '[attr.aria-describedby]': 'describedBy()',\n  },\n})\nexport class WrInput {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Read once, at construction: a static `id=\"\"` in the template is already on\n   * the element by the time a directive is instantiated, and it must win over\n   * the field's generated one.\n   */\n  private readonly ownId = this.host.nativeElement.getAttribute('id');\n\n  /**\n   * Adopts the surrounding `<wr-form-field>`'s `controlId`, so the label it\n   * already rendered actually points at this element. Without this the `for`\n   * referenced an id that existed nowhere and the input had no label at all.\n   */\n  protected readonly resolvedId = computed(() => this.ownId ?? this.field?.controlId() ?? null);\n\n  /**\n   * Announced state, taken from the surrounding `<wr-form-field>`.\n   *\n   * The field renders the message but cannot reach the projected control, so\n   * the control reads back: without this the error is visible on screen and\n   * invisible to a screen reader, which never learns the field is invalid or\n   * what the message says.\n   */\n  protected readonly ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null));\n  protected readonly describedBy = computed(() => this.field?.describedBy() ?? null);\n\n  /**\n   * Control size. Named `wrSize` (not `size`) so it never clashes with the\n   * native `<input size>` attribute. @default 'md'\n   */\n  readonly wrSize = input<WrInputSize>('md');\n\n  /** Pill-shaped corners. @default false */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input'];\n    const size = this.wrSize();\n    if (size !== 'md') parts.push(`wr-input--${size}`);\n    if (this.rounded()) parts.push('wr-input--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **left** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's left edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputPrefix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },\n})\nexport class WrInputPrefix {}\n","/**\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **right** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's right edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputSuffix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },\n})\nexport class WrInputSuffix {}\n","/**\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\n/**\n * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /\n * `<wr-password-toggle>` siblings. Renders the border and focus ring; the\n * inner native input drops its own border so it visually melts into the\n * group.\n *\n * Pure layout — no signals shared with the inner directive, focus styling is\n * driven entirely by `:focus-within` so any focusable child counts.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Component({\n  selector: 'wr-input-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrInputGroup {\n  /** Pill-shaped corners. @default false */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input-group'];\n    if (this.rounded()) parts.push('wr-input-group--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/**\n * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`\n * attribute between `password` and `text`. Drop it inside an\n * `<wr-input-group>` next to a password input.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput type=\"password\" [(ngModel)]=\"pw\" #pwInput />\n *   <wr-password-toggle [for]=\"pwInput\" />\n * </wr-input-group>\n * ```\n */\n@Component({\n  selector: 'wr-password-toggle',\n  templateUrl: './password-toggle.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrPasswordToggle {\n  /** Reference to the linked password input. */\n  readonly for = input.required<HTMLInputElement>();\n\n  protected readonly revealed = signal(false);\n\n  /** Accessible name while the password is hidden. Falls back to `input.showPassword`. */\n  readonly showLabel = input<string | null>(null);\n\n  /** Accessible name while the password is revealed. Falls back to `input.hidePassword`. */\n  readonly hideLabel = input<string | null>(null);\n\n  private readonly resolvedShowLabel = useI18nText(this.showLabel, 'input.showPassword', 'Show password');\n  private readonly resolvedHideLabel = useI18nText(this.hideLabel, 'input.hidePassword', 'Hide password');\n\n  protected readonly ariaLabel = computed(() =>\n    this.revealed() ? this.resolvedHideLabel() : this.resolvedShowLabel()\n  );\n\n  protected toggle(): void {\n    const input = this.for();\n    const next = input.type === 'password' ? 'text' : 'password';\n    input.type = next;\n    this.revealed.set(next === 'text');\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\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=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\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=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\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-input.mjs","sources":["../../../projects/lib/input/directives/wr-input.ts","../../../projects/lib/input/directives/wr-input-prefix.ts","../../../projects/lib/input/directives/wr-input-suffix.ts","../../../projects/lib/input/input-group.ts","../../../projects/lib/input/password-toggle.ts","../../../projects/lib/input/password-toggle.html","../../../projects/lib/input/ngwr-input.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 { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, computed, inject, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\nimport { WR_FORM_FIELD } from 'ngwr/form';\n\nimport type { WrInputSize } from '../interfaces';\n\n/**\n * Applies NGWR input styling to a native `<input>` element.\n *\n * Because this is an attribute directive on the real `<input>` (not a wrapper\n * component), any other directive that targets `input` — `[(ngModel)]`,\n * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes\n * naturally on the same element.\n *\n * @example\n * ```html\n * <input wrInput [(ngModel)]=\"name\" placeholder=\"Your name\" />\n *\n * <!-- Works with ngx-mask, validators, etc. -->\n * <input wrInput [(ngModel)]=\"phone\" mask=\"(000) 000-0000\" />\n * ```\n *\n * For prefix / suffix / password-toggle layouts, wrap the input in\n * `<wr-input-group>`.\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Directive({\n  selector: 'input[wrInput], textarea[wrInput]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.id]': 'resolvedId()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '[attr.aria-describedby]': 'describedBy()',\n  },\n})\nexport class WrInput {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Read once, at construction: a static `id=\"\"` in the template is already on\n   * the element by the time a directive is instantiated, and it must win over\n   * the field's generated one.\n   */\n  private readonly ownId = this.host.nativeElement.getAttribute('id');\n\n  /**\n   * Adopts the surrounding `<wr-form-field>`'s `controlId`, so the label it\n   * already rendered actually points at this element. Without this the `for`\n   * referenced an id that existed nowhere and the input had no label at all.\n   */\n  protected readonly resolvedId = computed(() => this.ownId ?? this.field?.controlId() ?? null);\n\n  constructor() {\n    // Tell the field which id actually stuck. Without this its `<label for>` keeps\n    // pointing at the generated id while this element answers to the author's own —\n    // a label referencing nothing, which is the same as having none.\n    if (this.ownId) this.field?.adoptControlId(this.ownId);\n  }\n\n  /**\n   * Announced state, taken from the surrounding `<wr-form-field>`.\n   *\n   * The field renders the message but cannot reach the projected control, so\n   * the control reads back: without this the error is visible on screen and\n   * invisible to a screen reader, which never learns the field is invalid or\n   * what the message says.\n   */\n  protected readonly ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null));\n  protected readonly describedBy = computed(() => this.field?.describedBy() ?? null);\n\n  /**\n   * Control size. Named `wrSize` (not `size`) so it never clashes with the\n   * native `<input size>` attribute. Unset, it falls back to\n   * `provideWrConfig({ input: { size } })`. @default 'md'\n   */\n  readonly wrSize = input<WrInputSize | null>(null);\n\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })`; `[rounded]=\"false\"` turns a\n   * configured `true` back off. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving: the plain `coerceBooleanProperty` folds `null` into `false`,\n    // which would make \"not set\" and \"set to false\" the same value — and a config\n    // default nothing could ever supply. A valueless `rounded` attribute still\n    // arrives as `''` and still coerces to `true`.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `null` as each input's own default, not `'md'` / `false`: with a literal sitting\n  // there, \"the template said nothing\" and \"the template said md\" are the same value,\n  // so no app-wide default could ever apply. The effective default is the last\n  // argument below, which is where the old inline one moved to.\n  protected readonly resolvedSize = useConfigValue(this.wrSize, c => c.input?.size, 'md');\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input'];\n    const size = this.resolvedSize();\n    if (size !== 'md') parts.push(`wr-input--${size}`);\n    if (this.resolvedRounded()) parts.push('wr-input--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **left** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's left edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputPrefix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },\n})\nexport class WrInputPrefix {}\n","/**\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **right** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's right edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputSuffix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },\n})\nexport class WrInputSuffix {}\n","/**\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 { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\n\n/**\n * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /\n * `<wr-password-toggle>` siblings. Renders the border and focus ring; the\n * inner native input drops its own border so it visually melts into the\n * group.\n *\n * Pure layout — no signals shared with the inner directive, focus styling is\n * driven entirely by `:focus-within` so any focusable child counts.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Component({\n  selector: 'wr-input-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrInputGroup {\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })` — the same key the inner `[wrInput]`\n   * reads. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving, like `[wrInput]`'s: the plain `coerceBooleanProperty` folds\n    // `null` into `false`, which would make \"not set\" and \"set to false\" the same\n    // value — and a config default nothing could ever supply.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `input.rounded`, and deliberately not a key of its own: the group owns the visible\n  // border once it wraps an input, which drops its own chrome. Resolving one and not\n  // the other would put a pill radius on the element nobody can see and leave the\n  // corner the user does see square.\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input-group'];\n    if (this.resolvedRounded()) parts.push('wr-input-group--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/**\n * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`\n * attribute between `password` and `text`. Drop it inside an\n * `<wr-input-group>` next to a password input.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput type=\"password\" [(ngModel)]=\"pw\" #pwInput />\n *   <wr-password-toggle [for]=\"pwInput\" />\n * </wr-input-group>\n * ```\n */\n@Component({\n  selector: 'wr-password-toggle',\n  templateUrl: './password-toggle.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrPasswordToggle {\n  /** Reference to the linked password input. */\n  readonly for = input.required<HTMLInputElement>();\n\n  protected readonly revealed = signal(false);\n\n  /** Accessible name while the password is hidden. Falls back to `input.showPassword`. */\n  readonly showLabel = input<string | null>(null);\n\n  /** Accessible name while the password is revealed. Falls back to `input.hidePassword`. */\n  readonly hideLabel = input<string | null>(null);\n\n  private readonly resolvedShowLabel = useI18nText(this.showLabel, 'input.showPassword', 'Show password');\n  private readonly resolvedHideLabel = useI18nText(this.hideLabel, 'input.hidePassword', 'Hide password');\n\n  protected readonly ariaLabel = computed(() =>\n    this.revealed() ? this.resolvedHideLabel() : this.resolvedShowLabel()\n  );\n\n  protected toggle(): void {\n    const input = this.for();\n    const next = input.type === 'password' ? 'text' : 'password';\n    input.type = next;\n    this.revealed.set(next === 'text');\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\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=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\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=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-keyboard.mjs

@@ -26,10 +26,10 @@ class WrKbd {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     classes = computed(() => `wr-kbd wr-kbd--${this.size()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrKbd, isStandalone: true, selector: "wr-kbd", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrKbd, isStandalone: true, selector: "wr-kbd", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrKbd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrKbd, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-kbd',

package/fesm2022/ngwr-knob.mjs

@@ -2,7 +2,7 @@ import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coerci
 import * as i0 from '@angular/core';
 import { input, computed, model, output, inject, ElementRef, effect, ViewEncapsulation, Component } from '@angular/core';
 import { useI18nText } from 'ngwr/i18n';
-import { clamp } from 'ngwr/utils';
+import { clamp, round } from 'ngwr/utils';
 
 /**
  * @license
@@ -78,13 +78,17 @@ class WrKnob {
         const parts = ['wr-knob'];
         if (this.disabled())
             parts.push('wr-knob--disabled');
+        if (this.readonly())
+            parts.push('wr-knob--readonly');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     // Geometry — drawn into a 100×100 viewBox, scaled by `size`.
     cx = 50;
     cy = 50;
-    radius = computed(() => 50 - this.strokeWidth() / 2 - 0.5, /* @ts-ignore */
+    // A negative radius is invalid in the SVG path grammar, so the browser drops
+    // the arc and the dial vanishes — which a fat stroke reaches at 99.
+    radius = computed(() => Math.max(1, 50 - this.strokeWidth() / 2 - 0.5), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     /** Ratio of the filled arc — `0` at min, `1` at max. */
     ratio = computed(() => {
@@ -128,9 +132,18 @@ class WrKnob {
     onPointerDown(event) {
         if (!this.interactive())
             return;
+        // Any pointerdown used to start a drag, so the right button turned the dial;
+        // the same guard keeps a second finger out of a drag already in progress.
+        if (event.button !== 0 || !event.isPrimary)
+            return;
         event.preventDefault();
         this.dragging = true;
-        event.currentTarget.setPointerCapture(event.pointerId);
+        const surface = event.currentTarget;
+        surface.setPointerCapture(event.pointerId);
+        // `preventDefault` above also suppresses the click's default focus, so the
+        // arrows did nothing after a mouse drag until the dial was found again with
+        // Tab. `wr-slider` focuses its thumb for the same reason.
+        surface.focus();
         this.updateFromPointer(event);
     }
     onPointerMove(event) {
@@ -145,6 +158,15 @@ class WrKnob {
         event.currentTarget.releasePointerCapture(event.pointerId);
         this.touch.emit();
     }
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and
+     * pointer-up cannot be the only source: a knob reached by Tab and moved with
+     * the arrows would leave the field untouched forever. `wr-rating`, whose
+     * template this one otherwise mirrors, emits on blur for exactly this reason.
+     */
+    onBlur() {
+        this.touch.emit();
+    }
     onKeydown(event) {
         if (!this.interactive())
             return;
@@ -169,7 +191,22 @@ class WrKnob {
                 return;
         }
         event.preventDefault();
-        this.commit(clamp(next, this.minValue(), this.maxValue()));
+        this.commit(this.snap(next));
+    }
+    /**
+     * Nearest step, measured FROM `min`. A grid anchored at zero offers values the
+     * arrows can never reach whenever `min` is not a multiple of `step` — with
+     * `min: 5, step: 10` the middle of the arc used to commit 60, off a grid whose
+     * points are 5, 15, … 55, 65. Rounded at six decimals because a tenth is not a
+     * binary fraction: three arrow presses at `step: 0.1` otherwise announce
+     * `aria-valuenow="0.30000000000000004"` and print it in the dial. Same shape as
+     * `wr-slider`'s `snap`, deliberately — including Home / End, so a range that is
+     * not a whole number of steps stops at the last reachable value.
+     */
+    snap(value) {
+        const min = this.minValue();
+        const stepped = Math.round((value - min) / this.step()) * this.step() + min;
+        return clamp(round(stepped, 6), min, this.maxValue());
     }
     // Internals
     updateFromPointer(event) {
@@ -185,8 +222,7 @@ class WrKnob {
         const ratio = (angle - ARC_START) / ARC_SWEEP;
         const range = this.maxValue() - this.minValue();
         const raw = this.minValue() + ratio * range;
-        const stepped = Math.round(raw / this.step()) * this.step();
-        this.commit(clamp(stepped, this.minValue(), this.maxValue()));
+        this.commit(this.snap(raw));
     }
     commit(next) {
         if (next === this.value())
@@ -205,12 +241,12 @@ class WrKnob {
         const largeArc = endDeg - startDeg > 180 ? 1 : 0;
         return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrKnob, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrKnob, isStandalone: true, selector: "wr-knob", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrKnob, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrKnob, isStandalone: true, selector: "wr-knob", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrKnob, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrKnob, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-knob', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'wr-knob', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**

package/fesm2022/ngwr-knob.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-knob.mjs","sources":["../../../projects/lib/knob/knob.ts","../../../projects/lib/knob/knob.html","../../../projects/lib/knob/ngwr-knob.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 {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { clamp } from 'ngwr/utils';\n\nconst ARC_START = -135; // 7 o'clock\nconst ARC_END = 135; // 5 o'clock — 270° sweep total\nconst ARC_SWEEP = ARC_END - ARC_START;\n\n/**\n * Radial dial input. A signal-forms native control: it implements\n * `FormValueControl<number>`, so `[formField]` binds straight to its `value`\n * model — no `ControlValueAccessor` in between. `[(value)]` works standalone.\n *\n * The value is clamped to `[min, max]`. Drag the indicator around the dial or\n * use ←→ / ↑↓ to step.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-knob [formField]=\"form.volume\" [min]=\"0\" [max]=\"100\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-knob [(value)]=\"vol\" suffix=\"%\" valueColor=\"var(--wr-color-success)\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/knob\n */\n@Component({\n  selector: 'wr-knob',\n  templateUrl: './knob.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrKnob implements FormValueControl<number> {\n  /** Accessible name — the role needs one. Falls back to `knob.label`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'knob.label', 'Value');\n\n  /** Minimum allowed value. @default 0 */\n  readonly min = input<number | undefined>(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n\n  /** Maximum allowed value. @default 100 */\n  readonly max = input<number | undefined>(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly minValue = computed(() => this.min() ?? 0);\n  private readonly maxValue = computed(() => this.max() ?? 100);\n\n  /** Step granularity. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n\n  /** Dial diameter in CSS pixels. @default 120 */\n  readonly size = input(120, { transform: (v: unknown): number => Math.max(32, coerceNumberProperty(v, 120)) });\n\n  /** Stroke width of the dial arc, in CSS pixels. @default 8 */\n  readonly strokeWidth = input(8, {\n    transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 8)),\n  });\n\n  /** Track (unfilled) color. @default rgba(--wr-color-light, 0.6) */\n  readonly trackColor = input<string>('rgba(var(--wr-color-light-rgb), 0.6)');\n\n  /** Filled-arc color. @default var(--wr-color-primary) */\n  readonly valueColor = input<string>('var(--wr-color-primary)');\n\n  /** Show the value text in the center. @default true */\n  readonly showValue = input(true, { transform: coerceBooleanProperty });\n\n  /** Optional suffix appended to the center text (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Read-only — disables interaction but keeps the visual. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<number>(0);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  private dragging = false;\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-knob'];\n    if (this.disabled()) parts.push('wr-knob--disabled');\n    return parts.join(' ');\n  });\n\n  // Geometry — drawn into a 100×100 viewBox, scaled by `size`.\n  protected readonly cx = 50;\n  protected readonly cy = 50;\n  protected readonly radius = computed(() => 50 - this.strokeWidth() / 2 - 0.5);\n\n  /** Ratio of the filled arc — `0` at min, `1` at max. */\n  protected readonly ratio = computed(() => {\n    const range = this.maxValue() - this.minValue();\n    if (range <= 0) return 0;\n    return clamp((this.value() - this.minValue()) / range, 0, 1);\n  });\n\n  /** SVG path `d` for the background arc. */\n  protected readonly trackPath = computed(() => this.arcPath(ARC_START, ARC_END));\n\n  /** SVG path `d` for the filled arc. */\n  protected readonly valuePath = computed(() => {\n    const end = ARC_START + ARC_SWEEP * this.ratio();\n    return this.arcPath(ARC_START, end);\n  });\n\n  /** Position of the handle dot — `{ x, y }` in viewBox units. */\n  protected readonly handlePos = computed(() => {\n    const angle = ARC_START + ARC_SWEEP * this.ratio();\n    const rad = (angle * Math.PI) / 180;\n    return {\n      x: this.cx + this.radius() * Math.sin(rad),\n      y: this.cy - this.radius() * Math.cos(rad),\n    };\n  });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor() {\n    // Keep the value within `[min, max]` even when written externally (via\n    // `[formField]` / `[(value)]`). Interactive changes are already clamped in\n    // `commit`, so this only normalizes out-of-range external writes.\n    effect(() => {\n      const clamped = clamp(this.value(), this.minValue(), this.maxValue());\n      if (clamped !== this.value()) this.value.set(clamped);\n    });\n  }\n\n  // Pointer / keyboard\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (!this.interactive()) return;\n    event.preventDefault();\n    this.dragging = true;\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n    this.touch.emit();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const step = event.shiftKey ? this.step() * 10 : this.step();\n    let next: number | null;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = this.value() + step;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = this.value() - step;\n        break;\n      case 'Home':\n        next = this.minValue();\n        break;\n      case 'End':\n        next = this.maxValue();\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.commit(clamp(next, this.minValue(), this.maxValue()));\n  }\n\n  // Internals\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const dx = event.clientX - (rect.left + rect.width / 2);\n    const dy = event.clientY - (rect.top + rect.height / 2);\n    // Angle measured from 12 o'clock, clockwise.\n    let angle = (Math.atan2(dx, -dy) * 180) / Math.PI;\n    // Map [-180, 180] into the dial's arc range, clamping outside it.\n    if (angle < ARC_START) angle = angle + 360 > ARC_END ? ARC_START : angle + 360;\n    angle = clamp(angle, ARC_START, ARC_END);\n    const ratio = (angle - ARC_START) / ARC_SWEEP;\n    const range = this.maxValue() - this.minValue();\n    const raw = this.minValue() + ratio * range;\n    const stepped = Math.round(raw / this.step()) * this.step();\n    this.commit(clamp(stepped, this.minValue(), this.maxValue()));\n  }\n\n  private commit(next: number): void {\n    if (next === this.value()) return;\n    this.value.set(next);\n  }\n\n  // Arc helper\n\n  private arcPath(startDeg: number, endDeg: number): string {\n    const r = this.radius();\n    const s = (startDeg * Math.PI) / 180;\n    const e = (endDeg * Math.PI) / 180;\n    const sx = this.cx + r * Math.sin(s);\n    const sy = this.cy - r * Math.cos(s);\n    const ex = this.cx + r * Math.sin(e);\n    const ey = this.cy - r * Math.cos(e);\n    const largeArc = endDeg - startDeg > 180 ? 1 : 0;\n    return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`;\n  }\n}\n","<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\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-knob.mjs","sources":["../../../projects/lib/knob/knob.ts","../../../projects/lib/knob/knob.html","../../../projects/lib/knob/ngwr-knob.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 {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { clamp, round } from 'ngwr/utils';\n\nconst ARC_START = -135; // 7 o'clock\nconst ARC_END = 135; // 5 o'clock — 270° sweep total\nconst ARC_SWEEP = ARC_END - ARC_START;\n\n/**\n * Radial dial input. A signal-forms native control: it implements\n * `FormValueControl<number>`, so `[formField]` binds straight to its `value`\n * model — no `ControlValueAccessor` in between. `[(value)]` works standalone.\n *\n * The value is clamped to `[min, max]`. Drag the indicator around the dial or\n * use ←→ / ↑↓ to step.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-knob [formField]=\"form.volume\" [min]=\"0\" [max]=\"100\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-knob [(value)]=\"vol\" suffix=\"%\" valueColor=\"var(--wr-color-success)\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/knob\n */\n@Component({\n  selector: 'wr-knob',\n  templateUrl: './knob.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrKnob implements FormValueControl<number> {\n  /** Accessible name — the role needs one. Falls back to `knob.label`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'knob.label', 'Value');\n\n  /** Minimum allowed value. @default 0 */\n  readonly min = input<number | undefined>(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n\n  /** Maximum allowed value. @default 100 */\n  readonly max = input<number | undefined>(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly minValue = computed(() => this.min() ?? 0);\n  private readonly maxValue = computed(() => this.max() ?? 100);\n\n  /** Step granularity. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n\n  /** Dial diameter in CSS pixels. @default 120 */\n  readonly size = input(120, { transform: (v: unknown): number => Math.max(32, coerceNumberProperty(v, 120)) });\n\n  /** Stroke width of the dial arc, in CSS pixels. @default 8 */\n  readonly strokeWidth = input(8, {\n    transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 8)),\n  });\n\n  /** Track (unfilled) color. @default rgba(--wr-color-light, 0.6) */\n  readonly trackColor = input<string>('rgba(var(--wr-color-light-rgb), 0.6)');\n\n  /** Filled-arc color. @default var(--wr-color-primary) */\n  readonly valueColor = input<string>('var(--wr-color-primary)');\n\n  /** Show the value text in the center. @default true */\n  readonly showValue = input(true, { transform: coerceBooleanProperty });\n\n  /** Optional suffix appended to the center text (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Read-only — disables interaction but keeps the visual. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<number>(0);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  private dragging = false;\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-knob'];\n    if (this.disabled()) parts.push('wr-knob--disabled');\n    if (this.readonly()) parts.push('wr-knob--readonly');\n    return parts.join(' ');\n  });\n\n  // Geometry — drawn into a 100×100 viewBox, scaled by `size`.\n  protected readonly cx = 50;\n  protected readonly cy = 50;\n  // A negative radius is invalid in the SVG path grammar, so the browser drops\n  // the arc and the dial vanishes — which a fat stroke reaches at 99.\n  protected readonly radius = computed(() => Math.max(1, 50 - this.strokeWidth() / 2 - 0.5));\n\n  /** Ratio of the filled arc — `0` at min, `1` at max. */\n  protected readonly ratio = computed(() => {\n    const range = this.maxValue() - this.minValue();\n    if (range <= 0) return 0;\n    return clamp((this.value() - this.minValue()) / range, 0, 1);\n  });\n\n  /** SVG path `d` for the background arc. */\n  protected readonly trackPath = computed(() => this.arcPath(ARC_START, ARC_END));\n\n  /** SVG path `d` for the filled arc. */\n  protected readonly valuePath = computed(() => {\n    const end = ARC_START + ARC_SWEEP * this.ratio();\n    return this.arcPath(ARC_START, end);\n  });\n\n  /** Position of the handle dot — `{ x, y }` in viewBox units. */\n  protected readonly handlePos = computed(() => {\n    const angle = ARC_START + ARC_SWEEP * this.ratio();\n    const rad = (angle * Math.PI) / 180;\n    return {\n      x: this.cx + this.radius() * Math.sin(rad),\n      y: this.cy - this.radius() * Math.cos(rad),\n    };\n  });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor() {\n    // Keep the value within `[min, max]` even when written externally (via\n    // `[formField]` / `[(value)]`). Interactive changes are already clamped in\n    // `commit`, so this only normalizes out-of-range external writes.\n    effect(() => {\n      const clamped = clamp(this.value(), this.minValue(), this.maxValue());\n      if (clamped !== this.value()) this.value.set(clamped);\n    });\n  }\n\n  // Pointer / keyboard\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (!this.interactive()) return;\n    // Any pointerdown used to start a drag, so the right button turned the dial;\n    // the same guard keeps a second finger out of a drag already in progress.\n    if (event.button !== 0 || !event.isPrimary) return;\n    event.preventDefault();\n    this.dragging = true;\n    const surface = event.currentTarget as HTMLElement;\n    surface.setPointerCapture(event.pointerId);\n    // `preventDefault` above also suppresses the click's default focus, so the\n    // arrows did nothing after a mouse drag until the dial was found again with\n    // Tab. `wr-slider` focuses its thumb for the same reason.\n    surface.focus();\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n    this.touch.emit();\n  }\n\n  /**\n   * A bound field learns it may show its validation copy from `touch`, and\n   * pointer-up cannot be the only source: a knob reached by Tab and moved with\n   * the arrows would leave the field untouched forever. `wr-rating`, whose\n   * template this one otherwise mirrors, emits on blur for exactly this reason.\n   */\n  protected onBlur(): void {\n    this.touch.emit();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const step = event.shiftKey ? this.step() * 10 : this.step();\n    let next: number | null;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = this.value() + step;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = this.value() - step;\n        break;\n      case 'Home':\n        next = this.minValue();\n        break;\n      case 'End':\n        next = this.maxValue();\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.commit(this.snap(next));\n  }\n\n  /**\n   * Nearest step, measured FROM `min`. A grid anchored at zero offers values the\n   * arrows can never reach whenever `min` is not a multiple of `step` — with\n   * `min: 5, step: 10` the middle of the arc used to commit 60, off a grid whose\n   * points are 5, 15, … 55, 65. Rounded at six decimals because a tenth is not a\n   * binary fraction: three arrow presses at `step: 0.1` otherwise announce\n   * `aria-valuenow=\"0.30000000000000004\"` and print it in the dial. Same shape as\n   * `wr-slider`'s `snap`, deliberately — including Home / End, so a range that is\n   * not a whole number of steps stops at the last reachable value.\n   */\n  private snap(value: number): number {\n    const min = this.minValue();\n    const stepped = Math.round((value - min) / this.step()) * this.step() + min;\n    return clamp(round(stepped, 6), min, this.maxValue());\n  }\n\n  // Internals\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const dx = event.clientX - (rect.left + rect.width / 2);\n    const dy = event.clientY - (rect.top + rect.height / 2);\n    // Angle measured from 12 o'clock, clockwise.\n    let angle = (Math.atan2(dx, -dy) * 180) / Math.PI;\n    // Map [-180, 180] into the dial's arc range, clamping outside it.\n    if (angle < ARC_START) angle = angle + 360 > ARC_END ? ARC_START : angle + 360;\n    angle = clamp(angle, ARC_START, ARC_END);\n    const ratio = (angle - ARC_START) / ARC_SWEEP;\n    const range = this.maxValue() - this.minValue();\n    const raw = this.minValue() + ratio * range;\n    this.commit(this.snap(raw));\n  }\n\n  private commit(next: number): void {\n    if (next === this.value()) return;\n    this.value.set(next);\n  }\n\n  // Arc helper\n\n  private arcPath(startDeg: number, endDeg: number): string {\n    const r = this.radius();\n    const s = (startDeg * Math.PI) / 180;\n    const e = (endDeg * Math.PI) / 180;\n    const sx = this.cx + r * Math.sin(s);\n    const sy = this.cy - r * Math.cos(s);\n    const ex = this.cx + r * Math.sin(e);\n    const ey = this.cy - r * Math.cos(e);\n    const largeArc = endDeg - startDeg > 180 ? 1 : 0;\n    return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`;\n  }\n}\n","<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-knob__text\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\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/fesm2022/ngwr-layout.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, input, output, computed, ViewEncapsulation, Component, contentChildren } from '@angular/core';
+import { model, input, output, effect, untracked, computed, ViewEncapsulation, Component, contentChildren } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 /**
@@ -36,6 +36,22 @@ class WrLayoutSider {
     reverse = input(false, { ...(ngDevMode ? { debugName: "reverse" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Emits whenever `collapsed` changes (in addition to the two-way `[(collapsed)]`). */
     collapsedChanged = output();
+    constructor() {
+        // The output is documented as firing whenever `collapsed` CHANGES, and it
+        // only ever fired from `toggle()` — so a `[(collapsed)]` write, which is the
+        // documented way to drive this, was silent. Emitting from an effect covers
+        // both, and skipping the first run keeps the initial value from reading as a
+        // change.
+        let first = true;
+        effect(() => {
+            const collapsed = this.collapsed();
+            if (first) {
+                first = false;
+                return;
+            }
+            untracked(() => this.collapsedChanged.emit(collapsed));
+        });
+    }
     classes = computed(() => {
         const parts = ['wr-layout-sider'];
         if (this.collapsed())
@@ -47,14 +63,14 @@ class WrLayoutSider {
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     /** Imperative toggle helper — `[(collapsed)]` still works alongside this. */
     toggle() {
-        const next = !this.collapsed();
-        this.collapsed.set(next);
-        this.collapsedChanged.emit(next);
+        // No emit here: the effect above owns that, so a toggle and an external
+        // write produce exactly one event each rather than two and none.
+        this.collapsed.set(!this.collapsed());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutSider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrLayoutSider, isStandalone: true, selector: "wr-layout-sider", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", collapsedChanged: "collapsedChanged" }, host: { attributes: { "role": "complementary" }, properties: { "class": "classes()", "style.width": "collapsed() ? collapsedWidth() : width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutSider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrLayoutSider, isStandalone: true, selector: "wr-layout-sider", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", collapsedChanged: "collapsedChanged" }, host: { attributes: { "role": "complementary" }, properties: { "class": "classes()", "style.width": "collapsed() ? collapsedWidth() : width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutSider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutSider, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-sider',
@@ -66,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         role: 'complementary',
                     },
                 }]
-        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], collapsedChanged: [{ type: i0.Output, args: ["collapsedChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], collapsedChanged: [{ type: i0.Output, args: ["collapsedChanged"] }] } });
 
 /**
  * @license
@@ -104,10 +120,10 @@ class WrLayout {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: WrLayout, isStandalone: true, selector: "wr-layout", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "siders", predicate: WrLayoutSider, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: WrLayout, isStandalone: true, selector: "wr-layout", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "siders", predicate: WrLayoutSider, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout',
@@ -128,10 +144,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * size and stickiness are app-controlled via CSS.
  */
 class WrLayoutHeader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrLayoutHeader, isStandalone: true, selector: "wr-layout-header", host: { attributes: { "role": "banner" }, classAttribute: "wr-layout-header" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WrLayoutHeader, isStandalone: true, selector: "wr-layout-header", host: { attributes: { "role": "banner" }, classAttribute: "wr-layout-header" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-header',
@@ -152,10 +168,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * remaining space.
  */
 class WrLayoutContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrLayoutContent, isStandalone: true, selector: "wr-layout-content", host: { attributes: { "role": "main" }, classAttribute: "wr-layout-content" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WrLayoutContent, isStandalone: true, selector: "wr-layout-content", host: { attributes: { "role": "main" }, classAttribute: "wr-layout-content" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-content',
@@ -176,10 +192,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * children.
  */
 class WrLayoutFooter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrLayoutFooter, isStandalone: true, selector: "wr-layout-footer", host: { attributes: { "role": "contentinfo" }, classAttribute: "wr-layout-footer" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WrLayoutFooter, isStandalone: true, selector: "wr-layout-footer", host: { attributes: { "role": "contentinfo" }, classAttribute: "wr-layout-footer" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrLayoutFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrLayoutFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-footer',

package/fesm2022/ngwr-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-layout.mjs","sources":["../../../projects/lib/layout/layout-sider.ts","../../../projects/lib/layout/layout.ts","../../../projects/lib/layout/layout-header.ts","../../../projects/lib/layout/layout-content.ts","../../../projects/lib/layout/layout-footer.ts","../../../projects/lib/layout/ngwr-layout.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, model, output } from '@angular/core';\n\n/**\n * Collapsible side panel. Lives inside a row `<wr-layout>` next to a\n * `<wr-layout-content>`. Two-way `[(collapsed)]` controls width.\n *\n * @example\n * ```html\n * <wr-layout>\n *   <wr-layout-sider [(collapsed)]=\"collapsed\" width=\"14rem\" collapsedWidth=\"3rem\">\n *     …\n *   </wr-layout-sider>\n *   <wr-layout-content>Main</wr-layout-content>\n * </wr-layout>\n * ```\n */\n@Component({\n  selector: 'wr-layout-sider',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'collapsed() ? collapsedWidth() : width()',\n    role: 'complementary',\n  },\n})\nexport class WrLayoutSider {\n  /** Two-way bindable collapsed state. @default false */\n  readonly collapsed = model(false);\n\n  /** Width when expanded. Any CSS length. @default '16rem' */\n  readonly width = input<string>('16rem');\n\n  /** Width when collapsed. Any CSS length. `0` to fully hide. @default '4rem' */\n  readonly collapsedWidth = input<string>('4rem');\n\n  /** Place the sider on the right edge instead of the left. @default false */\n  readonly reverse = input(false, { transform: coerceBooleanProperty });\n\n  /** Emits whenever `collapsed` changes (in addition to the two-way `[(collapsed)]`). */\n  readonly collapsedChanged = output<boolean>();\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-layout-sider'];\n    if (this.collapsed()) parts.push('wr-layout-sider--collapsed');\n    if (this.reverse()) parts.push('wr-layout-sider--reverse');\n    return parts.join(' ');\n  });\n\n  /** Imperative toggle helper — `[(collapsed)]` still works alongside this. */\n  toggle(): void {\n    const next = !this.collapsed();\n    this.collapsed.set(next);\n    this.collapsedChanged.emit(next);\n  }\n}\n","/**\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 { Component, ViewEncapsulation, computed, contentChildren } from '@angular/core';\n\nimport { WrLayoutSider } from './layout-sider';\n\n/**\n * App-shell layout container. Lays its children out as a flex column by\n * default; switches to a row when a `<wr-layout-sider>` is among the\n * direct children (so `header → [sider + content] → footer` falls into\n * place automatically — same convention as ng-zorro / antd Layout).\n *\n * @example\n * ```html\n * <wr-layout>\n *   <wr-layout-header>App bar</wr-layout-header>\n *   <wr-layout>\n *     <wr-layout-sider [(collapsed)]=\"collapsed\">Sidebar</wr-layout-sider>\n *     <wr-layout-content>Main</wr-layout-content>\n *   </wr-layout>\n *   <wr-layout-footer>© 2026</wr-layout-footer>\n * </wr-layout>\n * ```\n *\n * @see https://ngwr.dev/reference/components/layout\n */\n@Component({\n  selector: 'wr-layout',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrLayout {\n  protected readonly siders = contentChildren(WrLayoutSider);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-layout'];\n    if (this.siders().length > 0) parts.push('wr-layout--has-sider');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Top bar of a {@link WrLayout}. Stretches across the parent;\n * size and stickiness are app-controlled via CSS.\n */\n@Component({\n  selector: 'wr-layout-header',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-header', role: 'banner' },\n})\nexport class WrLayoutHeader {}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Main content area of a {@link WrLayout}. Flex-grows to fill\n * remaining space.\n */\n@Component({\n  selector: 'wr-layout-content',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-content', role: 'main' },\n})\nexport class WrLayoutContent {}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Bottom bar of a {@link WrLayout}. Doesn't grow — sized by its\n * children.\n */\n@Component({\n  selector: 'wr-layout-footer',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-footer', role: 'contentinfo' },\n})\nexport class WrLayoutFooter {}\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-layout.mjs","sources":["../../../projects/lib/layout/layout-sider.ts","../../../projects/lib/layout/layout.ts","../../../projects/lib/layout/layout-header.ts","../../../projects/lib/layout/layout-content.ts","../../../projects/lib/layout/layout-footer.ts","../../../projects/lib/layout/ngwr-layout.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, effect, input, model, output, untracked } from '@angular/core';\n\n/**\n * Collapsible side panel. Lives inside a row `<wr-layout>` next to a\n * `<wr-layout-content>`. Two-way `[(collapsed)]` controls width.\n *\n * @example\n * ```html\n * <wr-layout>\n *   <wr-layout-sider [(collapsed)]=\"collapsed\" width=\"14rem\" collapsedWidth=\"3rem\">\n *     …\n *   </wr-layout-sider>\n *   <wr-layout-content>Main</wr-layout-content>\n * </wr-layout>\n * ```\n */\n@Component({\n  selector: 'wr-layout-sider',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'collapsed() ? collapsedWidth() : width()',\n    role: 'complementary',\n  },\n})\nexport class WrLayoutSider {\n  /** Two-way bindable collapsed state. @default false */\n  readonly collapsed = model(false);\n\n  /** Width when expanded. Any CSS length. @default '16rem' */\n  readonly width = input<string>('16rem');\n\n  /** Width when collapsed. Any CSS length. `0` to fully hide. @default '4rem' */\n  readonly collapsedWidth = input<string>('4rem');\n\n  /** Place the sider on the right edge instead of the left. @default false */\n  readonly reverse = input(false, { transform: coerceBooleanProperty });\n\n  /** Emits whenever `collapsed` changes (in addition to the two-way `[(collapsed)]`). */\n  readonly collapsedChanged = output<boolean>();\n\n  constructor() {\n    // The output is documented as firing whenever `collapsed` CHANGES, and it\n    // only ever fired from `toggle()` — so a `[(collapsed)]` write, which is the\n    // documented way to drive this, was silent. Emitting from an effect covers\n    // both, and skipping the first run keeps the initial value from reading as a\n    // change.\n    let first = true;\n    effect(() => {\n      const collapsed = this.collapsed();\n      if (first) {\n        first = false;\n        return;\n      }\n      untracked(() => this.collapsedChanged.emit(collapsed));\n    });\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-layout-sider'];\n    if (this.collapsed()) parts.push('wr-layout-sider--collapsed');\n    if (this.reverse()) parts.push('wr-layout-sider--reverse');\n    return parts.join(' ');\n  });\n\n  /** Imperative toggle helper — `[(collapsed)]` still works alongside this. */\n  toggle(): void {\n    // No emit here: the effect above owns that, so a toggle and an external\n    // write produce exactly one event each rather than two and none.\n    this.collapsed.set(!this.collapsed());\n  }\n}\n","/**\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 { Component, ViewEncapsulation, computed, contentChildren } from '@angular/core';\n\nimport { WrLayoutSider } from './layout-sider';\n\n/**\n * App-shell layout container. Lays its children out as a flex column by\n * default; switches to a row when a `<wr-layout-sider>` is among the\n * direct children (so `header → [sider + content] → footer` falls into\n * place automatically — same convention as ng-zorro / antd Layout).\n *\n * @example\n * ```html\n * <wr-layout>\n *   <wr-layout-header>App bar</wr-layout-header>\n *   <wr-layout>\n *     <wr-layout-sider [(collapsed)]=\"collapsed\">Sidebar</wr-layout-sider>\n *     <wr-layout-content>Main</wr-layout-content>\n *   </wr-layout>\n *   <wr-layout-footer>© 2026</wr-layout-footer>\n * </wr-layout>\n * ```\n *\n * @see https://ngwr.dev/reference/components/layout\n */\n@Component({\n  selector: 'wr-layout',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrLayout {\n  protected readonly siders = contentChildren(WrLayoutSider);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-layout'];\n    if (this.siders().length > 0) parts.push('wr-layout--has-sider');\n    return parts.join(' ');\n  });\n}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Top bar of a {@link WrLayout}. Stretches across the parent;\n * size and stickiness are app-controlled via CSS.\n */\n@Component({\n  selector: 'wr-layout-header',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-header', role: 'banner' },\n})\nexport class WrLayoutHeader {}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Main content area of a {@link WrLayout}. Flex-grows to fill\n * remaining space.\n */\n@Component({\n  selector: 'wr-layout-content',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-content', role: 'main' },\n})\nexport class WrLayoutContent {}\n","/**\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 { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Bottom bar of a {@link WrLayout}. Doesn't grow — sized by its\n * children.\n */\n@Component({\n  selector: 'wr-layout-footer',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-layout-footer', role: 'contentinfo' },\n})\nexport class WrLayoutFooter {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}