ngwr 11.2.0 → 12.1.0

package/fesm2022/ngwr-segmented.mjs

@@ -1,6 +1,8 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, model, computed, signal, afterNextRender, ViewEncapsulation, Component } from '@angular/core';
+import { input, model, output, inject, ElementRef, computed, signal, afterNextRender, ViewEncapsulation, Component } from '@angular/core';
+import { WR_FORM_FIELD } from 'ngwr/form';
 import { WrIcon } from 'ngwr/icon';
 
 /**
@@ -13,14 +15,81 @@ class WrSegmented {
     /** The segments to render. */
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable selected value. */
+    // The model keeps the component's own `T`, and the contract is satisfied as
+    // `FormValueControl<T | null>` — legal because `FormField<T>` infers its type from
+    // the FIELD it is handed and never from the host component, so the interface's
+    // parameter describes this model rather than constraining the binding.
+    // `wr-cascader` and `wr-tree` widen theirs to `unknown` because their value SHAPE
+    // changes with a mode input (`TId | null` in single mode, a `readonly TId[]` in
+    // multi) and no one type is true of both. A segmented control has one shape, so
+    // widening here would only throw away what `[options]` already proved: every
+    // `(valueChange)="pick($event)"` in a typed app would start receiving `unknown`.
+    // With the default type parameter this degenerates to exactly the catalog's
+    // `FormValueControl<unknown>`.
+    /**
+     * The picked segment's `value`, `null` when nothing is selected. Bound by
+     * `[formField]`, or two-way via `[(value)]`.
+     */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Disable the whole control. @default false */
+    /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */
+    touch = output();
+    /**
+     * Disable the whole control. 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 });
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    field = inject(WR_FORM_FIELD, { optional: true });
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the
+     * FIRST segment.
+     *
+     * The field renders its label before it can see what was projected into it, so the
+     * id travels the other way and the control adopts it, exactly as `[wrInput]`,
+     * `wr-slider` and `wr-select` do. Without this the `for` named an element that was
+     * nowhere in the document: clicking the label did nothing.
+     *
+     * It cannot go on the host — only a labelable element can be a label's target, and
+     * `<wr-segmented>` is not one — and there is no single control to put it on, so it
+     * goes where clicking the label should land a user: the first segment, which is
+     * also the strip's first tab stop. The same choice `wr-slider` makes with its low
+     * thumb.
+     *
+     * What this does NOT change is that segment's NAME: it is named by its own label,
+     * and a `<label for>` cannot outrank text content in the accname order anyway.
+     *
+     * The one shape this reads wrong is a strip NESTED inside another control that is
+     * itself the field — `<wr-color-picker>`'s own format tabs are the only case in
+     * the library — where the id lands on a tab instead of on the picker. That is the
+     * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix
+     * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`
+     * as `null`), not to a strip that cannot tell whose field it is in.
+     */
+    controlId = computed(() => this.field?.controlId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /**
+     * The field's error message, wired to the GROUP rather than to a segment.
+     *
+     * A segmented control is one field made of several buttons, so the description
+     * belongs to the thing the field describes — repeated on every segment it would be
+     * announced once per Tab. `role="group"` supports neither state as a role-specific
+     * attribute, but both are ARIA globals, so this is valid where an `aria-checked`
+     * would not be.
+     *
+     * `aria-invalid` is keyed on the message EXISTING rather than on `errorKeys()`,
+     * because the field only publishes an id once it is showing something — announcing
+     * "invalid" while pointing at nothing is worse than staying quiet.
+     */
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
     /** Index of the selected option, or `-1` when nothing is selected. */
     selectedIndex = computed(() => {
         const v = this.value();
@@ -47,12 +116,34 @@ class WrSegmented {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    /** Inline CSS vars driving the sliding thumb position. */
+    dir = inject(Directionality, { optional: true });
+    /**
+     * Reading direction of the strip. `Directionality` is root-provided, so this
+     * always resolves — `optional` only guards a consumer who has deliberately
+     * torn the provider out. A subtree that overrides the direction does it with
+     * the CDK's `Dir` directive, which writes `valueSignal`, so `thumbStyle`
+     * re-renders instead of leaving the thumb parked on the old segment.
+     */
+    isRtl = computed(() => this.dir?.valueSignal() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline CSS vars driving the sliding thumb position.
+     *
+     * `--wr-segmented-thumb-index` is the SLOT the thumb parks in, counted from the
+     * physical left, which is the selected index only in LTR. The stylesheet anchors
+     * the thumb with a physical `left` and slides it with `translateX` — neither has
+     * a logical form — while the options are a grid that mirrors, so under `dir="rtl"`
+     * the segment at logical index `i` occupies slot `count - 1 - i`. Left unsigned,
+     * the pill sat under a different label than the one it marks (the whole strip's
+     * worth of offset at the far end), which is the carousel's `trackStyle` problem
+     * one component over.
+     */
     thumbStyle = computed(() => {
         const i = Math.max(0, this.selectedIndex());
         const count = Math.max(1, this.options().length);
+        const slot = this.isRtl() ? count - 1 - i : i;
         return {
-            '--wr-segmented-thumb-index': `${i}`,
+            '--wr-segmented-thumb-index': `${slot}`,
             '--wr-segmented-thumb-count': `${count}`,
         };
     }, /* @ts-ignore */
@@ -68,13 +159,35 @@ class WrSegmented {
     trackByValue(_, option) {
         return option.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrSegmented, isStandalone: true, selector: "wr-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "class": "classes()", "style": "thumbStyle()" } }, ngImport: i0, template: "<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and a click
+     * cannot be the source: a strip tabbed into and out of without a pick left the
+     * field untouched forever — which is exactly the case `touched` exists for.
+     *
+     * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this
+     * component owns one button per option, so it listens for the bubbling `focusout`
+     * on its host instead — and ignores the one that only moves focus from one segment
+     * to the next, the way `wr-slider` ignores the hop between its two thumbs.
+     */
+    onFocusOut(event) {
+        if (this.host.nativeElement.contains(event.relatedTarget))
+            return;
+        this.touch.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrSegmented, isStandalone: true, selector: "wr-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "class": "classes()", "style": "thumbStyle()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()" } }, ngImport: i0, template: "<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n<!--\n  `id` on the FIRST segment only: it is the id a surrounding `<wr-form-field>`\n  already points its `<label for>` at, and a `for` may only name a labelable\n  element \u2014 see `controlId` in the component. `null` without a field, so a bare\n  strip stamps no document-global id on anything.\n-->\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [attr.id]=\"$first ? controlId() : null\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSegmented, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSegmented, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-segmented', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', '[style]': 'thumbStyle()', role: 'group' }, imports: [WrIcon], template: "<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: 'wr-segmented', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        '[style]': 'thumbStyle()',
+                        role: 'group',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, imports: [WrIcon], template: "<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n<!--\n  `id` on the FIRST segment only: it is the id a surrounding `<wr-form-field>`\n  already points its `<label for>` at, and a `for` may only name a labelable\n  element \u2014 see `controlId` in the component. `null` without a field, so a bare\n  strip stamps no document-global id on anything.\n-->\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [attr.id]=\"$first ? controlId() : null\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.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, afterNextRender, computed, input, model, signal } from '@angular/core';\n\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * @example\n * ```html\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/segmented\n */\nexport type WrSegmentedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()', '[style]': 'thumbStyle()', role: 'group' },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  /** Two-way bindable selected value. */\n  readonly value = model<T | null>(null);\n\n  /** Disable the whole control. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSegmentedSize>('md');\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-segmented--${size}`);\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  /** Inline CSS vars driving the sliding thumb position. */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    return {\n      '--wr-segmented-thumb-index': `${i}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\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-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.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 { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WR_FORM_FIELD } from 'ngwr/form';\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * A signal-forms native control: it implements `FormValueControl<T | null>`, so\n * `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic\n * `[(ngModel)]` / reactive forms keep working through Angular's bridge.\n *\n * It stays a `role=\"group\"` of `aria-pressed` toggle buttons rather than\n * becoming a `radiogroup`: being a form control changes what the value is bound\n * to, not what the widget is, and a radiogroup would owe a roving tab stop and\n * arrow-key selection — a different keyboard contract for every consumer who\n * already ships this. The group is what the field describes (`aria-describedby`\n * / `aria-invalid` land on the host), while the `<label for>` has to name a\n * labelable element, so the id goes on the first segment.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-segmented [options]=\"ranges\" [formField]=\"form.range\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/segmented\n */\nexport type WrSegmentedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style]': 'thumbStyle()',\n    role: 'group',\n    '[attr.aria-describedby]': 'describedBy()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '(focusout)': 'onFocusOut($event)',\n  },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> implements FormValueControl<T | null> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  // The model keeps the component's own `T`, and the contract is satisfied as\n  // `FormValueControl<T | null>` — legal because `FormField<T>` infers its type from\n  // the FIELD it is handed and never from the host component, so the interface's\n  // parameter describes this model rather than constraining the binding.\n  // `wr-cascader` and `wr-tree` widen theirs to `unknown` because their value SHAPE\n  // changes with a mode input (`TId | null` in single mode, a `readonly TId[]` in\n  // multi) and no one type is true of both. A segmented control has one shape, so\n  // widening here would only throw away what `[options]` already proved: every\n  // `(valueChange)=\"pick($event)\"` in a typed app would start receiving `unknown`.\n  // With the default type parameter this degenerates to exactly the catalog's\n  // `FormValueControl<unknown>`.\n  /**\n   * The picked segment's `value`, `null` when nothing is selected. Bound by\n   * `[formField]`, or two-way via `[(value)]`.\n   */\n  readonly value = model<T | null>(null);\n\n  /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /**\n   * Disable the whole control. Bound automatically from the field's disabled\n   * state when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSegmentedSize>('md');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the\n   * FIRST segment.\n   *\n   * The field renders its label before it can see what was projected into it, so the\n   * id travels the other way and the control adopts it, exactly as `[wrInput]`,\n   * `wr-slider` and `wr-select` do. Without this the `for` named an element that was\n   * nowhere in the document: clicking the label did nothing.\n   *\n   * It cannot go on the host — only a labelable element can be a label's target, and\n   * `<wr-segmented>` is not one — and there is no single control to put it on, so it\n   * goes where clicking the label should land a user: the first segment, which is\n   * also the strip's first tab stop. The same choice `wr-slider` makes with its low\n   * thumb.\n   *\n   * What this does NOT change is that segment's NAME: it is named by its own label,\n   * and a `<label for>` cannot outrank text content in the accname order anyway.\n   *\n   * The one shape this reads wrong is a strip NESTED inside another control that is\n   * itself the field — `<wr-color-picker>`'s own format tabs are the only case in\n   * the library — where the id lands on a tab instead of on the picker. That is the\n   * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix\n   * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`\n   * as `null`), not to a strip that cannot tell whose field it is in.\n   */\n  protected readonly controlId = computed(() => this.field?.controlId() ?? null);\n\n  /**\n   * The field's error message, wired to the GROUP rather than to a segment.\n   *\n   * A segmented control is one field made of several buttons, so the description\n   * belongs to the thing the field describes — repeated on every segment it would be\n   * announced once per Tab. `role=\"group\"` supports neither state as a role-specific\n   * attribute, but both are ARIA globals, so this is valid where an `aria-checked`\n   * would not be.\n   *\n   * `aria-invalid` is keyed on the message EXISTING rather than on `errorKeys()`,\n   * because the field only publishes an id once it is showing something — announcing\n   * \"invalid\" while pointing at nothing is worse than staying quiet.\n   */\n  protected readonly describedBy = computed(() => this.field?.describedBy() ?? null);\n  protected readonly ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null));\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-segmented--${size}`);\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction of the strip. `Directionality` is root-provided, so this\n   * always resolves — `optional` only guards a consumer who has deliberately\n   * torn the provider out. A subtree that overrides the direction does it with\n   * the CDK's `Dir` directive, which writes `valueSignal`, so `thumbStyle`\n   * re-renders instead of leaving the thumb parked on the old segment.\n   */\n  private readonly isRtl = computed(() => this.dir?.valueSignal() === 'rtl');\n\n  /**\n   * Inline CSS vars driving the sliding thumb position.\n   *\n   * `--wr-segmented-thumb-index` is the SLOT the thumb parks in, counted from the\n   * physical left, which is the selected index only in LTR. The stylesheet anchors\n   * the thumb with a physical `left` and slides it with `translateX` — neither has\n   * a logical form — while the options are a grid that mirrors, so under `dir=\"rtl\"`\n   * the segment at logical index `i` occupies slot `count - 1 - i`. Left unsigned,\n   * the pill sat under a different label than the one it marks (the whole strip's\n   * worth of offset at the far end), which is the carousel's `trackStyle` problem\n   * one component over.\n   */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    const slot = this.isRtl() ? count - 1 - i : i;\n    return {\n      '--wr-segmented-thumb-index': `${slot}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n\n  /**\n   * A bound field learns it may show its validation copy from `touch`, and a click\n   * cannot be the source: a strip tabbed into and out of without a pick left the\n   * field untouched forever — which is exactly the case `touched` exists for.\n   *\n   * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this\n   * component owns one button per option, so it listens for the bubbling `focusout`\n   * on its host instead — and ignores the one that only moves focus from one segment\n   * to the next, the way `wr-slider` ignores the hop between its two thumbs.\n   */\n  protected onFocusOut(event: FocusEvent): void {\n    if (this.host.nativeElement.contains(event.relatedTarget as Node | null)) return;\n    this.touch.emit();\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n<!--\n  `id` on the FIRST segment only: it is the id a surrounding `<wr-form-field>`\n  already points its `<label for>` at, and a `for` may only name a labelable\n  element — see `controlId` in the component. `null` without a field, so a bare\n  strip stamps no document-global id on anything.\n-->\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [attr.id]=\"$first ? controlId() : null\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}