ngwr 14.0.0 → 14.1.0

package/fesm2022/ngwr-result.mjs

@@ -34,10 +34,10 @@ class WrResult {
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     classes = computed(() => `wr-result wr-result--${this.status()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrResult, isStandalone: true, selector: "wr-result", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrResult, isStandalone: true, selector: "wr-result", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult, decorators: [{
             type: Component,
             args: [{ selector: 'wr-result', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
@@ -67,10 +67,10 @@ class WrResult404 {
     description = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     desc = useI18nText(this.description, 'result.notFound', 'Sorry, the page you visited does not exist.');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult404, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrResult404, isStandalone: true, selector: "wr-result-404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult404, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrResult404, isStandalone: true, selector: "wr-result-404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult404, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult404, decorators: [{
             type: Component,
             args: [{ selector: 'wr-result-404', encapsulation: ViewEncapsulation.None, imports: [WrResult], template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
@@ -84,10 +84,10 @@ class WrResult403 {
     description = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     desc = useI18nText(this.description, 'result.forbidden', 'Sorry, you are not authorized to access this page.');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult403, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrResult403, isStandalone: true, selector: "wr-result-403", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult403, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrResult403, isStandalone: true, selector: "wr-result-403", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult403, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult403, decorators: [{
             type: Component,
             args: [{ selector: 'wr-result-403', encapsulation: ViewEncapsulation.None, imports: [WrResult], template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
@@ -101,10 +101,10 @@ class WrResult500 {
     description = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     desc = useI18nText(this.description, 'result.serverError', 'Sorry, something went wrong.');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult500, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrResult500, isStandalone: true, selector: "wr-result-500", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult500, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrResult500, isStandalone: true, selector: "wr-result-500", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n", dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrResult500, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrResult500, decorators: [{
             type: Component,
             args: [{ selector: 'wr-result-500', encapsulation: ViewEncapsulation.None, imports: [WrResult], template: "<!--\n  Shared by the three status presets, which differ only in the `status` each\n  class declares.\n\n  `ngProjectAs` is load-bearing: `<wr-result>` projects one slot,\n  `select=\"[wrResultExtra]\"`, and it matches that selector against the nodes in\n  THIS template. A bare `<ng-content />` does not carry the attribute, so\n  everything a consumer projected into `<wr-result-404>` was dropped silently \u2014\n  including the button each preset's own `@example` shows. `ngProjectAs` is what\n  tells the outer slot what this pass-through stands for.\n-->\n<wr-result [status]=\"status\" [title]=\"title()\" [description]=\"desc()\">\n  <ng-content ngProjectAs=\"[wrResultExtra]\" />\n</wr-result>\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });

package/fesm2022/ngwr-rotating-text.mjs

@@ -262,10 +262,10 @@ class WrRotatingText {
                 return i * stagger;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrRotatingText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrRotatingText, isStandalone: true, selector: "wr-rotating-text", inputs: { texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: true, transformFunction: null }, rotationInterval: { classPropertyName: "rotationInterval", publicName: "rotationInterval", isSignal: true, isRequired: false, transformFunction: null }, splitBy: { classPropertyName: "splitBy", publicName: "splitBy", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, staggerDuration: { classPropertyName: "staggerDuration", publicName: "staggerDuration", isSignal: true, isRequired: false, transformFunction: null }, staggerFrom: { classPropertyName: "staggerFrom", publicName: "staggerFrom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nextChange: "nextChange" }, host: { classAttribute: "wr-rotating-text" }, ngImport: i0, template: "<!--\n  The readable text, once: the spans below are per-character. Deliberately NOT a\n  live region \u2014 `auto` rotates every two seconds by default, and the APG's answer\n  for self-advancing content is silence, not an announcement every two seconds.\n-->\n\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n", styles: [".wr-rotating-text{display:inline-flex;align-items:center;overflow:hidden;vertical-align:bottom}.wr-rotating-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-rotating-text__inner{display:inline-flex;flex-wrap:wrap}.wr-rotating-text__word{display:inline-flex;align-items:center}.wr-rotating-text__char{display:inline-block;will-change:transform,opacity}.wr-rotating-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrRotatingText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrRotatingText, isStandalone: true, selector: "wr-rotating-text", inputs: { texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: true, transformFunction: null }, rotationInterval: { classPropertyName: "rotationInterval", publicName: "rotationInterval", isSignal: true, isRequired: false, transformFunction: null }, splitBy: { classPropertyName: "splitBy", publicName: "splitBy", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, staggerDuration: { classPropertyName: "staggerDuration", publicName: "staggerDuration", isSignal: true, isRequired: false, transformFunction: null }, staggerFrom: { classPropertyName: "staggerFrom", publicName: "staggerFrom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nextChange: "nextChange" }, host: { classAttribute: "wr-rotating-text" }, ngImport: i0, template: "<!--\n  The readable text, once: the spans below are per-character. Deliberately NOT a\n  live region \u2014 `auto` rotates every two seconds by default, and the APG's answer\n  for self-advancing content is silence, not an announcement every two seconds.\n-->\n\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n", styles: [".wr-rotating-text{display:inline-flex;align-items:center;overflow:hidden;vertical-align:bottom}.wr-rotating-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-rotating-text__inner{display:inline-flex;flex-wrap:wrap}.wr-rotating-text__word{display:inline-flex;align-items:center}.wr-rotating-text__char{display:inline-block;will-change:transform,opacity}.wr-rotating-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrRotatingText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrRotatingText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-rotating-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-rotating-text' }, template: "<!--\n  The readable text, once: the spans below are per-character. Deliberately NOT a\n  live region \u2014 `auto` rotates every two seconds by default, and the APG's answer\n  for self-advancing content is silence, not an announcement every two seconds.\n-->\n\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n", styles: [".wr-rotating-text{display:inline-flex;align-items:center;overflow:hidden;vertical-align:bottom}.wr-rotating-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-rotating-text__inner{display:inline-flex;flex-wrap:wrap}.wr-rotating-text__word{display:inline-flex;align-items:center}.wr-rotating-text__char{display:inline-block;will-change:transform,opacity}.wr-rotating-text__space{display:inline;white-space:pre}\n"] }]
         }], ctorParameters: () => [], propDecorators: { texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: true }] }], rotationInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotationInterval", required: false }] }], splitBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitBy", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], staggerDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "staggerDuration", required: false }] }], staggerFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "staggerFrom", required: false }] }], nextChange: [{ type: i0.Output, args: ["nextChange"] }] } });

