ngwr 14.0.0 → 14.0.1

package/fesm2022/ngwr-image-cropper.mjs

@@ -452,10 +452,10 @@ class WrImageCropper {
             // Swallow — invalid state (image not loaded, crop empty, etc.).
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrImageCropper, isStandalone: true, selector: "wr-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped" }, host: { classAttribute: "wr-image-cropper" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img #img class=\"wr-image-cropper__image\" [src]=\"url\" alt=\"\" draggable=\"false\" (load)=\"onImageLoad()\" />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrImageCropper, isStandalone: true, selector: "wr-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped" }, host: { classAttribute: "wr-image-cropper" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img #img class=\"wr-image-cropper__image\" [src]=\"url\" alt=\"\" draggable=\"false\" (load)=\"onImageLoad()\" />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrImageCropper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrImageCropper, decorators: [{
             type: Component,
             args: [{ selector: 'wr-image-cropper', encapsulation: ViewEncapsulation.None, host: { class: 'wr-image-cropper' }, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img #img class=\"wr-image-cropper__image\" [src]=\"url\" alt=\"\" draggable=\"false\" (load)=\"onImageLoad()\" />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], outputQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputQuality", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], imgEl: [{ type: i0.ViewChild, args: ['img', { isSignal: true }] }] } });

package/fesm2022/ngwr-input-number.mjs

@@ -328,10 +328,10 @@ class WrInputNumber {
         });
         return formatter.format(v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrInputNumber, isStandalone: true, selector: "wr-input-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, showSteppers: { classPropertyName: "showSteppers", publicName: "showSteppers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<wr-input-group [rounded]=\"resolvedRounded()\">\n  @if (prefix(); as p) {\n    <span wrInputPrefix>{{ p }}</span>\n  }\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    [size]=\"resolvedSize()\"\n    [rounded]=\"resolvedRounded()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    spellcheck=\"false\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n  @if (suffix(); as s) {\n    <span wrInputSuffix>{{ s }}</span>\n  }\n  @if (showSteppers()) {\n    <div class=\"wr-input-number__steppers\" wrInputSuffix>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedIncrement()\"\n        [disabled]=\"!interactive() || atMax()\"\n        (click)=\"stepBy(1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 5 L4 0 L8 5 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedDecrement()\"\n        [disabled]=\"!interactive() || atMin()\"\n        (click)=\"stepBy(-1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 0 L4 5 L8 0 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n    </div>\n  }\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputPrefix, selector: "[wrInputPrefix]" }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrInputNumber, isStandalone: true, selector: "wr-input-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, showSteppers: { classPropertyName: "showSteppers", publicName: "showSteppers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<wr-input-group [rounded]=\"resolvedRounded()\">\n  @if (prefix(); as p) {\n    <span wrInputPrefix>{{ p }}</span>\n  }\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    [size]=\"resolvedSize()\"\n    [rounded]=\"resolvedRounded()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    spellcheck=\"false\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n  @if (suffix(); as s) {\n    <span wrInputSuffix>{{ s }}</span>\n  }\n  @if (showSteppers()) {\n    <div class=\"wr-input-number__steppers\" wrInputSuffix>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedIncrement()\"\n        [disabled]=\"!interactive() || atMax()\"\n        (click)=\"stepBy(1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 5 L4 0 L8 5 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedDecrement()\"\n        [disabled]=\"!interactive() || atMin()\"\n        (click)=\"stepBy(-1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 0 L4 5 L8 0 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n    </div>\n  }\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["size", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputPrefix, selector: "[wrInputPrefix]" }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputNumber, decorators: [{
             type: Component,
             args: [{ selector: 'wr-input-number', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix], template: "<wr-input-group [rounded]=\"resolvedRounded()\">\n  @if (prefix(); as p) {\n    <span wrInputPrefix>{{ p }}</span>\n  }\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    [size]=\"resolvedSize()\"\n    [rounded]=\"resolvedRounded()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    spellcheck=\"false\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n  @if (suffix(); as s) {\n    <span wrInputSuffix>{{ s }}</span>\n  }\n  @if (showSteppers()) {\n    <div class=\"wr-input-number__steppers\" wrInputSuffix>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedIncrement()\"\n        [disabled]=\"!interactive() || atMax()\"\n        (click)=\"stepBy(1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 5 L4 0 L8 5 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"wr-input-number__step\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"resolvedDecrement()\"\n        [disabled]=\"!interactive() || atMin()\"\n        (click)=\"stepBy(-1)\"\n      >\n        <svg width=\"10\" height=\"6\" viewBox=\"0 0 8 5\" aria-hidden=\"true\">\n          <path d=\"M0 0 L4 5 L8 0 Z\" fill=\"currentColor\" />\n        </svg>\n      </button>\n    </div>\n  }\n</wr-input-group>\n" }]
         }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], showSteppers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSteppers", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });

package/fesm2022/ngwr-input-otp.mjs

@@ -306,10 +306,10 @@ class WrInputOtp {
             return 'ArrowRight';
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrInputOtp, isStandalone: true, selector: "wr-input-otp", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed", touch: "touch" }, host: { attributes: { "role": "group" }, properties: { "class": "classes()", "attr.aria-label": "resolvedAriaLabel()" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (cell of cells(); track trackIndex($index)) {\n  <input\n    #cell\n    class=\"wr-input-otp__cell\"\n    [type]=\"cellType()\"\n    [attr.inputmode]=\"cellInputMode()\"\n    maxlength=\"1\"\n    autocomplete=\"one-time-code\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    [value]=\"cell\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"cellLabel($index)\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (input)=\"onInput($event, $index)\"\n    (keydown)=\"onKeyDown($event, $index)\"\n    (compositionend)=\"onCompositionEnd($event, $index)\"\n    (paste)=\"onPaste($event)\"\n    (blur)=\"onBlur()\"\n  />\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrInputOtp, isStandalone: true, selector: "wr-input-otp", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed", touch: "touch" }, host: { attributes: { "role": "group" }, properties: { "class": "classes()", "attr.aria-label": "resolvedAriaLabel()" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (cell of cells(); track trackIndex($index)) {\n  <input\n    #cell\n    class=\"wr-input-otp__cell\"\n    [type]=\"cellType()\"\n    [attr.inputmode]=\"cellInputMode()\"\n    maxlength=\"1\"\n    autocomplete=\"one-time-code\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    [value]=\"cell\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"cellLabel($index)\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (input)=\"onInput($event, $index)\"\n    (keydown)=\"onKeyDown($event, $index)\"\n    (compositionend)=\"onCompositionEnd($event, $index)\"\n    (paste)=\"onPaste($event)\"\n    (blur)=\"onBlur()\"\n  />\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputOtp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputOtp, decorators: [{
             type: Component,
             args: [{ selector: 'wr-input-otp', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', role: 'group', '[attr.aria-label]': 'resolvedAriaLabel()' }, template: "@for (cell of cells(); track trackIndex($index)) {\n  <input\n    #cell\n    class=\"wr-input-otp__cell\"\n    [type]=\"cellType()\"\n    [attr.inputmode]=\"cellInputMode()\"\n    maxlength=\"1\"\n    autocomplete=\"one-time-code\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    [value]=\"cell\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"cellLabel($index)\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    (input)=\"onInput($event, $index)\"\n    (keydown)=\"onKeyDown($event, $index)\"\n    (compositionend)=\"onCompositionEnd($event, $index)\"\n    (paste)=\"onPaste($event)\"\n    (blur)=\"onBlur()\"\n  />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], touch: [{ type: i0.Output, args: ["touch"] }], cellRefs: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });

package/fesm2022/ngwr-input.mjs

@@ -2,7 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, computed, input, Directive, ViewEncapsulation, Component, signal } from '@angular/core';
 import { useConfigValue } from 'ngwr/config';
-import { WR_FORM_FIELD } from 'ngwr/form';
+import { WR_FORM_FIELD, useFormFieldAria } from 'ngwr/form';
 import { useI18nText } from 'ngwr/i18n';
 
 /**
@@ -63,10 +63,14 @@ class WrInput {
      * invisible to a screen reader, which never learns the field is invalid or
      * what the message says.
      */
-    ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* 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;
     /**
      * Control size. Unset, it falls back to
      * `provideWrConfig({ input: { size } })`. @default 'md'
@@ -108,10 +112,10 @@ class WrInput {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrInput, isStandalone: true, selector: "input[wrInput], textarea[wrInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-describedby": "describedBy()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrInput, isStandalone: true, selector: "input[wrInput], textarea[wrInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-describedby": "describedBy()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[wrInput], textarea[wrInput]',
@@ -144,10 +148,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * ```
  */
 class WrInputPrefix {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrInputPrefix, isStandalone: true, selector: "[wrInputPrefix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--prefix" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrInputPrefix, isStandalone: true, selector: "[wrInputPrefix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--prefix" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputPrefix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputPrefix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrInputPrefix]',
@@ -175,10 +179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * ```
  */
 class WrInputSuffix {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrInputSuffix, isStandalone: true, selector: "[wrInputSuffix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--suffix" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: WrInputSuffix, isStandalone: true, selector: "[wrInputSuffix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--suffix" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputSuffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputSuffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrInputSuffix]',
@@ -235,10 +239,10 @@ class WrInputGroup {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrInputGroup, isStandalone: true, selector: "wr-input-group", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrInputGroup, isStandalone: true, selector: "wr-input-group", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrInputGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrInputGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-input-group',
@@ -289,10 +293,10 @@ class WrPasswordToggle {
         input.type = next;
         this.revealed.set(next === 'text');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrPasswordToggle, isStandalone: true, selector: "wr-password-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrPasswordToggle, isStandalone: true, selector: "wr-password-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPasswordToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrPasswordToggle, decorators: [{
             type: Component,
             args: [{ selector: 'wr-password-toggle', encapsulation: ViewEncapsulation.None, template: "<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n" }]
         }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }] } });

package/fesm2022/ngwr-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/directives/wr-input.ts","../../../projects/lib/input/directives/wr-input-prefix.ts","../../../projects/lib/input/directives/wr-input-suffix.ts","../../../projects/lib/input/input-group.ts","../../../projects/lib/input/password-toggle.ts","../../../projects/lib/input/password-toggle.html","../../../projects/lib/input/ngwr-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, computed, inject, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\nimport { WR_FORM_FIELD } from 'ngwr/form';\n\nimport type { WrInputSize } from '../interfaces';\n\n/**\n * Applies NGWR input styling to a native `<input>` element.\n *\n * Because this is an attribute directive on the real `<input>` (not a wrapper\n * component), any other directive that targets `input` — `[(ngModel)]`,\n * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes\n * naturally on the same element.\n *\n * @example\n * ```html\n * <input wrInput [(ngModel)]=\"name\" placeholder=\"Your name\" />\n *\n * <!-- Works with ngx-mask, validators, etc. -->\n * <input wrInput [(ngModel)]=\"phone\" mask=\"(000) 000-0000\" />\n * ```\n *\n * For prefix / suffix / password-toggle layouts, wrap the input in\n * `<wr-input-group>`.\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Directive({\n  selector: 'input[wrInput], textarea[wrInput]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.id]': 'resolvedId()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '[attr.aria-describedby]': 'describedBy()',\n  },\n})\nexport class WrInput {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Read once, at construction: a static `id=\"\"` in the template is already on\n   * the element by the time a directive is instantiated, and it must win over\n   * the field's generated one.\n   */\n  private readonly ownId = this.host.nativeElement.getAttribute('id');\n\n  /**\n   * Adopts the surrounding `<wr-form-field>`'s `controlId`, so the label it\n   * already rendered actually points at this element. Without this the `for`\n   * referenced an id that existed nowhere and the input had no label at all.\n   */\n  protected readonly resolvedId = computed(() => this.ownId ?? this.field?.controlId() ?? null);\n\n  constructor() {\n    // Tell the field which id actually stuck. Without this its `<label for>` keeps\n    // pointing at the generated id while this element answers to the author's own —\n    // a label referencing nothing, which is the same as having none.\n    if (this.ownId) this.field?.adoptControlId(this.ownId);\n  }\n\n  /**\n   * Announced state, taken from the surrounding `<wr-form-field>`.\n   *\n   * The field renders the message but cannot reach the projected control, so\n   * the control reads back: without this the error is visible on screen and\n   * invisible to a screen reader, which never learns the field is invalid or\n   * what the message says.\n   */\n  protected readonly ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null));\n  protected readonly describedBy = computed(() => this.field?.describedBy() ?? null);\n\n  /**\n   * Control size. Unset, it falls back to\n   * `provideWrConfig({ input: { size } })`. @default 'md'\n   *\n   * Called `wrSize` until v14, to dodge the native `<input size>` attribute —\n   * which measures the field in characters and which `.wr-input`'s `width: 100%`\n   * has always overridden, so the clash it guarded against was never observable.\n   * It made this the one size input in the catalog spelled differently from the\n   * other twenty-three. The cost of the change is that a consumer who wanted the\n   * NATIVE `size` on an ngwr input can no longer have it — but `width: 100%`\n   * meant they never did.\n   */\n  readonly size = input<WrInputSize | null>(null);\n\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })`; `[rounded]=\"false\"` turns a\n   * configured `true` back off. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving: the plain `coerceBooleanProperty` folds `null` into `false`,\n    // which would make \"not set\" and \"set to false\" the same value — and a config\n    // default nothing could ever supply. A valueless `rounded` attribute still\n    // arrives as `''` and still coerces to `true`.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `null` as each input's own default, not `'md'` / `false`: with a literal sitting\n  // there, \"the template said nothing\" and \"the template said md\" are the same value,\n  // so no app-wide default could ever apply. The effective default is the last\n  // argument below, which is where the old inline one moved to.\n  protected readonly resolvedSize = useConfigValue(this.size, c => c.input?.size, 'md');\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input'];\n    const size = this.resolvedSize();\n    if (size !== 'md') parts.push(`wr-input--${size}`);\n    if (this.resolvedRounded()) parts.push('wr-input--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **left** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's left edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputPrefix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },\n})\nexport class WrInputPrefix {}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **right** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's right edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputSuffix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },\n})\nexport class WrInputSuffix {}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\n\n/**\n * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /\n * `<wr-password-toggle>` siblings. Renders the border and focus ring; the\n * inner native input drops its own border so it visually melts into the\n * group.\n *\n * Pure layout — no signals shared with the inner directive, focus styling is\n * driven entirely by `:focus-within` so any focusable child counts.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Component({\n  selector: 'wr-input-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrInputGroup {\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })` — the same key the inner `[wrInput]`\n   * reads. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving, like `[wrInput]`'s: the plain `coerceBooleanProperty` folds\n    // `null` into `false`, which would make \"not set\" and \"set to false\" the same\n    // value — and a config default nothing could ever supply.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `input.rounded`, and deliberately not a key of its own: the group owns the visible\n  // border once it wraps an input, which drops its own chrome. Resolving one and not\n  // the other would put a pill radius on the element nobody can see and leave the\n  // corner the user does see square.\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input-group'];\n    if (this.resolvedRounded()) parts.push('wr-input-group--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/**\n * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`\n * attribute between `password` and `text`. Drop it inside an\n * `<wr-input-group>` next to a password input.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput type=\"password\" [(ngModel)]=\"pw\" #pwInput />\n *   <wr-password-toggle [for]=\"pwInput\" />\n * </wr-input-group>\n * ```\n */\n@Component({\n  selector: 'wr-password-toggle',\n  templateUrl: './password-toggle.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrPasswordToggle {\n  /** Reference to the linked password input. */\n  readonly for = input.required<HTMLInputElement>();\n\n  protected readonly revealed = signal(false);\n\n  /** Accessible name while the password is hidden. Falls back to `input.showPassword`. */\n  readonly showLabel = input<string | null>(null);\n\n  /** Accessible name while the password is revealed. Falls back to `input.hidePassword`. */\n  readonly hideLabel = input<string | null>(null);\n\n  private readonly resolvedShowLabel = useI18nText(this.showLabel, 'input.showPassword', 'Show password');\n  private readonly resolvedHideLabel = useI18nText(this.hideLabel, 'input.hidePassword', 'Hide password');\n\n  protected readonly ariaLabel = computed(() =>\n    this.revealed() ? this.resolvedHideLabel() : this.resolvedShowLabel()\n  );\n\n  protected toggle(): void {\n    const input = this.for();\n    const next = input.type === 'password' ? 'text' : 'password';\n    input.type = next;\n    this.revealed.set(next === 'text');\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/directives/wr-input.ts","../../../projects/lib/input/directives/wr-input-prefix.ts","../../../projects/lib/input/directives/wr-input-suffix.ts","../../../projects/lib/input/input-group.ts","../../../projects/lib/input/password-toggle.ts","../../../projects/lib/input/password-toggle.html","../../../projects/lib/input/ngwr-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, computed, inject, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\nimport { WR_FORM_FIELD, useFormFieldAria } from 'ngwr/form';\n\nimport type { WrInputSize } from '../interfaces';\n\n/**\n * Applies NGWR input styling to a native `<input>` element.\n *\n * Because this is an attribute directive on the real `<input>` (not a wrapper\n * component), any other directive that targets `input` — `[(ngModel)]`,\n * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes\n * naturally on the same element.\n *\n * @example\n * ```html\n * <input wrInput [(ngModel)]=\"name\" placeholder=\"Your name\" />\n *\n * <!-- Works with ngx-mask, validators, etc. -->\n * <input wrInput [(ngModel)]=\"phone\" mask=\"(000) 000-0000\" />\n * ```\n *\n * For prefix / suffix / password-toggle layouts, wrap the input in\n * `<wr-input-group>`.\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Directive({\n  selector: 'input[wrInput], textarea[wrInput]',\n  host: {\n    '[class]': 'classes()',\n    '[attr.id]': 'resolvedId()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '[attr.aria-describedby]': 'describedBy()',\n  },\n})\nexport class WrInput {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Read once, at construction: a static `id=\"\"` in the template is already on\n   * the element by the time a directive is instantiated, and it must win over\n   * the field's generated one.\n   */\n  private readonly ownId = this.host.nativeElement.getAttribute('id');\n\n  /**\n   * Adopts the surrounding `<wr-form-field>`'s `controlId`, so the label it\n   * already rendered actually points at this element. Without this the `for`\n   * referenced an id that existed nowhere and the input had no label at all.\n   */\n  protected readonly resolvedId = computed(() => this.ownId ?? this.field?.controlId() ?? null);\n\n  constructor() {\n    // Tell the field which id actually stuck. Without this its `<label for>` keeps\n    // pointing at the generated id while this element answers to the author's own —\n    // a label referencing nothing, which is the same as having none.\n    if (this.ownId) this.field?.adoptControlId(this.ownId);\n  }\n\n  /**\n   * Announced state, taken from the surrounding `<wr-form-field>`.\n   *\n   * The field renders the message but cannot reach the projected control, so\n   * the control reads back: without this the error is visible on screen and\n   * invisible to a screen reader, which never learns the field is invalid or\n   * what the message says.\n   */\n  // 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  /**\n   * Control size. Unset, it falls back to\n   * `provideWrConfig({ input: { size } })`. @default 'md'\n   *\n   * Called `wrSize` until v14, to dodge the native `<input size>` attribute —\n   * which measures the field in characters and which `.wr-input`'s `width: 100%`\n   * has always overridden, so the clash it guarded against was never observable.\n   * It made this the one size input in the catalog spelled differently from the\n   * other twenty-three. The cost of the change is that a consumer who wanted the\n   * NATIVE `size` on an ngwr input can no longer have it — but `width: 100%`\n   * meant they never did.\n   */\n  readonly size = input<WrInputSize | null>(null);\n\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })`; `[rounded]=\"false\"` turns a\n   * configured `true` back off. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving: the plain `coerceBooleanProperty` folds `null` into `false`,\n    // which would make \"not set\" and \"set to false\" the same value — and a config\n    // default nothing could ever supply. A valueless `rounded` attribute still\n    // arrives as `''` and still coerces to `true`.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `null` as each input's own default, not `'md'` / `false`: with a literal sitting\n  // there, \"the template said nothing\" and \"the template said md\" are the same value,\n  // so no app-wide default could ever apply. The effective default is the last\n  // argument below, which is where the old inline one moved to.\n  protected readonly resolvedSize = useConfigValue(this.size, c => c.input?.size, 'md');\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input'];\n    const size = this.resolvedSize();\n    if (size !== 'md') parts.push(`wr-input--${size}`);\n    if (this.resolvedRounded()) parts.push('wr-input--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **left** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's left edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputPrefix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },\n})\nexport class WrInputPrefix {}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **right** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's right edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputSuffix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },\n})\nexport class WrInputSuffix {}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useConfigValue } from 'ngwr/config';\n\n/**\n * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /\n * `<wr-password-toggle>` siblings. Renders the border and focus ring; the\n * inner native input drops its own border so it visually melts into the\n * group.\n *\n * Pure layout — no signals shared with the inner directive, focus styling is\n * driven entirely by `:focus-within` so any focusable child counts.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/input\n */\n@Component({\n  selector: 'wr-input-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrInputGroup {\n  /**\n   * Pill-shaped corners. Unset, it falls back to\n   * `provideWrConfig({ input: { rounded } })` — the same key the inner `[wrInput]`\n   * reads. @default false\n   */\n  readonly rounded = input<boolean | null, BooleanInput>(null, {\n    // Null-preserving, like `[wrInput]`'s: the plain `coerceBooleanProperty` folds\n    // `null` into `false`, which would make \"not set\" and \"set to false\" the same\n    // value — and a config default nothing could ever supply.\n    transform: (v: BooleanInput): boolean | null => (v == null ? null : coerceBooleanProperty(v)),\n  });\n\n  // `input.rounded`, and deliberately not a key of its own: the group owns the visible\n  // border once it wraps an input, which drops its own chrome. Resolving one and not\n  // the other would put a pill radius on the element nobody can see and leave the\n  // corner the user does see square.\n  protected readonly resolvedRounded = useConfigValue(this.rounded, c => c.input?.rounded, false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input-group'];\n    if (this.resolvedRounded()) parts.push('wr-input-group--rounded');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\n/**\n * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`\n * attribute between `password` and `text`. Drop it inside an\n * `<wr-input-group>` next to a password input.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput type=\"password\" [(ngModel)]=\"pw\" #pwInput />\n *   <wr-password-toggle [for]=\"pwInput\" />\n * </wr-input-group>\n * ```\n */\n@Component({\n  selector: 'wr-password-toggle',\n  templateUrl: './password-toggle.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrPasswordToggle {\n  /** Reference to the linked password input. */\n  readonly for = input.required<HTMLInputElement>();\n\n  protected readonly revealed = signal(false);\n\n  /** Accessible name while the password is hidden. Falls back to `input.showPassword`. */\n  readonly showLabel = input<string | null>(null);\n\n  /** Accessible name while the password is revealed. Falls back to `input.hidePassword`. */\n  readonly hideLabel = input<string | null>(null);\n\n  private readonly resolvedShowLabel = useI18nText(this.showLabel, 'input.showPassword', 'Show password');\n  private readonly resolvedHideLabel = useI18nText(this.hideLabel, 'input.hidePassword', 'Hide password');\n\n  protected readonly ariaLabel = computed(() =>\n    this.revealed() ? this.resolvedHideLabel() : this.resolvedShowLabel()\n  );\n\n  protected toggle(): void {\n    const input = this.for();\n    const next = input.type === 'password' ? 'text' : 'password';\n    input.type = next;\n    this.revealed.set(next === 'text');\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AAUH;;;;;;;;;;;;;;;;;;;;AAoBG;MAUU,OAAO,CAAA;AACD,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;IAClD,KAAK,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAElE;;;;AAIG;IACc,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC;AAEnE;;;;AAIG;AACgB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,IAAI;mFAAC;AAE7F,IAAA,WAAA,GAAA;;;;QAIE,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;IACxD;AAEA;;;;;;;AAOG;;;;;;IAMc,SAAS,GAAG,gBAAgB,EAAE;AAC5B,IAAA,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW;AACxC,IAAA,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW;AAE3D;;;;;;;;;;;AAWG;IACM,IAAI,GAAG,KAAK,CAAqB,IAAI;6EAAC;AAE/C;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAA+B,IAAI,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA;;;;;QAKzD,SAAS,EAAE,CAAC,CAAe,MAAsB,CAAC,IAAI,IAAI,GAAG,IAAI,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,EAAA,CAC7F;;;;;AAMiB,IAAA,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;AAClE,IAAA,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;AAE5E,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,UAAU,CAAC;AAC1B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;QAChC,IAAI,IAAI,KAAK,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAA,CAAE,CAAC;QAClD,IAAI,IAAI,CAAC,eAAe,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;AAC3D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAlFS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAP,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,SAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAP,OAAO,EAAA,UAAA,EAAA,CAAA;kBATnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,WAAW,EAAE,cAAc;AAC3B,wBAAA,qBAAqB,EAAE,eAAe;AACtC,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA;AACF,iBAAA;;;AC5CD;;;;;AAKG;AAIH;;;;;;;;;;;;AAYG;MAKU,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qDAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,qDAAqD,EAAE;AACvE,iBAAA;;;ACzBD;;;;;AAKG;AAIH;;;;;;;;;;;;AAYG;MAKU,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qDAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,qDAAqD,EAAE;AACvE,iBAAA;;;ACzBD;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;AAmBG;MAOU,YAAY,CAAA;AACvB;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAA+B,IAAI,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA;;;;QAIzD,SAAS,EAAE,CAAC,CAAe,MAAsB,CAAC,IAAI,IAAI,GAAG,IAAI,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,EAAA,CAC7F;;;;;AAMiB,IAAA,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;AAE5E,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,gBAAgB,CAAC;QAChC,IAAI,IAAI,CAAC,eAAe,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACjE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAvBS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,oQAJb,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAIf,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;ACrCD;;;;;AAKG;AAMH;;;;;;;;;;;;AAYG;MAMU,gBAAgB,CAAA;;IAElB,GAAG,GAAG,KAAK,CAAC,QAAQ;4EAAoB;IAE9B,QAAQ,GAAG,MAAM,CAAC,KAAK;iFAAC;;IAGlC,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;;IAGtC,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;IAE9B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,oBAAoB,EAAE,eAAe,CAAC;IACtF,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,oBAAoB,EAAE,eAAe,CAAC;IAEpF,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE;kFACtE;IAES,MAAM,GAAA;AACd,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACxB,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU;AAC5D,QAAA,KAAK,CAAC,IAAI,GAAG,IAAI;QACjB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC;IACpC;uGAxBW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,mdC7B7B,uyCAyCA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDZa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;+BACE,oBAAoB,EAAA,aAAA,EAEf,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,uyCAAA,EAAA;;;AE3BvC;;AAEG;;;;"}

package/fesm2022/ngwr-keyboard.mjs

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

package/fesm2022/ngwr-knob.mjs

@@ -274,10 +274,10 @@ class WrKnob {
         const largeArc = endDeg - startDeg > 180 ? 1 : 0;
         return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrKnob, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrKnob, isStandalone: true, selector: "wr-knob", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"focusable() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <!--\n      `dir=\"auto\"` because this is a number and a unit read as one phrase, and\n      the browser is the only thing that knows which way that phrase runs. In an\n      RTL paragraph the Unicode BiDi algorithm treats a digit run as neutral\n      against the letters beside it, so `40 dB` was drawn `dB 40` \u2014 and `-5 dB`\n      as `dB 5-`, with the sign on the wrong end of the number. `dir=\"auto\"`\n      picks the direction from the first strong character in the composed text,\n      so a Latin `suffix` keeps the number first and an Arabic one reads\n      right-to-left, which is correct for both.\n\n      `unicode-bidi: isolate` does NOT fix this and was measured doing nothing:\n      isolation seals the element off from its SURROUNDINGS, and the flip\n      happens inside it.\n    -->\n    <div class=\"wr-knob__text\" dir=\"auto\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrKnob, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrKnob, isStandalone: true, selector: "wr-knob", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"focusable() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <!--\n      `dir=\"auto\"` because this is a number and a unit read as one phrase, and\n      the browser is the only thing that knows which way that phrase runs. In an\n      RTL paragraph the Unicode BiDi algorithm treats a digit run as neutral\n      against the letters beside it, so `40 dB` was drawn `dB 40` \u2014 and `-5 dB`\n      as `dB 5-`, with the sign on the wrong end of the number. `dir=\"auto\"`\n      picks the direction from the first strong character in the composed text,\n      so a Latin `suffix` keeps the number first and an Arabic one reads\n      right-to-left, which is correct for both.\n\n      `unicode-bidi: isolate` does NOT fix this and was measured doing nothing:\n      isolation seals the element off from its SURROUNDINGS, and the flip\n      happens inside it.\n    -->\n    <div class=\"wr-knob__text\" dir=\"auto\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrKnob, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrKnob, decorators: [{
             type: Component,
             args: [{ selector: 'wr-knob', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-knob__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"focusable() ? 0 : -1\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n    <path\n      class=\"wr-knob__track\"\n      [attr.d]=\"trackPath()\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      class=\"wr-knob__value\"\n      [attr.d]=\"valuePath()\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"wr-knob__handle\"\n      [attr.cx]=\"handlePos().x\"\n      [attr.cy]=\"handlePos().y\"\n      [attr.r]=\"strokeWidth() / 2\"\n      [attr.fill]=\"valueColor()\"\n    />\n  </svg>\n  @if (showValue()) {\n    <!--\n      `dir=\"auto\"` because this is a number and a unit read as one phrase, and\n      the browser is the only thing that knows which way that phrase runs. In an\n      RTL paragraph the Unicode BiDi algorithm treats a digit run as neutral\n      against the letters beside it, so `40 dB` was drawn `dB 40` \u2014 and `-5 dB`\n      as `dB 5-`, with the sign on the wrong end of the number. `dir=\"auto\"`\n      picks the direction from the first strong character in the composed text,\n      so a Latin `suffix` keeps the number first and an Arabic one reads\n      right-to-left, which is correct for both.\n\n      `unicode-bidi: isolate` does NOT fix this and was measured doing nothing:\n      isolation seals the element off from its SURROUNDINGS, and the flip\n      happens inside it.\n    -->\n    <div class=\"wr-knob__text\" dir=\"auto\">\n      {{ value() }}<span class=\"wr-knob__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });

package/fesm2022/ngwr-layout.mjs

@@ -67,10 +67,10 @@ class WrLayoutSider {
         // write produce exactly one event each rather than two and none.
         this.collapsed.set(!this.collapsed());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutSider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrLayoutSider, isStandalone: true, selector: "wr-layout-sider", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", collapsedChanged: "collapsedChanged" }, host: { attributes: { "role": "complementary" }, properties: { "class": "classes()", "style.width": "collapsed() ? collapsedWidth() : width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutSider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrLayoutSider, isStandalone: true, selector: "wr-layout-sider", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", collapsedChanged: "collapsedChanged" }, host: { attributes: { "role": "complementary" }, properties: { "class": "classes()", "style.width": "collapsed() ? collapsedWidth() : width()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutSider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutSider, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-sider',
@@ -120,10 +120,10 @@ class WrLayout {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: WrLayout, isStandalone: true, selector: "wr-layout", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "siders", predicate: WrLayoutSider, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: WrLayout, isStandalone: true, selector: "wr-layout", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "siders", predicate: WrLayoutSider, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout',
@@ -144,10 +144,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * size and stickiness are app-controlled via CSS.
  */
 class WrLayoutHeader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: WrLayoutHeader, isStandalone: true, selector: "wr-layout-header", host: { attributes: { "role": "banner" }, classAttribute: "wr-layout-header" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: WrLayoutHeader, isStandalone: true, selector: "wr-layout-header", host: { attributes: { "role": "banner" }, classAttribute: "wr-layout-header" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-header',
@@ -168,10 +168,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * remaining space.
  */
 class WrLayoutContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: WrLayoutContent, isStandalone: true, selector: "wr-layout-content", host: { attributes: { "role": "main" }, classAttribute: "wr-layout-content" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: WrLayoutContent, isStandalone: true, selector: "wr-layout-content", host: { attributes: { "role": "main" }, classAttribute: "wr-layout-content" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-content',
@@ -192,10 +192,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * children.
  */
 class WrLayoutFooter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: WrLayoutFooter, isStandalone: true, selector: "wr-layout-footer", host: { attributes: { "role": "contentinfo" }, classAttribute: "wr-layout-footer" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: WrLayoutFooter, isStandalone: true, selector: "wr-layout-footer", host: { attributes: { "role": "contentinfo" }, classAttribute: "wr-layout-footer" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLayoutFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLayoutFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-layout-footer',