package/fesm2022/ngwr-scroll.mjs

@@ -92,10 +92,10 @@ class WrScroll {
         else
             container.scrollTo(options);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrScroll, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrScroll });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrScroll, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: WrScroll });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrScroll, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrScroll, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-segmented.mjs

@@ -2,7 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 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 { WR_FORM_FIELD, useFormFieldAria } from 'ngwr/form';
 import { WrIcon } from 'ngwr/icon';
 
 /**
@@ -103,10 +103,14 @@ class WrSegmented {
      * 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 */ []));
+    // Through the shared helper, not a local pair: the hint is described by
+    // `hintId`, which only `useFormFieldAria()` composes, and `aria-invalid` keys
+    // on the error COUNT rather than on "something is described". Hand-rolled here,
+    // these three announced the error and never the hint — and `<input wrInput>` is
+    // the control the report was filed against.
+    fieldAria = useFormFieldAria();
+    describedBy = this.fieldAria.describedBy;
+    ariaInvalid = this.fieldAria.ariaInvalid;
     /** Index of the selected option, or `-1` when nothing is selected. */
     selectedIndex = computed(() => {
         const v = this.value();
@@ -193,10 +197,10 @@ class WrSegmented {
             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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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.4", ngImport: i0, type: WrSegmented, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrSegmented, decorators: [{
             type: Component,
             args: [{ selector: 'wr-segmented', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

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 { 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  /**\n   * Refuse changes while every segment stays focusable and the value still\n   * submits. Bound automatically from the field's readonly state when used with\n   * `[formField]`.\n   *\n   * NOTHING is mirrored into ARIA here, deliberately: the strip is a\n   * `role=\"group\"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`\n   * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`\n   * and their kin, and it is not global. `aria-disabled` is the only attribute\n   * that would apply to a button, and it says the wrong thing: these segments\n   * are still focusable and the value still submits. So the state is honest in\n   * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree\n   * rather than announced with a word that means something else.\n   *\n   * @default false\n   */\n  readonly readonly = 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    else if (this.readonly()) parts.push('wr-segmented--readonly');\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() || this.readonly() || 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":";;;;;;;AAAA;;;;;AAKG;MA0EU,WAAW,CAAA;;IAEb,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAmC;;;;;;;;;;;;AAapE;;;AAGG;IACM,KAAK,GAAG,KAAK,CAAW,IAAI;8EAAC;;IAG7B,KAAK,GAAG,MAAM,EAAQ;AAE/B;;;;;AAKG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEtE;;;;;;;;;;;;;;;AAeG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,IAAI,GAAG,KAAK,CAAkB,IAAI;6EAAC;AAE3B,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;IAClD,KAAK,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACgB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,IAAI;kFAAC;AAE9E;;;;;;;;;;;;AAYG;AACgB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,IAAI;oFAAC;IAC/D,WAAW,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;oFAAC;;AAGzE,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;IACrD,CAAC;sFAAC;;IAGe,OAAO,GAAG,MAAM,CAAC,KAAK;gFAAC;AAExC,IAAA,WAAA,GAAA;AACE,QAAA,eAAe,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/C;AAEmB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,cAAc,CAAC;AAC9B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,IAAI,IAAI,KAAK,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAE,CAAC;QACtD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC;aACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC;AAC9D,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,0BAA0B,CAAC;QACpE,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AACvD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;IAEe,GAAG,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEjE;;;;;;AAMG;AACc,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,KAAK;8EAAC;AAE1E;;;;;;;;;;;AAWG;AACgB,IAAA,UAAU,GAAG,QAAQ,CAAyB,MAAK;AACpE,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;AAC3C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC;AAChD,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;QAC7C,OAAO;YACL,4BAA4B,EAAE,CAAA,EAAG,IAAI,CAAA,CAAE;YACvC,4BAA4B,EAAE,CAAA,EAAG,KAAK,CAAA,CAAE;SACzC;IACH,CAAC;mFAAC;AAEQ,IAAA,UAAU,CAAC,MAA4B,EAAA;QAC/C,OAAO,IAAI,CAAC,KAAK,EAAE,KAAK,MAAM,CAAC,KAAK;IACtC;AAEU,IAAA,MAAM,CAAC,MAA4B,EAAA;AAC3C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YAAE;QACtF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9B;IAEU,YAAY,CAAC,CAAS,EAAE,MAA4B,EAAA;QAC5D,OAAO,MAAM,CAAC,KAAK;IACrB;AAEA;;;;;;;;;AASG;AACO,IAAA,UAAU,CAAC,KAAiB,EAAA;QACpC,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC;YAAE;AAC1E,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;uGAtLW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,OAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/ExB,0hCA2BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDkDY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEL,WAAW,EAAA,UAAA,EAAA,CAAA;kBAdvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,SAAS,EAAE,cAAc;AACzB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,yBAAyB,EAAE,eAAe;AAC1C,wBAAA,qBAAqB,EAAE,eAAe;AACtC,wBAAA,YAAY,EAAE,oBAAoB;qBACnC,EAAA,OAAA,EACQ,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,0hCAAA,EAAA;;;AE7EnB;;AAEG;;;;"}
+{"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, useFormFieldAria } 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  /**\n   * Refuse changes while every segment stays focusable and the value still\n   * submits. Bound automatically from the field's readonly state when used with\n   * `[formField]`.\n   *\n   * NOTHING is mirrored into ARIA here, deliberately: the strip is a\n   * `role=\"group\"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`\n   * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`\n   * and their kin, and it is not global. `aria-disabled` is the only attribute\n   * that would apply to a button, and it says the wrong thing: these segments\n   * are still focusable and the value still submits. So the state is honest in\n   * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree\n   * rather than announced with a word that means something else.\n   *\n   * @default false\n   */\n  readonly readonly = 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  // Through the shared helper, not a local pair: the hint is described by\n  // `hintId`, which only `useFormFieldAria()` composes, and `aria-invalid` keys\n  // on the error COUNT rather than on \"something is described\". Hand-rolled here,\n  // these three announced the error and never the hint — and `<input wrInput>` is\n  // the control the report was filed against.\n  private readonly fieldAria = useFormFieldAria();\n  protected readonly describedBy = this.fieldAria.describedBy;\n  protected readonly ariaInvalid = this.fieldAria.ariaInvalid;\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    else if (this.readonly()) parts.push('wr-segmented--readonly');\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() || this.readonly() || 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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"}